fix: correct foreign key direction based on relationship cardinality in SQL exports

* feat: add table selection UI for large database imports (>50 tables)

* some changes

* some changes

* some changes

* fix

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>

.github/workflows/ci.yaml

@@ -24,4 +24,7 @@ jobs:
         run: npm run lint
 
       - name: Build
-        run: npm run build
+        run: npm run build
+
+      - name: Run tests
+        run: npm run test:ci

.github/workflows/cla.yaml

@@ -0,0 +1,33 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+permissions:
+  actions: write
+  contents: write # this can be 'read' if the signatures are in remote repository
+  pull-requests: write
+  statuses: write
+
+
+jobs:
+  CLAAssistant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        # Beta Release
+        uses: contributor-assistant/github-action@v2.6.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.CHARTDB_CLA_SIGNATURES_PAT }}
+        with:
+          remote-organization-name: 'chartdb'
+          remote-repository-name: 'cla-signatures'
+          path-to-signatures: 'signatures/version1/cla.json'
+          path-to-document: 'https://github.com/chartdb/chartdb/blob/main/CLA.md'
+          # branch should not be protected
+          branch: 'main'
+          allowlist: 

.github/workflows/publish.yaml

@@ -32,7 +32,7 @@ jobs:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-    
+
       - name: Install dependencies
         run: npm ci
 
@@ -42,6 +42,12 @@ jobs:
       - name: Build project
         run: npm run build
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
       - name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v4
@@ -50,10 +56,11 @@ jobs:
           tags: |
             type=semver,pattern={{version}}
 
-      - name: Build and push Docker image
+      - name: Build and push multi-arch Docker image
         uses: docker/build-push-action@v6
         with:
           context: .
           push: true
+          platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

CHANGELOG.md

@@ -1,5 +1,109 @@
 # Changelog
 
+## [1.13.2](https://github.com/chartdb/chartdb/compare/v1.13.1...v1.13.2) (2025-07-06)
+
+
+### Bug Fixes
+
+* add DISABLE_ANALYTICS flag to opt-out of Fathom analytics ([#750](https://github.com/chartdb/chartdb/issues/750)) ([aa0b629](https://github.com/chartdb/chartdb/commit/aa0b629a3eaf8e8b60473ea3f28f769270c7714c))
+
+## [1.13.1](https://github.com/chartdb/chartdb/compare/v1.13.0...v1.13.1) (2025-07-04)
+
+
+### Bug Fixes
+
+* **custom_types:** fix display custom types in select box ([#737](https://github.com/chartdb/chartdb/issues/737)) ([24be28a](https://github.com/chartdb/chartdb/commit/24be28a662c48fc5bc62e76446b9669d83d7d3e0))
+* **dbml-editor:** for some cases that the dbml had issues ([#739](https://github.com/chartdb/chartdb/issues/739)) ([e0ff198](https://github.com/chartdb/chartdb/commit/e0ff198c3fd416498dac5680bb323ec88c54b65c))
+* **dbml:** Filter duplicate tables at diagram level before export dbml ([#746](https://github.com/chartdb/chartdb/issues/746)) ([d429128](https://github.com/chartdb/chartdb/commit/d429128e65aa28c500eac2487356e4869506e948))
+* **export-sql:** conditionally show generic option and reorder by diagram type ([#708](https://github.com/chartdb/chartdb/issues/708)) ([c6118e0](https://github.com/chartdb/chartdb/commit/c6118e0cdb0e5caaf73447d33db2fde1a98efe60))
+* general performance improvements on canvas ([#751](https://github.com/chartdb/chartdb/issues/751)) ([4fcc49d](https://github.com/chartdb/chartdb/commit/4fcc49d49a76a4b886ffd6cf0b40cf2fc49952ec))
+* **import-database:** for custom types query to import supabase & timescale ([#745](https://github.com/chartdb/chartdb/issues/745)) ([2fce832](https://github.com/chartdb/chartdb/commit/2fce8326b67b751d38dd34f409fea574449d0298))
+* **import-db:** fix mariadb import ([#740](https://github.com/chartdb/chartdb/issues/740)) ([7d063b9](https://github.com/chartdb/chartdb/commit/7d063b905f19f51501468bd0bd794a25cf65e1be))
+* **performance:** improve storage provider performance ([#734](https://github.com/chartdb/chartdb/issues/734)) ([c6788b4](https://github.com/chartdb/chartdb/commit/c6788b49173d9cce23571daeb460285cb7cffb11))
+* resolve unresponsive cursor and input glitches when editing field comments ([#749](https://github.com/chartdb/chartdb/issues/749)) ([d15985e](https://github.com/chartdb/chartdb/commit/d15985e3999a0cd54213b2fb08c55d48a1b8b3b2))
+* **table name:** updates table name value when its updated from canvas/sidebar ([#716](https://github.com/chartdb/chartdb/issues/716)) ([8b86e1c](https://github.com/chartdb/chartdb/commit/8b86e1c22992aaadcce7ad5fc1d267c5a57a99f0))
+
+## [1.13.0](https://github.com/chartdb/chartdb/compare/v1.12.0...v1.13.0) (2025-05-28)
+
+
+### Features
+
+* **custom-types:** add enums and composite types for Postgres ([#714](https://github.com/chartdb/chartdb/issues/714)) ([c3904d9](https://github.com/chartdb/chartdb/commit/c3904d9fdd63ef5b76a44e73582d592f2c418687))
+* **export-sql:** add custom types to export sql script ([#720](https://github.com/chartdb/chartdb/issues/720)) ([cad155e](https://github.com/chartdb/chartdb/commit/cad155e6550f171b8faecbfdff27032798ecea43))
+* **oracle:** support oracle in ChartDB ([#709](https://github.com/chartdb/chartdb/issues/709)) ([765a1c4](https://github.com/chartdb/chartdb/commit/765a1c43547a29bd3428c942c7afb56f63aaf046))
+
+
+### Bug Fixes
+
+* **canvas:** prevent canvas blink and lag on field edit ([#723](https://github.com/chartdb/chartdb/issues/723)) ([cd44346](https://github.com/chartdb/chartdb/commit/cd443466c7952f1cdc3739645c12130b9231e3a1))
+* **canvas:** prevent canvas blink and lag on primary field edit ([#725](https://github.com/chartdb/chartdb/issues/725)) ([4477b1c](https://github.com/chartdb/chartdb/commit/4477b1ca1fe6b282b604739a23e31181acd4d7bc))
+* **custom_types:** fix custom types on storage provider ([#721](https://github.com/chartdb/chartdb/issues/721)) ([beb0151](https://github.com/chartdb/chartdb/commit/beb015194f917c0ba644458410162d2b7599918c))
+* **custom_types:** fix custom types on storage provider ([#722](https://github.com/chartdb/chartdb/issues/722)) ([18012dd](https://github.com/chartdb/chartdb/commit/18012ddab1718bcce3432aea626adf6fc9be25d9))
+* **custom-types:** fetch directly via the smart-query the custom types ([#729](https://github.com/chartdb/chartdb/issues/729)) ([cf1e141](https://github.com/chartdb/chartdb/commit/cf1e141837eda77d717ad87489ce9946b688e226))
+* **dbml-editor:** export comments with schema if existsed ([#728](https://github.com/chartdb/chartdb/issues/728)) ([73f542a](https://github.com/chartdb/chartdb/commit/73f542adad2d66a1e84fc656a0c34d9b1f39f33c))
+* **dbml-editor:** fix export dbml - to show enums ([#724](https://github.com/chartdb/chartdb/issues/724)) ([3894a22](https://github.com/chartdb/chartdb/commit/3894a221745d32c13160bedcb1bcf53d89897698))
+* **import-database:** remove the default fetch from import database ([#718](https://github.com/chartdb/chartdb/issues/718)) ([0d11b0c](https://github.com/chartdb/chartdb/commit/0d11b0c55a94a12a764785cfdcf2ba10437241d6))
+* **menu:** add oracle to import menu ([#713](https://github.com/chartdb/chartdb/issues/713)) ([aee5779](https://github.com/chartdb/chartdb/commit/aee577998342eb4a2b05b3e03181992a435712d8))
+* **relationship:** fix creating of relationships ([#732](https://github.com/chartdb/chartdb/issues/732)) ([08b627c](https://github.com/chartdb/chartdb/commit/08b627cb8ca8fdf08d8ed2ff7e89104887deffb7))
+
+## [1.12.0](https://github.com/chartdb/chartdb/compare/v1.11.0...v1.12.0) (2025-05-20)
+
+
+### Features
+
+* **areas:** implement area to enable logical diagram arrangement ([#661](https://github.com/chartdb/chartdb/issues/661)) ([92e3ec7](https://github.com/chartdb/chartdb/commit/92e3ec785c91f7f19881c6d9d0692257af4651bc))
+* **examples:** update examples to have areas ([#677](https://github.com/chartdb/chartdb/issues/677)) ([21c9129](https://github.com/chartdb/chartdb/commit/21c9129e14670c744950cd43a5cbdd4b7d47c639))
+* **image-export:** add transparent and pattern export image toggles ([#671](https://github.com/chartdb/chartdb/issues/671)) ([6b8d637](https://github.com/chartdb/chartdb/commit/6b8d637b757b94630ecd7521b4a2c99634afae69))
+
+
+### Bug Fixes
+
+* add sorting based on how common the datatype on side-panel ([#651](https://github.com/chartdb/chartdb/issues/651)) ([3a1b8d1](https://github.com/chartdb/chartdb/commit/3a1b8d1db13d8dd7cb6cbe5ef8c5a60faccfeae5))
+* **canvas:** disable edit area name on read only ([#666](https://github.com/chartdb/chartdb/issues/666)) ([9402822](https://github.com/chartdb/chartdb/commit/9402822fa31f8cd94fe7971277839ee5425e29bf))
+* **canvas:** read only mode ([#665](https://github.com/chartdb/chartdb/issues/665)) ([651fe36](https://github.com/chartdb/chartdb/commit/651fe361fce61fe0577d2593f268131e9ca359d0))
+* **clone:** add areas to clone diagram ([#664](https://github.com/chartdb/chartdb/issues/664)) ([aee1713](https://github.com/chartdb/chartdb/commit/aee1713aecdd5e54228a16cbc3c4fc184661c56b))
+* **dbml-editor:** add inline refs mode + fix issues with DBML syntax ([#687](https://github.com/chartdb/chartdb/issues/687)) ([fbf2fe9](https://github.com/chartdb/chartdb/commit/fbf2fe919c2168c715f8231c0246753b19635f14))
+* **dbml-editor:** remove invalid fields before showing DBML + warning ([#683](https://github.com/chartdb/chartdb/issues/683)) ([5759241](https://github.com/chartdb/chartdb/commit/5759241573db204183c92599588d59f4aadaeafb))
+* **ddl-import:** fix datatypes when importing via ddl ([#696](https://github.com/chartdb/chartdb/issues/696)) ([a1144bb](https://github.com/chartdb/chartdb/commit/a1144bbf761a0daedd546b5d9b92300be59e0157))
+* **ddl:** inline fks ddl script ([#701](https://github.com/chartdb/chartdb/issues/701)) ([5849e45](https://github.com/chartdb/chartdb/commit/5849e4586c7c2a7cd86bd064df8916b130fc6234))
+* **dependencies:** hide icon when diagram has no dependencies ([#684](https://github.com/chartdb/chartdb/issues/684)) ([547149d](https://github.com/chartdb/chartdb/commit/547149da44db6d3d1e36d619d475fe52ff83a472))
+* **examples:** add loader ([#678](https://github.com/chartdb/chartdb/issues/678)) ([90a20dd](https://github.com/chartdb/chartdb/commit/90a20dd1b0277c4aee848fae5ed7a8347c5ba77d))
+* **examples:** fix clone examples ([#679](https://github.com/chartdb/chartdb/issues/679)) ([1778abb](https://github.com/chartdb/chartdb/commit/1778abb683d575af244edcd9a11f8d03f903f719))
+* **expanded-table:** persist expanded state across renders ([#707](https://github.com/chartdb/chartdb/issues/707)) ([54d5e96](https://github.com/chartdb/chartdb/commit/54d5e96a6db1e3abd52229a89ac503ff31885386))
+* **export image:** Fix usage of advanced options accordion ([#703](https://github.com/chartdb/chartdb/issues/703)) ([0ce85cf](https://github.com/chartdb/chartdb/commit/0ce85cf76b733f441f661608278c0db3122c5074))
+* **import-database:** auto detect when user try to import ddl script ([#698](https://github.com/chartdb/chartdb/issues/698)) ([5a5e64a](https://github.com/chartdb/chartdb/commit/5a5e64abef510cff28b3d8972520d0b9df29b024))
+* **import-database:** remove view_definition when importing via query ([#702](https://github.com/chartdb/chartdb/issues/702)) ([481ad3c](https://github.com/chartdb/chartdb/commit/481ad3c8449f469bf2b4418e4cdcc5b5608dfd36))
+* **import-json:** for broken json imports ([#697](https://github.com/chartdb/chartdb/issues/697)) ([2368e0d](https://github.com/chartdb/chartdb/commit/2368e0d2639021c4a11a8e5131d6af44fb6a47db))
+* **import-json:** simplify import script for fixing invalid JSON ([#681](https://github.com/chartdb/chartdb/issues/681)) ([226e6cf](https://github.com/chartdb/chartdb/commit/226e6cf1ce4d2edcfbee6a4de7ab0bc0cfeb17fe))
+* **import:** dbml and query - senetize before import ([#699](https://github.com/chartdb/chartdb/issues/699)) ([34c0a71](https://github.com/chartdb/chartdb/commit/34c0a7163f47bde7ddfaa8f044341e3c971b7e03))
+* **navbar:** open diagram directly from diagram icon ([#694](https://github.com/chartdb/chartdb/issues/694)) ([7db86dc](https://github.com/chartdb/chartdb/commit/7db86dcf8c97d34b056e4b5b85a0dda0438322ea))
+* **performance:** Only render visible ([#672](https://github.com/chartdb/chartdb/issues/672)) ([83c4333](https://github.com/chartdb/chartdb/commit/83c43332d497e9fc148a18b9cb4d9ecc85e44183))
+* **performance:** update field only when changed ([#685](https://github.com/chartdb/chartdb/issues/685)) ([d3ddf7c](https://github.com/chartdb/chartdb/commit/d3ddf7c51eaa4b9cddb961defd52d423f39f281d))
+* **postgres:** fix import of postgres fks ([#700](https://github.com/chartdb/chartdb/issues/700)) ([89e3cea](https://github.com/chartdb/chartdb/commit/89e3ceab00defaabc079e165fc90e92ca00722cf))
+* **schema:** add areas to diagram schema ([#663](https://github.com/chartdb/chartdb/issues/663)) ([ecfa148](https://github.com/chartdb/chartdb/commit/ecfa14829bcb1b813c7b154b4bd59f24e3032d8f))
+* **sql-script:** change ddl to be sql-script ([#710](https://github.com/chartdb/chartdb/issues/710)) ([487fb2d](https://github.com/chartdb/chartdb/commit/487fb2d5c17b70ac54aa17af9a2ac9aded6b40ba))
+* **table:** enhance field focus behavior to include table hover state ([#676](https://github.com/chartdb/chartdb/issues/676)) ([19d2d0b](https://github.com/chartdb/chartdb/commit/19d2d0bddd3a464995b79e97e6caf6e652836081))
+* **translations:** Add some translations for ru-RU language ([#690](https://github.com/chartdb/chartdb/issues/690)) ([97d01d7](https://github.com/chartdb/chartdb/commit/97d01d72014e473c42348c9ebcbe7a0b973d31aa))
+
+## [1.11.0](https://github.com/chartdb/chartdb/compare/v1.10.0...v1.11.0) (2025-04-17)
+
+
+### Features
+
+* add sidebar footer help buttons ([#650](https://github.com/chartdb/chartdb/issues/650)) ([fc46cbb](https://github.com/chartdb/chartdb/commit/fc46cbb8933761c7bac3604664f7de812f6f5b6b))
+* **import-sql:** import postgresql via SQL (DDL script) ([#639](https://github.com/chartdb/chartdb/issues/639)) ([f7a6e0c](https://github.com/chartdb/chartdb/commit/f7a6e0cb5e4921dd9540739f9da269858e7ca7be))
+
+
+### Bug Fixes
+
+* **import:** display query result formatted ([#644](https://github.com/chartdb/chartdb/issues/644)) ([caa81c2](https://github.com/chartdb/chartdb/commit/caa81c24a6535bc87129c38622aac5a62a6d479d))
+* **import:** strict parse of database metadata ([#635](https://github.com/chartdb/chartdb/issues/635)) ([0940d72](https://github.com/chartdb/chartdb/commit/0940d72d5d3726650213257639f24ba47e729854))
+* **mobile:** fix create diagram modal on mobile ([#646](https://github.com/chartdb/chartdb/issues/646)) ([25c4b42](https://github.com/chartdb/chartdb/commit/25c4b4253849575d7a781ed197281e2a35e7184a))
+* **mysql-ddl:** update the script to import - for create fks ([#642](https://github.com/chartdb/chartdb/issues/642)) ([cf81253](https://github.com/chartdb/chartdb/commit/cf81253535ca5a3b8a65add78287c1bdb283a1c7))
+* **performance:** Import deps dynamically ([#652](https://github.com/chartdb/chartdb/issues/652)) ([e3cb627](https://github.com/chartdb/chartdb/commit/e3cb62788c13f149e35e1a5020191bd43d14b52f))
+* remove unused links from help menu ([#623](https://github.com/chartdb/chartdb/issues/623)) ([85275e5](https://github.com/chartdb/chartdb/commit/85275e5dd6e7845f06f682eeceda7932fc87e875))
+* **sidebar:** turn sidebar to responsive for mobile ([#658](https://github.com/chartdb/chartdb/issues/658)) ([ce2389f](https://github.com/chartdb/chartdb/commit/ce2389f135d399d82c9848335d31174bac8a3791))
+
 ## [1.10.0](https://github.com/chartdb/chartdb/compare/v1.9.0...v1.10.0) (2025-03-25)
 
 

CLA.md

@@ -0,0 +1,45 @@
+# ChartDB Contributors License Agreement
+
+This Contributors License Agreement ("CLA") is entered into between the Contributor, and ChartDB, Inc. ("ChartDB"), collectively referred to as the "Parties."
+
+## Background:
+
+ChartDB is an open-source project aimed at providing an open-source database diagramming and visualization tool for all parties.This CLA governs the rights and contributions made by the Contributor to the ChartDB project.
+
+## Agreement:
+
+**Contributor Grant of License:**
+
+By submitting code, documentation, or any other materials (collectively, "Contributions") to the ChartDB project, the Contributor grants ChartDB a perpetual, worldwide, non-exclusive, royalty-free, sublicensable license to use, modify, distribute, and otherwise exploit the Contributions, including any intellectual property rights therein, for the purposes of the ChartDB project.
+
+**Representation of Ownership and Right to Contribute:**
+
+The Contributor represents that they have the legal right to grant the license stated in Section 1, and that the Contributions do not infringe upon the intellectual property rights of any third party. The Contributor also represents that they have the authority to submit the Contributions on their own behalf or, if applicable, on behalf of their employer or any other entity.
+
+**Patent Grant:**
+
+If the Contributions include any method, process, or apparatus that is covered by a patent, the Contributor agrees to grant ChartDB a non-exclusive, worldwide, royalty-free license under any patent claims necessary to use, modify, distribute, and otherwise exploit the Contributions for the purposes of the ChartDB project.
+
+**No Implied Warranties or Support:**
+
+The Contributor acknowledges that the Contributions are provided "as is," without any warranties or support of any kind. ChartDB shall have no obligation to provide maintenance, updates, bug fixes, or support for the Contributions.
+
+**Retention of Contributor Rights:**
+
+The Contributor retains all right, title, and interest in and to their Contributions. This CLA does not restrict the Contributor from using their own Contributions for any other purpose.
+
+**Governing Law:**
+
+This CLA shall be governed by and construed in accordance with the laws of Delaware (DE), without regard to its conflict of laws principles.
+
+**Entire Agreement:**
+
+This CLA constitutes the entire agreement between the Parties with respect to the subject matter hereof and supersedes all prior and contemporaneous understandings, agreements, representations, and warranties.
+
+**Acceptance:**
+
+By submitting Contributions to the ChartDB project, the Contributor acknowledges and agrees to the terms and conditions of this CLA. If the Contributor is agreeing to this CLA on behalf of an entity, they represent that they have the necessary authority to bind that entity to these terms.
+
+**Effective Date:**
+
+This CLA is effective as of the date of the first Contribution made by the Contributor to the ChartDB project.

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-chartdb.io@gmail.com.
+support@chartdb.io.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -18,7 +18,7 @@ To submit a pull request:
 
 If you find a bug, check [GitHub issues](https://github.com/chartdb/chartdb/issues) to see if it’s already reported. If not, feel free to [report it](https://github.com/chartdb/chartdb/issues/new?labels=bug).
 
-For questions about using ChartDB, reach out to us via Email (chartdb.io@gmail.com) or [Discord](https://discord.gg/QeFwyWSKwC). For feature requests, create a [new feature](https://github.com/chartdb/chartdb/issues/new?labels=enhancement).
+For questions about using ChartDB, reach out to us via Email (support@chartdb.io) or [Discord](https://discord.gg/QeFwyWSKwC). For feature requests, create a [new feature](https://github.com/chartdb/chartdb/issues/new?labels=enhancement).
 
 ### Creating a Branch
 
@@ -35,7 +35,7 @@ By contributing, you agree that your work will be licensed under ChartDB's [lice
 ## Questions?
 
 Feel free to ask in `#contributing` on [Discord](https://discord.gg/QeFwyWSKwC) if you have questions about our process, how to proceed, etc.
-or [Email](chartdb.io@gmail.com)
+or [Email](support@chartdb.io)
 
 ---
 

Dockerfile

@@ -3,7 +3,8 @@ FROM node:22-alpine AS builder
 ARG VITE_OPENAI_API_KEY
 ARG VITE_OPENAI_API_ENDPOINT
 ARG VITE_LLM_MODEL_NAME
-ARG VITE_HIDE_BUCKLE_DOT_DEV
+ARG VITE_HIDE_CHARTDB_CLOUD
+ARG VITE_DISABLE_ANALYTICS
 
 WORKDIR /usr/src/app
 
@@ -16,7 +17,8 @@ COPY . .
 RUN echo "VITE_OPENAI_API_KEY=${VITE_OPENAI_API_KEY}" > .env && \
     echo "VITE_OPENAI_API_ENDPOINT=${VITE_OPENAI_API_ENDPOINT}" >> .env && \
     echo "VITE_LLM_MODEL_NAME=${VITE_LLM_MODEL_NAME}" >> .env && \
-    echo "VITE_HIDE_BUCKLE_DOT_DEV=${VITE_HIDE_BUCKLE_DOT_DEV}" >> .env 
+    echo "VITE_HIDE_CHARTDB_CLOUD=${VITE_HIDE_CHARTDB_CLOUD}" >> .env && \
+    echo "VITE_DISABLE_ANALYTICS=${VITE_DISABLE_ANALYTICS}" >> .env
 
 RUN npm run build
 

README.md

@@ -30,8 +30,8 @@
   <a href="https://discord.gg/QeFwyWSKwC">
     <img src="https://img.shields.io/discord/1277047413705670678?color=5865F2&label=Discord&logo=discord&logoColor=white" alt="Discord community channel" />
   </a>
-  <a href="https://x.com/chartdb_io">
-    <img src="https://img.shields.io/twitter/follow/ChartDB?style=social"/>
+  <a href="https://x.com/intent/follow?screen_name=jonathanfishner">
+    <img src="https://img.shields.io/twitter/follow/jonathanfishner?style=social"/>
   </a>
 
 </h4>
@@ -125,6 +125,8 @@ docker run \
   -p 8080:80 chartdb
 ```
 
+> **Privacy Note:** ChartDB includes privacy-focused analytics via Fathom Analytics. You can disable this by adding `-e DISABLE_ANALYTICS=true` to the run command or `--build-arg VITE_DISABLE_ANALYTICS=true` when building.
+
 > **Note:** You must configure either Option 1 (OpenAI API key) OR Option 2 (Custom endpoint and model name) for AI capabilities to work. Do not mix the two options.
 
 Open your browser and navigate to `http://localhost:8080`.
@@ -149,7 +151,7 @@ VITE_LLM_MODEL_NAME=Qwen/Qwen2.5-32B-Instruct-AWQ
 
 - [Discord](https://discord.gg/QeFwyWSKwC) (For live discussion with the community and the ChartDB team)
 - [GitHub Issues](https://github.com/chartdb/chartdb/issues) (For any bugs and errors you encounter using ChartDB)
-- [Twitter](https://x.com/chartdb_io) (Get news fast)
+- [Twitter](https://x.com/intent/follow?screen_name=jonathanfishner) (Get news fast)
 
 ## Contributing
 

default.conf.template

@@ -10,11 +10,12 @@ server {
 
     location /config.js {
         default_type application/javascript;
-        return 200 "window.env = { 
+        return 200 "window.env = {
             OPENAI_API_KEY: \"$OPENAI_API_KEY\",
             OPENAI_API_ENDPOINT: \"$OPENAI_API_ENDPOINT\",
             LLM_MODEL_NAME: \"$LLM_MODEL_NAME\",
-            HIDE_BUCKLE_DOT_DEV: \"$HIDE_BUCKLE_DOT_DEV\"
+            HIDE_CHARTDB_CLOUD: \"$HIDE_CHARTDB_CLOUD\",
+            DISABLE_ANALYTICS: \"$DISABLE_ANALYTICS\"
         };";
     }
 

entrypoint.sh

@@ -1,7 +1,7 @@
 #!/bin/sh
 
 # Replace placeholders in nginx.conf
-envsubst '${OPENAI_API_KEY} ${OPENAI_API_ENDPOINT} ${LLM_MODEL_NAME} ${HIDE_BUCKLE_DOT_DEV}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
+envsubst '${OPENAI_API_KEY} ${OPENAI_API_ENDPOINT} ${LLM_MODEL_NAME} ${HIDE_CHARTDB_CLOUD} ${DISABLE_ANALYTICS}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
 
 # Start Nginx
 nginx -g "daemon off;"

index.html

@@ -13,11 +13,21 @@
             rel="stylesheet"
         />
         <script src="/config.js"></script>
-        <script
-            src="https://cdn.usefathom.com/script.js"
-            data-site="PRHIVBNN"
-            defer
-        ></script>
+        <script>
+            // Load analytics only if not disabled
+            (function() {
+                const disableAnalytics = (window.env && window.env.DISABLE_ANALYTICS === 'true') ||
+                                        (typeof process !== 'undefined' && process.env && process.env.VITE_DISABLE_ANALYTICS === 'true');
+
+                if (!disableAnalytics) {
+                    const script = document.createElement('script');
+                    script.src = 'https://cdn.usefathom.com/script.js';
+                    script.setAttribute('data-site', 'PRHIVBNN');
+                    script.defer = true;
+                    document.head.appendChild(script);
+                }
+            })();
+        </script>
     </head>
     <body>
         <div id="root"></div>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "chartdb",
     "private": true,
-    "version": "1.10.0",
+    "version": "1.13.2",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -9,7 +9,11 @@
         "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
         "lint:fix": "npm run lint -- --fix",
         "preview": "vite preview",
-        "prepare": "husky"
+        "prepare": "husky",
+        "test": "vitest",
+        "test:ci": "vitest run --reporter=verbose --bail=1",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest --coverage"
     },
     "dependencies": {
         "@ai-sdk/openai": "^0.0.51",
@@ -32,7 +36,7 @@
         "@radix-ui/react-scroll-area": "1.2.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.2",
-        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/react-toggle": "^1.1.0",
@@ -50,8 +54,9 @@
         "html-to-image": "^1.11.11",
         "i18next": "^23.14.0",
         "i18next-browser-languagedetector": "^8.0.0",
-        "lucide-react": "^0.441.0",
+        "lucide-react": "^0.525.0",
         "monaco-editor": "^0.52.0",
+        "motion": "^12.23.6",
         "nanoid": "^5.0.7",
         "node-sql-parser": "^5.3.2",
         "react": "^18.3.1",
@@ -73,12 +78,16 @@
         "@eslint/compat": "^1.2.4",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.16.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^22.1.0",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^8.18.0",
         "@typescript-eslint/parser": "^8.18.0",
         "@vitejs/plugin-react": "^4.3.1",
+        "@vitest/ui": "^3.2.4",
         "autoprefixer": "^10.4.20",
         "eslint": "^9.16.0",
         "eslint-config-prettier": "^9.1.0",
@@ -90,6 +99,7 @@
         "eslint-plugin-react-refresh": "^0.4.7",
         "eslint-plugin-tailwindcss": "^3.17.4",
         "globals": "^15.13.0",
+        "happy-dom": "^18.0.1",
         "husky": "^9.1.5",
         "postcss": "^8.4.40",
         "prettier": "^3.3.3",
@@ -97,6 +107,7 @@
         "tailwindcss": "^3.4.7",
         "typescript": "^5.2.2",
         "unplugin-inject-preload": "^3.0.0",
-        "vite": "^5.3.4"
+        "vite": "^5.3.4",
+        "vitest": "^3.2.4"
     }
 }

src/components/code-snippet/code-editor.ts

@@ -1,2 +1,3 @@
 import './config.ts';
 export { Editor } from '@monaco-editor/react';
+export { DiffEditor } from '@monaco-editor/react';

src/components/code-snippet/code-snippet.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '@/hooks/use-theme';
 import { useMonaco } from '@monaco-editor/react';
 import { useToast } from '@/components/toast/use-toast';
 import { Button } from '../button/button';
+import type { LucideIcon } from 'lucide-react';
 import { Copy, CopyCheck } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip';
 import { useTranslation } from 'react-i18next';
@@ -18,27 +19,43 @@ export const Editor = lazy(() =>
     }))
 );
 
+export const DiffEditor = lazy(() =>
+    import('./code-editor').then((module) => ({
+        default: module.DiffEditor,
+    }))
+);
+
 type EditorType = typeof Editor;
 
+export interface CodeSnippetAction {
+    label: string;
+    icon: LucideIcon;
+    onClick: () => void;
+}
+
 export interface CodeSnippetProps {
     className?: string;
     code: string;
+    codeToCopy?: string;
     language?: 'sql' | 'shell';
     loading?: boolean;
     autoScroll?: boolean;
     isComplete?: boolean;
     editorProps?: React.ComponentProps<EditorType>;
+    actions?: CodeSnippetAction[];
 }
 
 export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
     ({
         className,
         code,
+        codeToCopy,
         loading,
         language = 'sql',
         autoScroll = false,
         isComplete = true,
         editorProps,
+        actions,
     }) => {
         const { t } = useTranslation();
         const monaco = useMonaco();
@@ -85,7 +102,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
             }
 
             try {
-                await navigator.clipboard.writeText(code);
+                await navigator.clipboard.writeText(codeToCopy ?? code);
                 setIsCopied(true);
             } catch {
                 setIsCopied(false);
@@ -97,7 +114,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                     ),
                 });
             }
-        }, [code, t, toast]);
+        }, [code, codeToCopy, t, toast]);
 
         return (
             <div
@@ -111,36 +128,58 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                 ) : (
                     <Suspense fallback={<Spinner />}>
                         {isComplete ? (
-                            <Tooltip
-                                onOpenChange={setTooltipOpen}
-                                open={isCopied || tooltipOpen}
-                            >
-                                <TooltipTrigger
-                                    asChild
-                                    className="absolute right-1 top-1 z-10"
+                            <div className="absolute right-1 top-1 z-10 flex flex-col gap-1">
+                                <Tooltip
+                                    onOpenChange={setTooltipOpen}
+                                    open={isCopied || tooltipOpen}
                                 >
-                                    <span>
-                                        <Button
-                                            className=" h-fit p-1.5"
-                                            variant="outline"
-                                            onClick={copyToClipboard}
-                                        >
-                                            {isCopied ? (
-                                                <CopyCheck size={16} />
-                                            ) : (
-                                                <Copy size={16} />
-                                            )}
-                                        </Button>
-                                    </span>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {t(
-                                        isCopied
-                                            ? 'copied'
-                                            : 'copy_to_clipboard'
-                                    )}
-                                </TooltipContent>
-                            </Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span>
+                                            <Button
+                                                className="h-fit p-1.5"
+                                                variant="outline"
+                                                onClick={copyToClipboard}
+                                            >
+                                                {isCopied ? (
+                                                    <CopyCheck size={16} />
+                                                ) : (
+                                                    <Copy size={16} />
+                                                )}
+                                            </Button>
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {t(
+                                            isCopied
+                                                ? 'copied'
+                                                : 'copy_to_clipboard'
+                                        )}
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                {actions &&
+                                    actions.length > 0 &&
+                                    actions.map((action, index) => (
+                                        <Tooltip key={index}>
+                                            <TooltipTrigger asChild>
+                                                <span>
+                                                    <Button
+                                                        className="h-fit p-1.5"
+                                                        variant="outline"
+                                                        onClick={action.onClick}
+                                                    >
+                                                        <action.icon
+                                                            size={16}
+                                                        />
+                                                    </Button>
+                                                </span>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                {action.label}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    ))}
+                            </div>
                         ) : null}
 
                         <Editor

src/components/diagram-icon/diagram-icon.tsx

@@ -22,14 +22,15 @@ export interface DiagramIconProps
 export const DiagramIcon = React.forwardRef<
     React.ElementRef<typeof TooltipTrigger>,
     DiagramIconProps
->(({ databaseType, databaseEdition, className, imgClassName }, ref) =>
+>(({ databaseType, databaseEdition, className, imgClassName, onClick }, ref) =>
     databaseEdition ? (
         <Tooltip>
             <TooltipTrigger className={cn('mr-1', className)} ref={ref} asChild>
                 <img
                     src={databaseEditionToImageMap[databaseEdition]}
-                    className={cn('h-5 max-w-fit rounded-full', imgClassName)}
+                    className={cn('max-h-5 max-w-5 rounded-full', imgClassName)}
                     alt="database"
+                    onClick={onClick}
                 />
             </TooltipTrigger>
             <TooltipContent>
@@ -41,8 +42,9 @@ export const DiagramIcon = React.forwardRef<
             <TooltipTrigger className={cn('mr-2', className)} ref={ref} asChild>
                 <img
                     src={databaseSecondaryLogoMap[databaseType]}
-                    className={cn('h-5 max-w-fit', imgClassName)}
+                    className={cn('max-h-5 max-w-5', imgClassName)}
                     alt="database"
+                    onClick={onClick}
                 />
             </TooltipTrigger>
             <TooltipContent>

src/components/empty-state/empty-state.tsx

@@ -52,7 +52,7 @@ export const EmptyState = forwardRef<
                 </Label>
                 <Label
                     className={cn(
-                        'text-sm font-normal text-muted-foreground',
+                        'text-sm text-center font-normal text-muted-foreground',
                         descriptionClassName
                     )}
                 >

src/components/pagination/pagination.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ButtonProps } from '../button/button';
+import { buttonVariants } from '../button/button-variants';
+import {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    DotsHorizontalIcon,
+} from '@radix-ui/react-icons';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn('mx-auto flex w-full justify-center', className)}
+        {...props}
+    />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+    HTMLUListElement,
+    React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        className={cn('flex flex-row items-center gap-1', className)}
+        {...props}
+    />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+    <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+    React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+    className,
+    isActive,
+    size = 'icon',
+    ...props
+}: PaginationLinkProps) => (
+    <a
+        aria-current={isActive ? 'page' : undefined}
+        className={cn(
+            buttonVariants({
+                variant: isActive ? 'outline' : 'ghost',
+                size,
+            }),
+            className
+        )}
+        {...props}
+    />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn('gap-1 pl-2.5', className)}
+        {...props}
+    >
+        <ChevronLeftIcon className="size-4" />
+        <span>Previous</span>
+    </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn('gap-1 pr-2.5', className)}
+        {...props}
+    >
+        <span>Next</span>
+        <ChevronRightIcon className="size-4" />
+    </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<'span'>) => (
+    <span
+        aria-hidden
+        className={cn('flex h-9 w-9 items-center justify-center', className)}
+        {...props}
+    >
+        <DotsHorizontalIcon className="size-4" />
+        <span className="sr-only">More pages</span>
+    </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationLink,
+    PaginationItem,
+    PaginationPrevious,
+    PaginationNext,
+    PaginationEllipsis,
+};

src/components/select-box/select-box.tsx

@@ -26,6 +26,7 @@ export interface SelectBoxOption {
     description?: string;
     regex?: string;
     extractRegex?: RegExp;
+    group?: string;
 }
 
 export interface SelectBoxProps {
@@ -51,6 +52,7 @@ export interface SelectBoxProps {
     disabled?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    popoverClassName?: string;
 }
 
 export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
@@ -75,6 +77,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
             disabled,
             open,
             onOpenChange: setOpen,
+            popoverClassName,
         },
         ref
     ) => {
@@ -175,6 +178,101 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
             [isOpen, onOpenChange]
         );
 
+        const groups = React.useMemo(
+            () =>
+                options.reduce(
+                    (acc, option) => {
+                        if (option.group) {
+                            if (!acc[option.group]) {
+                                acc[option.group] = [];
+                            }
+                            acc[option.group].push(option);
+                        } else {
+                            if (!acc['default']) {
+                                acc['default'] = [];
+                            }
+                            acc['default'].push(option);
+                        }
+                        return acc;
+                    },
+                    {} as Record<string, SelectBoxOption[]>
+                ),
+            [options]
+        );
+
+        const hasGroups = React.useMemo(
+            () =>
+                Object.keys(groups).filter((group) => group !== 'default')
+                    .length > 0,
+            [groups]
+        );
+
+        const renderOption = React.useCallback(
+            (option: SelectBoxOption) => {
+                const isSelected =
+                    Array.isArray(value) && value.includes(option.value);
+
+                const isRegexMatch =
+                    option.regex && new RegExp(option.regex)?.test(searchTerm);
+
+                const matches = option.extractRegex
+                    ? searchTerm.match(option.extractRegex)
+                    : undefined;
+
+                return (
+                    <CommandItem
+                        className="flex items-center"
+                        key={option.value}
+                        keywords={option.regex ? [option.regex] : undefined}
+                        onSelect={() =>
+                            handleSelect(
+                                option.value,
+                                matches?.map((match) => match.toString())
+                            )
+                        }
+                    >
+                        {multiple && (
+                            <div
+                                className={cn(
+                                    'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                                    isSelected
+                                        ? 'bg-primary text-primary-foreground'
+                                        : 'opacity-50 [&_svg]:invisible'
+                                )}
+                            >
+                                <CheckIcon />
+                            </div>
+                        )}
+                        <div className="flex flex-1 items-center truncate">
+                            <span>
+                                {isRegexMatch ? searchTerm : option.label}
+                                {!isRegexMatch && optionSuffix
+                                    ? optionSuffix(option)
+                                    : ''}
+                            </span>
+                            {option.description && (
+                                <span className="ml-1 w-0 flex-1 truncate text-xs text-muted-foreground">
+                                    {option.description}
+                                </span>
+                            )}
+                        </div>
+                        {((!multiple && option.value === value) ||
+                            isRegexMatch) && (
+                            <CheckIcon
+                                className={cn(
+                                    'ml-auto',
+                                    option.value === value
+                                        ? 'opacity-100'
+                                        : 'opacity-0'
+                                )}
+                            />
+                        )}
+                    </CommandItem>
+                );
+            },
+            [value, multiple, searchTerm, handleSelect, optionSuffix]
+        );
+
         return (
             <Popover open={isOpen} onOpenChange={onOpenChange} modal={true}>
                 <PopoverTrigger asChild tabIndex={0} onKeyDown={handleKeyDown}>
@@ -245,7 +343,10 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                     </div>
                 </PopoverTrigger>
                 <PopoverContent
-                    className="w-fit min-w-[var(--radix-popover-trigger-width)] p-0"
+                    className={cn(
+                        'w-fit min-w-[var(--radix-popover-trigger-width)] p-0',
+                        popoverClassName
+                    )}
                     align="center"
                 >
                     <Command
@@ -317,96 +418,22 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
 
                         <ScrollArea>
                             <div className="max-h-64 w-full">
-                                <CommandGroup>
-                                    <CommandList className="max-h-fit w-full">
-                                        {options.map((option) => {
-                                            const isSelected =
-                                                Array.isArray(value) &&
-                                                value.includes(option.value);
-
-                                            const isRegexMatch =
-                                                option.regex &&
-                                                new RegExp(option.regex)?.test(
-                                                    searchTerm
-                                                );
-
-                                            const matches = option.extractRegex
-                                                ? searchTerm.match(
-                                                      option.extractRegex
-                                                  )
-                                                : undefined;
-
-                                            return (
-                                                <CommandItem
-                                                    className="flex items-center"
-                                                    key={option.value}
-                                                    keywords={
-                                                        option.regex
-                                                            ? [option.regex]
-                                                            : undefined
-                                                    }
-                                                    // value={option.value}
-                                                    onSelect={() =>
-                                                        handleSelect(
-                                                            option.value,
-                                                            matches?.map(
-                                                                (match) =>
-                                                                    match.toString()
-                                                            )
-                                                        )
-                                                    }
-                                                >
-                                                    {multiple && (
-                                                        <div
-                                                            className={cn(
-                                                                'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                                                                isSelected
-                                                                    ? 'bg-primary text-primary-foreground'
-                                                                    : 'opacity-50 [&_svg]:invisible'
-                                                            )}
-                                                        >
-                                                            <CheckIcon />
-                                                        </div>
-                                                    )}
-                                                    <div className="flex items-center truncate">
-                                                        <span>
-                                                            {isRegexMatch
-                                                                ? searchTerm
-                                                                : option.label}
-                                                            {!isRegexMatch &&
-                                                            optionSuffix
-                                                                ? optionSuffix(
-                                                                      option
-                                                                  )
-                                                                : ''}
-                                                        </span>
-                                                        {option.description && (
-                                                            <span className="ml-1 text-xs text-muted-foreground">
-                                                                {
-                                                                    option.description
-                                                                }
-                                                            </span>
-                                                        )}
-                                                    </div>
-                                                    {((!multiple &&
-                                                        option.value ===
-                                                            value) ||
-                                                        isRegexMatch) && (
-                                                        <CheckIcon
-                                                            className={cn(
-                                                                'ml-auto',
-                                                                option.value ===
-                                                                    value
-                                                                    ? 'opacity-100'
-                                                                    : 'opacity-0'
-                                                            )}
-                                                        />
-                                                    )}
-                                                </CommandItem>
-                                            );
-                                        })}
-                                    </CommandList>
-                                </CommandGroup>
+                                <CommandList className="max-h-fit w-full">
+                                    {hasGroups
+                                        ? Object.entries(groups).map(
+                                              ([groupName, groupOptions]) => (
+                                                  <CommandGroup
+                                                      key={groupName}
+                                                      heading={groupName}
+                                                  >
+                                                      {groupOptions.map(
+                                                          renderOption
+                                                      )}
+                                                  </CommandGroup>
+                                              )
+                                          )
+                                        : options.map(renderOption)}
+                                </CommandList>
                             </div>
                         </ScrollArea>
                     </Command>

src/components/toast/toaster.tsx

@@ -20,6 +20,7 @@ export function Toaster() {
                 description,
                 action,
                 layout = 'row',
+                hideCloseButton = false,
                 ...props
             }) {
                 return (
@@ -38,7 +39,7 @@ export function Toaster() {
                             ) : null}
                         </div>
                         {layout === 'row' ? action : null}
-                        <ToastClose />
+                        {!hideCloseButton ? <ToastClose /> : null}
                     </Toast>
                 );
             })}

src/components/toast/use-toast.ts

@@ -12,6 +12,7 @@ type ToasterToast = ToastProps & {
     description?: React.ReactNode;
     action?: ToastActionElement;
     layout?: 'row' | 'column';
+    hideCloseButton?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/components/tree-view/tree-item-skeleton.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Skeleton } from '../skeleton/skeleton';
+import { cn } from '@/lib/utils';
+
+export interface TreeItemSkeletonProps
+    extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const TreeItemSkeleton: React.FC<TreeItemSkeletonProps> = ({
+    className,
+    style,
+}) => {
+    return (
+        <div className={cn('px-2 py-1', className)} style={style}>
+            <Skeleton className="h-3.5 w-full rounded-sm" />
+        </div>
+    );
+};

src/components/tree-view/tree-view.tsx

@@ -0,0 +1,461 @@
+import {
+    ChevronRight,
+    File,
+    Folder,
+    Loader2,
+    type LucideIcon,
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/button/button';
+import type {
+    TreeNode,
+    FetchChildrenFunction,
+    SelectableTreeProps,
+} from './tree';
+import type { ExpandedState } from './use-tree';
+import { useTree } from './use-tree';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { TreeItemSkeleton } from './tree-item-skeleton';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from '@/components/tooltip/tooltip';
+
+interface TreeViewProps<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+> {
+    data: TreeNode<Type, Context>[];
+    fetchChildren?: FetchChildrenFunction<Type, Context>;
+    onNodeClick?: (node: TreeNode<Type, Context>) => void;
+    className?: string;
+    defaultIcon?: LucideIcon;
+    defaultFolderIcon?: LucideIcon;
+    defaultIconProps?: React.ComponentProps<LucideIcon>;
+    defaultFolderIconProps?: React.ComponentProps<LucideIcon>;
+    selectable?: SelectableTreeProps<Type, Context>;
+    expanded?: ExpandedState;
+    setExpanded?: Dispatch<SetStateAction<ExpandedState>>;
+    renderHoverComponent?: (node: TreeNode<Type, Context>) => ReactNode;
+    renderActionsComponent?: (node: TreeNode<Type, Context>) => ReactNode;
+    loadingNodeIds?: string[];
+}
+
+export function TreeView<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+>({
+    data,
+    fetchChildren,
+    onNodeClick,
+    className,
+    defaultIcon = File,
+    defaultFolderIcon = Folder,
+    defaultIconProps,
+    defaultFolderIconProps,
+    selectable,
+    expanded: expandedProp,
+    setExpanded: setExpandedProp,
+    renderHoverComponent,
+    renderActionsComponent,
+    loadingNodeIds,
+}: TreeViewProps<Type, Context>) {
+    const { expanded, loading, loadedChildren, hasMoreChildren, toggleNode } =
+        useTree({
+            fetchChildren,
+            expanded: expandedProp,
+            setExpanded: setExpandedProp,
+        });
+    const [selectedIdInternal, setSelectedIdInternal] = React.useState<
+        string | undefined
+    >(selectable?.defaultSelectedId);
+
+    const selectedId = useMemo(() => {
+        return selectable?.selectedId ?? selectedIdInternal;
+    }, [selectable?.selectedId, selectedIdInternal]);
+
+    const setSelectedId = useCallback(
+        (value: SetStateAction<string | undefined>) => {
+            if (selectable?.setSelectedId) {
+                selectable.setSelectedId(value);
+            } else {
+                setSelectedIdInternal(value);
+            }
+        },
+        [selectable, setSelectedIdInternal]
+    );
+
+    useEffect(() => {
+        if (selectable?.enabled && selectable.defaultSelectedId) {
+            if (selectable.defaultSelectedId === selectedId) return;
+            setSelectedId(selectable.defaultSelectedId);
+            const { node, path } = findNodeById(
+                data,
+                selectable.defaultSelectedId
+            );
+
+            if (node) {
+                selectable.onSelectedChange?.(node);
+
+                // Expand all parent nodes
+                for (const parent of path) {
+                    if (expanded[parent.id]) continue;
+                    toggleNode(
+                        parent.id,
+                        parent.type,
+                        parent.context,
+                        parent.children
+                    );
+                }
+            }
+        }
+    }, [selectable, toggleNode, selectedId, data, expanded, setSelectedId]);
+
+    const handleNodeSelect = (node: TreeNode<Type, Context>) => {
+        if (selectable?.enabled) {
+            setSelectedId(node.id);
+            selectable.onSelectedChange?.(node);
+        }
+    };
+
+    return (
+        <div className={cn('w-full', className)}>
+            {data.map((node, index) => (
+                <TreeNode
+                    key={node.id}
+                    node={node}
+                    level={0}
+                    expanded={expanded}
+                    loading={loading}
+                    loadedChildren={loadedChildren}
+                    hasMoreChildren={hasMoreChildren}
+                    onToggle={toggleNode}
+                    onNodeClick={onNodeClick}
+                    defaultIcon={defaultIcon}
+                    defaultFolderIcon={defaultFolderIcon}
+                    defaultIconProps={defaultIconProps}
+                    defaultFolderIconProps={defaultFolderIconProps}
+                    selectable={selectable?.enabled}
+                    selectedId={selectedId}
+                    onSelect={handleNodeSelect}
+                    className={index > 0 ? 'mt-0.5' : ''}
+                    renderHoverComponent={renderHoverComponent}
+                    renderActionsComponent={renderActionsComponent}
+                    loadingNodeIds={loadingNodeIds}
+                />
+            ))}
+        </div>
+    );
+}
+
+interface TreeNodeProps<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+> {
+    node: TreeNode<Type, Context>;
+    level: number;
+    expanded: Record<string, boolean>;
+    loading: Record<string, boolean>;
+    loadedChildren: Record<string, TreeNode<Type, Context>[]>;
+    hasMoreChildren: Record<string, boolean>;
+    onToggle: (
+        nodeId: string,
+        nodeType: Type,
+        nodeContext: Context[Type],
+        staticChildren?: TreeNode<Type, Context>[]
+    ) => void;
+    onNodeClick?: (node: TreeNode<Type, Context>) => void;
+    defaultIcon: LucideIcon;
+    defaultFolderIcon: LucideIcon;
+    defaultIconProps?: React.ComponentProps<LucideIcon>;
+    defaultFolderIconProps?: React.ComponentProps<LucideIcon>;
+    selectable?: boolean;
+    selectedId?: string;
+    onSelect: (node: TreeNode<Type, Context>) => void;
+    className?: string;
+    renderHoverComponent?: (node: TreeNode<Type, Context>) => ReactNode;
+    renderActionsComponent?: (node: TreeNode<Type, Context>) => ReactNode;
+    loadingNodeIds?: string[];
+}
+
+function TreeNode<Type extends string, Context extends Record<Type, unknown>>({
+    node,
+    level,
+    expanded,
+    loading,
+    loadedChildren,
+    hasMoreChildren,
+    onToggle,
+    onNodeClick,
+    defaultIcon: DefaultIcon,
+    defaultFolderIcon: DefaultFolderIcon,
+    defaultIconProps,
+    defaultFolderIconProps,
+    selectable,
+    selectedId,
+    onSelect,
+    className,
+    renderHoverComponent,
+    renderActionsComponent,
+    loadingNodeIds,
+}: TreeNodeProps<Type, Context>) {
+    const [isHovered, setIsHovered] = useState(false);
+    const isExpanded = expanded[node.id];
+    const isLoading = loading[node.id];
+    const children = loadedChildren[node.id] || node.children;
+    const isSelected = selectedId === node.id;
+
+    const IconComponent =
+        node.icon || (node.isFolder ? DefaultFolderIcon : DefaultIcon);
+    const iconProps: React.ComponentProps<LucideIcon> = {
+        strokeWidth: isSelected ? 2.5 : 2,
+        ...(node.isFolder ? defaultFolderIconProps : defaultIconProps),
+        ...node.iconProps,
+        className: cn(
+            'h-3.5 w-3.5 text-muted-foreground flex-none',
+            isSelected && 'text-primary text-white',
+            node.iconProps?.className
+        ),
+    };
+
+    return (
+        <div className={cn(className)}>
+            <div
+                className={cn(
+                    'flex items-center gap-1.5 px-2 py-1 rounded-lg cursor-pointer group h-6',
+                    'transition-colors duration-200',
+                    isSelected
+                        ? 'bg-sky-500 border border-sky-600 border dark:bg-sky-600 dark:border-sky-700'
+                        : 'hover:bg-gray-200/50 border border-transparent dark:hover:bg-gray-700/50',
+                    node.className
+                )}
+                {...(isSelected ? { 'data-selected': true } : {})}
+                style={{ paddingLeft: `${level * 16 + 8}px` }}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (selectable && !node.unselectable) {
+                        onSelect(node);
+                    }
+                    // if (node.isFolder) {
+                    //     onToggle(node.id, node.children);
+                    // }
+
+                    // called only once in case of double click
+                    if (e.detail !== 2) {
+                        onNodeClick?.(node);
+                    }
+                }}
+                onDoubleClick={(e) => {
+                    e.stopPropagation();
+                    if (node.isFolder) {
+                        onToggle(
+                            node.id,
+                            node.type,
+                            node.context,
+                            node.children
+                        );
+                    }
+                }}
+            >
+                <div className="flex flex-none items-center gap-1.5">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                            'h-3.5 w-3.5 p-0 hover:bg-transparent flex-none',
+                            isExpanded && 'rotate-90',
+                            'transition-transform duration-200'
+                        )}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (node.isFolder) {
+                                onToggle(
+                                    node.id,
+                                    node.type,
+                                    node.context,
+                                    node.children
+                                );
+                            }
+                        }}
+                    >
+                        {node.isFolder &&
+                            (isLoading ? (
+                                <Loader2
+                                    className={cn('size-3.5 animate-spin', {
+                                        'text-white': isSelected,
+                                    })}
+                                />
+                            ) : (
+                                <ChevronRight
+                                    className={cn('size-3.5', {
+                                        'text-white': isSelected,
+                                    })}
+                                    strokeWidth={2}
+                                />
+                            ))}
+                    </Button>
+
+                    {node.tooltip ? (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                {loadingNodeIds?.includes(node.id) ? (
+                                    <Loader2
+                                        className={cn('size-3.5 animate-spin', {
+                                            'text-white': isSelected,
+                                        })}
+                                    />
+                                ) : (
+                                    <IconComponent
+                                        {...(isSelected
+                                            ? { 'data-selected': true }
+                                            : {})}
+                                        {...iconProps}
+                                    />
+                                )}
+                            </TooltipTrigger>
+                            <TooltipContent
+                                align="center"
+                                className="max-w-[400px]"
+                            >
+                                {node.tooltip}
+                            </TooltipContent>
+                        </Tooltip>
+                    ) : node.empty ? null : loadingNodeIds?.includes(
+                          node.id
+                      ) ? (
+                        <Loader2
+                            className={cn('size-3.5 animate-spin', {
+                                // 'text-white': isSelected,
+                            })}
+                        />
+                    ) : (
+                        <IconComponent
+                            {...(isSelected ? { 'data-selected': true } : {})}
+                            {...iconProps}
+                        />
+                    )}
+                </div>
+
+                <span
+                    {...node.labelProps}
+                    className={cn(
+                        'text-xs truncate min-w-0 flex-1 w-0',
+                        isSelected && 'font-medium text-primary text-white',
+                        node.labelProps?.className
+                    )}
+                    {...(isSelected ? { 'data-selected': true } : {})}
+                >
+                    {node.empty ? '' : node.name}
+                </span>
+                {renderActionsComponent && renderActionsComponent(node)}
+                {isHovered && renderHoverComponent
+                    ? renderHoverComponent(node)
+                    : null}
+            </div>
+
+            <AnimatePresence initial={false}>
+                {isExpanded && children && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{
+                            height: 'auto',
+                            opacity: 1,
+                            transition: {
+                                height: {
+                                    duration: Math.min(
+                                        0.3 + children.length * 0.018,
+                                        0.7
+                                    ),
+                                    ease: 'easeInOut',
+                                },
+                                opacity: {
+                                    duration: Math.min(
+                                        0.2 + children.length * 0.012,
+                                        0.4
+                                    ),
+                                    ease: 'easeInOut',
+                                },
+                            },
+                        }}
+                        exit={{
+                            height: 0,
+                            opacity: 0,
+                            transition: {
+                                height: {
+                                    duration: Math.min(
+                                        0.2 + children.length * 0.01,
+                                        0.45
+                                    ),
+                                    ease: 'easeInOut',
+                                },
+                                opacity: {
+                                    duration: 0.1,
+                                    ease: 'easeOut',
+                                },
+                            },
+                        }}
+                        style={{ overflow: 'hidden' }}
+                    >
+                        {children.map((child) => (
+                            <TreeNode
+                                key={child.id}
+                                node={child}
+                                level={level + 1}
+                                expanded={expanded}
+                                loading={loading}
+                                loadedChildren={loadedChildren}
+                                hasMoreChildren={hasMoreChildren}
+                                onToggle={onToggle}
+                                onNodeClick={onNodeClick}
+                                defaultIcon={DefaultIcon}
+                                defaultFolderIcon={DefaultFolderIcon}
+                                defaultIconProps={defaultIconProps}
+                                defaultFolderIconProps={defaultFolderIconProps}
+                                selectable={selectable}
+                                selectedId={selectedId}
+                                onSelect={onSelect}
+                                className="mt-0.5"
+                                renderHoverComponent={renderHoverComponent}
+                                renderActionsComponent={renderActionsComponent}
+                                loadingNodeIds={loadingNodeIds}
+                            />
+                        ))}
+                        {isLoading ? (
+                            <TreeItemSkeleton
+                                style={{
+                                    paddingLeft: `${level + 2 * 16 + 8}px`,
+                                }}
+                            />
+                        ) : null}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+function findNodeById<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+>(
+    nodes: TreeNode<Type, Context>[],
+    id: string,
+    initialPath: TreeNode<Type, Context>[] = []
+): { node: TreeNode<Type, Context> | null; path: TreeNode<Type, Context>[] } {
+    const path: TreeNode<Type, Context>[] = [...initialPath];
+    for (const node of nodes) {
+        if (node.id === id) return { node, path };
+        if (node.children) {
+            const found = findNodeById(node.children, id, [...path, node]);
+            if (found.node) {
+                return found;
+            }
+        }
+    }
+    return { node: null, path };
+}

src/components/tree-view/tree.ts

@@ -0,0 +1,41 @@
+import type { LucideIcon } from 'lucide-react';
+import type React from 'react';
+
+export interface TreeNode<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+> {
+    id: string;
+    name: string;
+    isFolder?: boolean;
+    children?: TreeNode<Type, Context>[];
+    icon?: LucideIcon;
+    iconProps?: React.ComponentProps<LucideIcon>;
+    labelProps?: React.ComponentProps<'span'>;
+    type: Type;
+    unselectable?: boolean;
+    tooltip?: string;
+    context: Context[Type];
+    empty?: boolean;
+    className?: string;
+}
+
+export type FetchChildrenFunction<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+> = (
+    nodeId: string,
+    nodeType: Type,
+    nodeContext: Context[Type]
+) => Promise<TreeNode<Type, Context>[]>;
+
+export interface SelectableTreeProps<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+> {
+    enabled: boolean;
+    defaultSelectedId?: string;
+    onSelectedChange?: (node: TreeNode<Type, Context>) => void;
+    selectedId?: string;
+    setSelectedId?: React.Dispatch<React.SetStateAction<string | undefined>>;
+}

src/components/tree-view/use-tree.ts

@@ -0,0 +1,153 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import type { TreeNode, FetchChildrenFunction } from './tree';
+
+export interface ExpandedState {
+    [key: string]: boolean;
+}
+
+interface LoadingState {
+    [key: string]: boolean;
+}
+
+interface LoadedChildren<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+> {
+    [key: string]: TreeNode<Type, Context>[];
+}
+
+interface HasMoreChildrenState {
+    [key: string]: boolean;
+}
+
+export function useTree<
+    Type extends string,
+    Context extends Record<Type, unknown>,
+>({
+    fetchChildren,
+    expanded: expandedProp,
+    setExpanded: setExpandedProp,
+}: {
+    fetchChildren?: FetchChildrenFunction<Type, Context>;
+    expanded?: ExpandedState;
+    setExpanded?: Dispatch<SetStateAction<ExpandedState>>;
+}) {
+    const [expandedInternal, setExpandedInternal] = useState<ExpandedState>({});
+
+    const expanded = useMemo(
+        () => expandedProp ?? expandedInternal,
+        [expandedProp, expandedInternal]
+    );
+    const setExpanded = useCallback(
+        (value: SetStateAction<ExpandedState>) => {
+            if (setExpandedProp) {
+                setExpandedProp(value);
+            } else {
+                setExpandedInternal(value);
+            }
+        },
+        [setExpandedProp, setExpandedInternal]
+    );
+
+    const [loading, setLoading] = useState<LoadingState>({});
+    const [loadedChildren, setLoadedChildren] = useState<
+        LoadedChildren<Type, Context>
+    >({});
+    const [hasMoreChildren, setHasMoreChildren] =
+        useState<HasMoreChildrenState>({});
+
+    const mergeChildren = useCallback(
+        (
+            staticChildren: TreeNode<Type, Context>[] = [],
+            fetchedChildren: TreeNode<Type, Context>[] = []
+        ) => {
+            const fetchedChildrenIds = new Set(
+                fetchedChildren.map((child) => child.id)
+            );
+            const uniqueStaticChildren = staticChildren.filter(
+                (child) => !fetchedChildrenIds.has(child.id)
+            );
+            return [...uniqueStaticChildren, ...fetchedChildren];
+        },
+        []
+    );
+
+    const toggleNode = useCallback(
+        async (
+            nodeId: string,
+            nodeType: Type,
+            nodeContext: Context[Type],
+            staticChildren?: TreeNode<Type, Context>[]
+        ) => {
+            if (expanded[nodeId]) {
+                // If we're collapsing, just update expanded state
+                setExpanded((prev) => ({ ...prev, [nodeId]: false }));
+                return;
+            }
+
+            // Get any previously fetched children
+            const previouslyFetchedChildren = loadedChildren[nodeId] || [];
+
+            // If we have static children, merge them with any previously fetched children
+            if (staticChildren?.length) {
+                const mergedChildren = mergeChildren(
+                    staticChildren,
+                    previouslyFetchedChildren
+                );
+                setLoadedChildren((prev) => ({
+                    ...prev,
+                    [nodeId]: mergedChildren,
+                }));
+
+                // Only show "more loading" if we haven't fetched children before
+                setHasMoreChildren((prev) => ({
+                    ...prev,
+                    [nodeId]: !previouslyFetchedChildren.length,
+                }));
+            }
+
+            // Set expanded state immediately to show static/previously fetched children
+            setExpanded((prev) => ({ ...prev, [nodeId]: true }));
+
+            // If we haven't loaded dynamic children yet
+            if (!previouslyFetchedChildren.length) {
+                setLoading((prev) => ({ ...prev, [nodeId]: true }));
+                try {
+                    const fetchedChildren = await fetchChildren?.(
+                        nodeId,
+                        nodeType,
+                        nodeContext
+                    );
+                    // Merge static and newly fetched children
+                    const allChildren = mergeChildren(
+                        staticChildren || [],
+                        fetchedChildren
+                    );
+
+                    setLoadedChildren((prev) => ({
+                        ...prev,
+                        [nodeId]: allChildren,
+                    }));
+                    setHasMoreChildren((prev) => ({
+                        ...prev,
+                        [nodeId]: false,
+                    }));
+                } catch (error) {
+                    console.error('Error loading children:', error);
+                } finally {
+                    setLoading((prev) => ({ ...prev, [nodeId]: false }));
+                }
+            }
+        },
+        [expanded, loadedChildren, fetchChildren, mergeChildren, setExpanded]
+    );
+
+    return {
+        expanded,
+        loading,
+        loadedChildren,
+        hasMoreChildren,
+        toggleNode,
+    };
+}

src/context/canvas-context/canvas-context.tsx

@@ -12,6 +12,8 @@ export interface CanvasContext {
     }) => void;
     setOverlapGraph: (graph: Graph<string>) => void;
     overlapGraph: Graph<string>;
+    setShowFilter: React.Dispatch<React.SetStateAction<boolean>>;
+    showFilter: boolean;
 }
 
 export const canvasContext = createContext<CanvasContext>({
@@ -19,4 +21,6 @@ export const canvasContext = createContext<CanvasContext>({
     fitView: emptyFn,
     setOverlapGraph: emptyFn,
     overlapGraph: createGraph(),
+    setShowFilter: emptyFn,
+    showFilter: false,
 });

src/context/canvas-context/canvas-provider.tsx

@@ -21,6 +21,8 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
     const [overlapGraph, setOverlapGraph] =
         useState<Graph<string>>(createGraph());
 
+    const [showFilter, setShowFilter] = useState(false);
+
     const reorderTables = useCallback(
         (
             options: { updateHistory?: boolean } = {
@@ -77,6 +79,8 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
                 fitView,
                 setOverlapGraph,
                 overlapGraph,
+                setShowFilter,
+                showFilter,
             }}
         >
             {children}

src/context/chartdb-context/chartdb-context.tsx

@@ -10,6 +10,8 @@ import type { DatabaseEdition } from '@/lib/domain/database-edition';
 import type { DBSchema } from '@/lib/domain/db-schema';
 import type { DBDependency } from '@/lib/domain/db-dependency';
 import { EventEmitter } from 'ahooks/lib/useEventEmitter';
+import type { Area } from '@/lib/domain/area';
+import type { DBCustomType } from '@/lib/domain/db-custom-type';
 
 export type ChartDBEventType =
     | 'add_tables'
@@ -70,6 +72,8 @@ export interface ChartDBContext {
     schemas: DBSchema[];
     relationships: DBRelationship[];
     dependencies: DBDependency[];
+    areas: Area[];
+    customTypes: DBCustomType[];
     currentDiagram: Diagram;
     events: EventEmitter<ChartDBEvent>;
     readonly?: boolean;
@@ -221,6 +225,63 @@ export interface ChartDBContext {
         dependency: Partial<DBDependency>,
         options?: { updateHistory: boolean }
     ) => Promise<void>;
+
+    // Area operations
+    createArea: (attributes?: Partial<Omit<Area, 'id'>>) => Promise<Area>;
+    addArea: (
+        area: Area,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    addAreas: (
+        areas: Area[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    getArea: (id: string) => Area | null;
+    removeArea: (
+        id: string,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    removeAreas: (
+        ids: string[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    updateArea: (
+        id: string,
+        area: Partial<Area>,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+
+    // Custom type operations
+    createCustomType: (
+        attributes?: Partial<Omit<DBCustomType, 'id'>>
+    ) => Promise<DBCustomType>;
+    addCustomType: (
+        customType: DBCustomType,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    addCustomTypes: (
+        customTypes: DBCustomType[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    getCustomType: (id: string) => DBCustomType | null;
+    removeCustomType: (
+        id: string,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    removeCustomTypes: (
+        ids: string[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    updateCustomType: (
+        id: string,
+        customType: Partial<DBCustomType>,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+
+    // Filters
+    hiddenTableIds?: string[];
+    addHiddenTableId: (tableId: string) => Promise<void>;
+    removeHiddenTableId: (tableId: string) => Promise<void>;
 }
 
 export const chartDBContext = createContext<ChartDBContext>({
@@ -230,6 +291,8 @@ export const chartDBContext = createContext<ChartDBContext>({
     tables: [],
     relationships: [],
     dependencies: [],
+    areas: [],
+    customTypes: [],
     schemas: [],
     filteredSchemas: [],
     filterSchemas: emptyFn,
@@ -296,4 +359,27 @@ export const chartDBContext = createContext<ChartDBContext>({
     removeDependencies: emptyFn,
     addDependencies: emptyFn,
     updateDependency: emptyFn,
+
+    // Area operations
+    createArea: emptyFn,
+    addArea: emptyFn,
+    addAreas: emptyFn,
+    getArea: emptyFn,
+    removeArea: emptyFn,
+    removeAreas: emptyFn,
+    updateArea: emptyFn,
+
+    // Custom type operations
+    createCustomType: emptyFn,
+    addCustomType: emptyFn,
+    addCustomTypes: emptyFn,
+    getCustomType: emptyFn,
+    removeCustomType: emptyFn,
+    removeCustomTypes: emptyFn,
+    updateCustomType: emptyFn,
+
+    // Filters
+    hiddenTableIds: [],
+    addHiddenTableId: emptyFn,
+    removeHiddenTableId: emptyFn,
 });

src/context/chartdb-context/chartdb-provider.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { DBTable } from '@/lib/domain/db-table';
 import { deepCopy, generateId } from '@/lib/utils';
 import { randomColor } from '@/lib/colors';
@@ -21,9 +21,15 @@ import { useLocalConfig } from '@/hooks/use-local-config';
 import { defaultSchemas } from '@/lib/data/default-schemas';
 import { useEventEmitter } from 'ahooks';
 import type { DBDependency } from '@/lib/domain/db-dependency';
+import type { Area } from '@/lib/domain/area';
 import { storageInitialValue } from '../storage-context/storage-context';
 import { useDiff } from '../diff-context/use-diff';
 import type { DiffCalculatedEvent } from '../diff-context/diff-context';
+import {
+    DBCustomTypeKind,
+    type DBCustomType,
+} from '@/lib/domain/db-custom-type';
+import { useConfig } from '@/hooks/use-config';
 
 export interface ChartDBProviderProps {
     diagram?: Diagram;
@@ -39,6 +45,11 @@ export const ChartDBProvider: React.FC<
     const { setSchemasFilter, schemasFilter } = useLocalConfig();
     const { addUndoAction, resetRedoStack, resetUndoStack } =
         useRedoUndoStack();
+    const {
+        getHiddenTablesForDiagram,
+        hideTableForDiagram,
+        unhideTableForDiagram,
+    } = useConfig();
     const [diagramId, setDiagramId] = useState('');
     const [diagramName, setDiagramName] = useState('');
     const [diagramCreatedAt, setDiagramCreatedAt] = useState<Date>(new Date());
@@ -56,6 +67,11 @@ export const ChartDBProvider: React.FC<
     const [dependencies, setDependencies] = useState<DBDependency[]>(
         diagram?.dependencies ?? []
     );
+    const [areas, setAreas] = useState<Area[]>(diagram?.areas ?? []);
+    const [customTypes, setCustomTypes] = useState<DBCustomType[]>(
+        diagram?.customTypes ?? []
+    );
+    const [hiddenTableIds, setHiddenTableIds] = useState<string[]>([]);
     const { events: diffEvents } = useDiff();
 
     const diffCalculatedHandler = useCallback((event: DiffCalculatedEvent) => {
@@ -76,6 +92,14 @@ export const ChartDBProvider: React.FC<
 
     diffEvents.useSubscription(diffCalculatedHandler);
 
+    // Sync hiddenTableIds with config
+    useEffect(() => {
+        if (diagramId) {
+            const hiddenTables = getHiddenTablesForDiagram(diagramId);
+            setHiddenTableIds(hiddenTables);
+        }
+    }, [diagramId, getHiddenTablesForDiagram]);
+
     const defaultSchemaName = defaultSchemas[databaseType];
 
     const readonly = useMemo(
@@ -152,6 +176,8 @@ export const ChartDBProvider: React.FC<
             tables,
             relationships,
             dependencies,
+            areas,
+            customTypes,
         }),
         [
             diagramId,
@@ -161,6 +187,8 @@ export const ChartDBProvider: React.FC<
             tables,
             relationships,
             dependencies,
+            areas,
+            customTypes,
             diagramCreatedAt,
             diagramUpdatedAt,
         ]
@@ -172,6 +200,8 @@ export const ChartDBProvider: React.FC<
             setTables([]);
             setRelationships([]);
             setDependencies([]);
+            setAreas([]);
+            setCustomTypes([]);
             setDiagramUpdatedAt(updatedAt);
 
             resetRedoStack();
@@ -182,6 +212,8 @@ export const ChartDBProvider: React.FC<
                 db.deleteDiagramTables(diagramId),
                 db.deleteDiagramRelationships(diagramId),
                 db.deleteDiagramDependencies(diagramId),
+                db.deleteDiagramAreas(diagramId),
+                db.deleteDiagramCustomTypes(diagramId),
             ]);
         }, [db, diagramId, resetRedoStack, resetUndoStack]);
 
@@ -194,6 +226,8 @@ export const ChartDBProvider: React.FC<
             setTables([]);
             setRelationships([]);
             setDependencies([]);
+            setAreas([]);
+            setCustomTypes([]);
             resetRedoStack();
             resetUndoStack();
 
@@ -202,6 +236,8 @@ export const ChartDBProvider: React.FC<
                 db.deleteDiagramRelationships(diagramId),
                 db.deleteDiagram(diagramId),
                 db.deleteDiagramDependencies(diagramId),
+                db.deleteDiagramAreas(diagramId),
+                db.deleteDiagramCustomTypes(diagramId),
             ]);
         }, [db, diagramId, resetRedoStack, resetUndoStack]);
 
@@ -283,22 +319,27 @@ export const ChartDBProvider: React.FC<
     );
 
     const addTables: ChartDBContext['addTables'] = useCallback(
-        async (tables: DBTable[], options = { updateHistory: true }) => {
-            setTables((currentTables) => [...currentTables, ...tables]);
+        async (tablesToAdd: DBTable[], options = { updateHistory: true }) => {
+            setTables((currentTables) => [...currentTables, ...tablesToAdd]);
             const updatedAt = new Date();
             setDiagramUpdatedAt(updatedAt);
             await Promise.all([
                 db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
-                ...tables.map((table) => db.addTable({ diagramId, table })),
+                ...tablesToAdd.map((table) =>
+                    db.addTable({ diagramId, table })
+                ),
             ]);
 
-            events.emit({ action: 'add_tables', data: { tables } });
+            events.emit({
+                action: 'add_tables',
+                data: { tables: tablesToAdd },
+            });
 
             if (options.updateHistory) {
                 addUndoAction({
                     action: 'addTables',
-                    redoData: { tables },
-                    undoData: { tableIds: tables.map((t) => t.id) },
+                    redoData: { tables: tablesToAdd },
+                    undoData: { tableIds: tablesToAdd.map((t) => t.id) },
                 });
                 resetRedoStack();
             }
@@ -757,13 +798,23 @@ export const ChartDBProvider: React.FC<
             options = { updateHistory: true }
         ) => {
             const fields = getTable(tableId)?.fields ?? [];
-            setTables((tables) =>
-                tables.map((table) =>
-                    table.id === tableId
-                        ? { ...table, fields: [...table.fields, field] }
-                        : table
-                )
-            );
+            setTables((tables) => {
+                return tables.map((table) => {
+                    if (table.id === tableId) {
+                        db.updateTable({
+                            id: tableId,
+                            attributes: {
+                                ...table,
+                                fields: [...table.fields, field],
+                            },
+                        });
+
+                        return { ...table, fields: [...table.fields, field] };
+                    }
+
+                    return table;
+                });
+            });
 
             events.emit({
                 action: 'add_field',
@@ -784,13 +835,6 @@ export const ChartDBProvider: React.FC<
             setDiagramUpdatedAt(updatedAt);
             await Promise.all([
                 db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
-                db.updateTable({
-                    id: tableId,
-                    attributes: {
-                        ...table,
-                        fields: [...table.fields, field],
-                    },
-                }),
             ]);
 
             if (options.updateHistory) {
@@ -1363,6 +1407,130 @@ export const ChartDBProvider: React.FC<
         ]
     );
 
+    // Area operations
+    const addAreas: ChartDBContext['addAreas'] = useCallback(
+        async (areas: Area[], options = { updateHistory: true }) => {
+            setAreas((currentAreas) => [...currentAreas, ...areas]);
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                ...areas.map((area) => db.addArea({ diagramId, area })),
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+            ]);
+
+            if (options.updateHistory) {
+                addUndoAction({
+                    action: 'addAreas',
+                    redoData: { areas },
+                    undoData: { areaIds: areas.map((a) => a.id) },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setAreas, addUndoAction, resetRedoStack]
+    );
+
+    const addArea: ChartDBContext['addArea'] = useCallback(
+        async (area: Area, options = { updateHistory: true }) => {
+            return addAreas([area], options);
+        },
+        [addAreas]
+    );
+
+    const createArea: ChartDBContext['createArea'] = useCallback(
+        async (attributes) => {
+            const area: Area = {
+                id: generateId(),
+                name: `Area ${areas.length + 1}`,
+                x: 0,
+                y: 0,
+                width: 300,
+                height: 200,
+                color: randomColor(),
+                ...attributes,
+            };
+
+            await addArea(area);
+
+            return area;
+        },
+        [areas, addArea]
+    );
+
+    const getArea: ChartDBContext['getArea'] = useCallback(
+        (id: string) => areas.find((area) => area.id === id) ?? null,
+        [areas]
+    );
+
+    const removeAreas: ChartDBContext['removeAreas'] = useCallback(
+        async (ids: string[], options = { updateHistory: true }) => {
+            const prevAreas = [
+                ...areas.filter((area) => ids.includes(area.id)),
+            ];
+
+            setAreas((areas) => areas.filter((area) => !ids.includes(area.id)));
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                ...ids.map((id) => db.deleteArea({ diagramId, id })),
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+            ]);
+
+            if (prevAreas.length > 0 && options.updateHistory) {
+                addUndoAction({
+                    action: 'removeAreas',
+                    redoData: { areaIds: ids },
+                    undoData: { areas: prevAreas },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setAreas, areas, addUndoAction, resetRedoStack]
+    );
+
+    const removeArea: ChartDBContext['removeArea'] = useCallback(
+        async (id: string, options = { updateHistory: true }) => {
+            return removeAreas([id], options);
+        },
+        [removeAreas]
+    );
+
+    const updateArea: ChartDBContext['updateArea'] = useCallback(
+        async (
+            id: string,
+            area: Partial<Area>,
+            options = { updateHistory: true }
+        ) => {
+            const prevArea = getArea(id);
+
+            setAreas((areas) =>
+                areas.map((a) => (a.id === id ? { ...a, ...area } : a))
+            );
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                db.updateArea({ id, attributes: area }),
+            ]);
+
+            if (!!prevArea && options.updateHistory) {
+                addUndoAction({
+                    action: 'updateArea',
+                    redoData: { areaId: id, area },
+                    undoData: { areaId: id, area: prevArea },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setAreas, getArea, addUndoAction, resetRedoStack]
+    );
+
     const loadDiagramFromData: ChartDBContext['loadDiagramFromData'] =
         useCallback(
             async (diagram) => {
@@ -1373,6 +1541,8 @@ export const ChartDBProvider: React.FC<
                 setTables(diagram?.tables ?? []);
                 setRelationships(diagram?.relationships ?? []);
                 setDependencies(diagram?.dependencies ?? []);
+                setAreas(diagram?.areas ?? []);
+                setCustomTypes(diagram?.customTypes ?? []);
                 setDiagramCreatedAt(diagram.createdAt);
                 setDiagramUpdatedAt(diagram.updatedAt);
 
@@ -1386,6 +1556,8 @@ export const ChartDBProvider: React.FC<
                 setTables,
                 setRelationships,
                 setDependencies,
+                setAreas,
+                setCustomTypes,
                 setDiagramCreatedAt,
                 setDiagramUpdatedAt,
                 events,
@@ -1398,6 +1570,8 @@ export const ChartDBProvider: React.FC<
                 includeRelationships: true,
                 includeTables: true,
                 includeDependencies: true,
+                includeAreas: true,
+                includeCustomTypes: true,
             });
 
             if (diagram) {
@@ -1409,6 +1583,173 @@ export const ChartDBProvider: React.FC<
         [db, loadDiagramFromData]
     );
 
+    // Custom type operations
+    const getCustomType: ChartDBContext['getCustomType'] = useCallback(
+        (id: string) => customTypes.find((type) => type.id === id) ?? null,
+        [customTypes]
+    );
+
+    const addCustomTypes: ChartDBContext['addCustomTypes'] = useCallback(
+        async (
+            customTypes: DBCustomType[],
+            options = { updateHistory: true }
+        ) => {
+            setCustomTypes((currentTypes) => [...currentTypes, ...customTypes]);
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                ...customTypes.map((customType) =>
+                    db.addCustomType({ diagramId, customType })
+                ),
+            ]);
+
+            if (options.updateHistory) {
+                addUndoAction({
+                    action: 'addCustomTypes',
+                    redoData: { customTypes },
+                    undoData: { customTypeIds: customTypes.map((t) => t.id) },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setCustomTypes, addUndoAction, resetRedoStack]
+    );
+
+    const addCustomType: ChartDBContext['addCustomType'] = useCallback(
+        async (customType: DBCustomType, options = { updateHistory: true }) => {
+            return addCustomTypes([customType], options);
+        },
+        [addCustomTypes]
+    );
+
+    const createCustomType: ChartDBContext['createCustomType'] = useCallback(
+        async (attributes) => {
+            const customType: DBCustomType = {
+                id: generateId(),
+                name: `type_${customTypes.length + 1}`,
+                kind: DBCustomTypeKind.enum,
+                values: [],
+                fields: [],
+                ...attributes,
+            };
+
+            await addCustomType(customType);
+            return customType;
+        },
+        [addCustomType, customTypes]
+    );
+
+    const removeCustomTypes: ChartDBContext['removeCustomTypes'] = useCallback(
+        async (ids, options = { updateHistory: true }) => {
+            const typesToRemove = ids
+                .map((id) => getCustomType(id))
+                .filter(Boolean) as DBCustomType[];
+
+            setCustomTypes((types) =>
+                types.filter((type) => !ids.includes(type.id))
+            );
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                ...ids.map((id) => db.deleteCustomType({ diagramId, id })),
+            ]);
+
+            if (typesToRemove.length > 0 && options.updateHistory) {
+                addUndoAction({
+                    action: 'removeCustomTypes',
+                    redoData: {
+                        customTypeIds: ids,
+                    },
+                    undoData: {
+                        customTypes: typesToRemove,
+                    },
+                });
+                resetRedoStack();
+            }
+        },
+        [
+            db,
+            diagramId,
+            setCustomTypes,
+            addUndoAction,
+            resetRedoStack,
+            getCustomType,
+        ]
+    );
+
+    const removeCustomType: ChartDBContext['removeCustomType'] = useCallback(
+        async (id: string, options = { updateHistory: true }) => {
+            return removeCustomTypes([id], options);
+        },
+        [removeCustomTypes]
+    );
+
+    const updateCustomType: ChartDBContext['updateCustomType'] = useCallback(
+        async (
+            id: string,
+            customType: Partial<DBCustomType>,
+            options = { updateHistory: true }
+        ) => {
+            const prevCustomType = getCustomType(id);
+            setCustomTypes((types) =>
+                types.map((t) => (t.id === id ? { ...t, ...customType } : t))
+            );
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                db.updateCustomType({ id, attributes: customType }),
+            ]);
+
+            if (!!prevCustomType && options.updateHistory) {
+                addUndoAction({
+                    action: 'updateCustomType',
+                    redoData: { customTypeId: id, customType },
+                    undoData: { customTypeId: id, customType: prevCustomType },
+                });
+                resetRedoStack();
+            }
+        },
+        [
+            db,
+            setCustomTypes,
+            addUndoAction,
+            resetRedoStack,
+            getCustomType,
+            diagramId,
+        ]
+    );
+
+    const addHiddenTableId: ChartDBContext['addHiddenTableId'] = useCallback(
+        async (tableId: string) => {
+            if (!hiddenTableIds.includes(tableId)) {
+                setHiddenTableIds((prev) => [...prev, tableId]);
+                await hideTableForDiagram(diagramId, tableId);
+            }
+        },
+        [hiddenTableIds, diagramId, hideTableForDiagram]
+    );
+
+    const removeHiddenTableId: ChartDBContext['removeHiddenTableId'] =
+        useCallback(
+            async (tableId: string) => {
+                if (hiddenTableIds.includes(tableId)) {
+                    setHiddenTableIds((prev) =>
+                        prev.filter((id) => id !== tableId)
+                    );
+                    await unhideTableForDiagram(diagramId, tableId);
+                }
+            },
+            [hiddenTableIds, diagramId, unhideTableForDiagram]
+        );
+
     return (
         <chartDBContext.Provider
             value={{
@@ -1418,6 +1759,7 @@ export const ChartDBProvider: React.FC<
                 tables,
                 relationships,
                 dependencies,
+                areas,
                 currentDiagram,
                 schemas,
                 filteredSchemas,
@@ -1465,6 +1807,24 @@ export const ChartDBProvider: React.FC<
                 removeDependency,
                 removeDependencies,
                 updateDependency,
+                createArea,
+                addArea,
+                addAreas,
+                getArea,
+                removeArea,
+                removeAreas,
+                updateArea,
+                customTypes,
+                createCustomType,
+                addCustomType,
+                addCustomTypes,
+                getCustomType,
+                removeCustomType,
+                removeCustomTypes,
+                updateCustomType,
+                hiddenTableIds,
+                addHiddenTableId,
+                removeHiddenTableId,
             }}
         >
             {children}

src/context/config-context/config-context.tsx

@@ -4,10 +4,27 @@ import type { ChartDBConfig } from '@/lib/domain/config';
 
 export interface ConfigContext {
     config?: ChartDBConfig;
-    updateConfig: (config: Partial<ChartDBConfig>) => Promise<void>;
+    updateConfig: (params: {
+        config?: Partial<ChartDBConfig>;
+        updateFn?: (config: ChartDBConfig) => ChartDBConfig;
+    }) => Promise<void>;
+    getHiddenTablesForDiagram: (diagramId: string) => string[];
+    setHiddenTablesForDiagram: (
+        diagramId: string,
+        hiddenTableIds: string[]
+    ) => Promise<void>;
+    hideTableForDiagram: (diagramId: string, tableId: string) => Promise<void>;
+    unhideTableForDiagram: (
+        diagramId: string,
+        tableId: string
+    ) => Promise<void>;
 }
 
 export const ConfigContext = createContext<ConfigContext>({
     config: undefined,
     updateConfig: emptyFn,
+    getHiddenTablesForDiagram: () => [],
+    setHiddenTablesForDiagram: emptyFn,
+    hideTableForDiagram: emptyFn,
+    unhideTableForDiagram: emptyFn,
 });

src/context/config-context/config-provider.tsx

@@ -19,19 +19,111 @@ export const ConfigProvider: React.FC<React.PropsWithChildren> = ({
         loadConfig();
     }, [getConfig]);
 
-    const updateConfig: ConfigContext['updateConfig'] = async (
-        config: Partial<ChartDBConfig>
-    ) => {
-        await updateDataConfig(config);
-        setConfig((prevConfig) =>
-            prevConfig
-                ? { ...prevConfig, ...config }
-                : { ...{ defaultDiagramId: '' }, ...config }
-        );
+    const updateConfig: ConfigContext['updateConfig'] = async ({
+        config,
+        updateFn,
+    }) => {
+        const promise = new Promise<void>((resolve) => {
+            setConfig((prevConfig) => {
+                let baseConfig: ChartDBConfig = { defaultDiagramId: '' };
+                if (prevConfig) {
+                    baseConfig = prevConfig;
+                }
+
+                const updatedConfig = updateFn
+                    ? updateFn(baseConfig)
+                    : { ...baseConfig, ...config };
+
+                updateDataConfig(updatedConfig).then(() => {
+                    resolve();
+                });
+                return updatedConfig;
+            });
+        });
+
+        return promise;
+    };
+
+    const getHiddenTablesForDiagram = (diagramId: string): string[] => {
+        return config?.hiddenTablesByDiagram?.[diagramId] ?? [];
+    };
+
+    const setHiddenTablesForDiagram = async (
+        diagramId: string,
+        hiddenTableIds: string[]
+    ): Promise<void> => {
+        return updateConfig({
+            updateFn: (currentConfig) => ({
+                ...currentConfig,
+                hiddenTablesByDiagram: {
+                    ...currentConfig.hiddenTablesByDiagram,
+                    [diagramId]: hiddenTableIds,
+                },
+            }),
+        });
+    };
+
+    const hideTableForDiagram = async (
+        diagramId: string,
+        tableId: string
+    ): Promise<void> => {
+        return updateConfig({
+            updateFn: (currentConfig) => {
+                const currentHiddenTables =
+                    currentConfig.hiddenTablesByDiagram?.[diagramId] ?? [];
+                if (currentHiddenTables.includes(tableId)) {
+                    return currentConfig; // Already hidden, no change needed
+                }
+
+                return {
+                    ...currentConfig,
+                    hiddenTablesByDiagram: {
+                        ...currentConfig.hiddenTablesByDiagram,
+                        [diagramId]: [...currentHiddenTables, tableId],
+                    },
+                };
+            },
+        });
+    };
+
+    const unhideTableForDiagram = async (
+        diagramId: string,
+        tableId: string
+    ): Promise<void> => {
+        return updateConfig({
+            updateFn: (currentConfig) => {
+                const currentHiddenTables =
+                    currentConfig.hiddenTablesByDiagram?.[diagramId] ?? [];
+                const filteredTables = currentHiddenTables.filter(
+                    (id) => id !== tableId
+                );
+
+                if (filteredTables.length === currentHiddenTables.length) {
+                    return currentConfig; // Not hidden, no change needed
+                }
+
+                return {
+                    ...currentConfig,
+                    hiddenTablesByDiagram: {
+                        ...currentConfig.hiddenTablesByDiagram,
+                        [diagramId]: filteredTables,
+                    },
+                };
+            },
+        });
     };
 
     return (
-        <ConfigContext.Provider value={{ config, updateConfig }}>
+        <ConfigContext.Provider
+            value={{
+                config,
+                updateConfig,
+                getHiddenTablesForDiagram,
+                setHiddenTablesForDiagram,
+                hideTableForDiagram,
+                unhideTableForDiagram,
+            }}
+        >
             {children}
         </ConfigContext.Provider>
     );

src/context/dialog-context/dialog-context.tsx

@@ -9,10 +9,13 @@ import type { ImportDiagramDialogProps } from '@/dialogs/import-diagram-dialog/i
 import type { CreateRelationshipDialogProps } from '@/dialogs/create-relationship-dialog/create-relationship-dialog';
 import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
 import type { OpenDiagramDialogProps } from '@/dialogs/open-diagram-dialog/open-diagram-dialog';
+import type { CreateDiagramDialogProps } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';
 
 export interface DialogContext {
     // Create diagram dialog
-    openCreateDiagramDialog: () => void;
+    openCreateDiagramDialog: (
+        params?: Omit<CreateDiagramDialogProps, 'dialog'>
+    ) => void;
     closeCreateDiagramDialog: () => void;
 
     // Open diagram dialog

src/context/dialog-context/dialog-provider.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import type { DialogContext } from './dialog-context';
 import { dialogContext } from './dialog-context';
+import type { CreateDiagramDialogProps } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';
 import { CreateDiagramDialog } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';
 import type { OpenDiagramDialogProps } from '@/dialogs/open-diagram-dialog/open-diagram-dialog';
 import { OpenDiagramDialog } from '@/dialogs/open-diagram-dialog/open-diagram-dialog';
@@ -26,6 +27,17 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
     children,
 }) => {
     const [openNewDiagramDialog, setOpenNewDiagramDialog] = useState(false);
+    const [newDiagramDialogParams, setNewDiagramDialogParams] =
+        useState<Omit<CreateDiagramDialogProps, 'dialog'>>();
+    const openNewDiagramDialogHandler: DialogContext['openCreateDiagramDialog'] =
+        useCallback(
+            (props) => {
+                setNewDiagramDialogParams(props);
+                setOpenNewDiagramDialog(true);
+            },
+            [setOpenNewDiagramDialog]
+        );
+
     const [openOpenDiagramDialog, setOpenOpenDiagramDialog] = useState(false);
     const [openDiagramDialogParams, setOpenDiagramDialogParams] =
         useState<Omit<OpenDiagramDialogProps, 'dialog'>>();
@@ -128,7 +140,7 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
     return (
         <dialogContext.Provider
             value={{
-                openCreateDiagramDialog: () => setOpenNewDiagramDialog(true),
+                openCreateDiagramDialog: openNewDiagramDialogHandler,
                 closeCreateDiagramDialog: () => setOpenNewDiagramDialog(false),
                 openOpenDiagramDialog: openOpenDiagramDialogHandler,
                 closeOpenDiagramDialog: () => setOpenOpenDiagramDialog(false),
@@ -161,7 +173,10 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
             }}
         >
             {children}
-            <CreateDiagramDialog dialog={{ open: openNewDiagramDialog }} />
+            <CreateDiagramDialog
+                dialog={{ open: openNewDiagramDialog }}
+                {...newDiagramDialogParams}
+            />
             <OpenDiagramDialog
                 dialog={{ open: openOpenDiagramDialog }}
                 {...openDiagramDialogParams}

src/context/diff-context/diff-context.tsx

@@ -1,11 +1,11 @@
 import { createContext } from 'react';
-import type { DiffMap } from './types';
 import type { Diagram } from '@/lib/domain/diagram';
 import type { DBTable } from '@/lib/domain/db-table';
 import type { EventEmitter } from 'ahooks/lib/useEventEmitter';
 import type { DBField } from '@/lib/domain/db-field';
 import type { DataType } from '@/lib/data/data-types/data-types';
 import type { DBRelationship } from '@/lib/domain/db-relationship';
+import type { DiffMap } from '@/lib/domain/diff/diff';
 
 export type DiffEventType = 'diff_calculated';
 
@@ -14,19 +14,22 @@ export type DiffEventBase<T extends DiffEventType, D> = {
     data: D;
 };
 
+export type DiffCalculatedData = {
+    tablesAdded: DBTable[];
+    fieldsAdded: Map<string, DBField[]>;
+    relationshipsAdded: DBRelationship[];
+};
+
 export type DiffCalculatedEvent = DiffEventBase<
     'diff_calculated',
-    {
-        tablesAdded: DBTable[];
-        fieldsAdded: Map<string, DBField[]>;
-        relationshipsAdded: DBRelationship[];
-    }
+    DiffCalculatedData
 >;
 
 export type DiffEvent = DiffCalculatedEvent;
 
 export interface DiffContext {
     newDiagram: Diagram | null;
+    originalDiagram: Diagram | null;
     diffMap: DiffMap;
     hasDiff: boolean;
 
@@ -43,6 +46,7 @@ export interface DiffContext {
     checkIfNewTable: ({ tableId }: { tableId: string }) => boolean;
     checkIfTableRemoved: ({ tableId }: { tableId: string }) => boolean;
     getTableNewName: ({ tableId }: { tableId: string }) => string | null;
+    getTableNewColor: ({ tableId }: { tableId: string }) => string | null;
 
     // field diff
     checkIfFieldHasChange: ({

src/context/diff-context/diff-provider.tsx

@@ -1,18 +1,28 @@
 import React, { useCallback } from 'react';
-import type { DiffContext, DiffEvent } from './diff-context';
+import type {
+    DiffCalculatedData,
+    DiffContext,
+    DiffEvent,
+} from './diff-context';
 import { diffContext } from './diff-context';
-import type { ChartDBDiff, DiffMap } from './types';
-import { generateDiff, getDiffMapKey } from './diff-check/diff-check';
+
+import {
+    generateDiff,
+    getDiffMapKey,
+} from '@/lib/domain/diff/diff-check/diff-check';
 import type { Diagram } from '@/lib/domain/diagram';
 import { useEventEmitter } from 'ahooks';
 import type { DBField } from '@/lib/domain/db-field';
 import type { DataType } from '@/lib/data/data-types/data-types';
 import type { DBRelationship } from '@/lib/domain/db-relationship';
+import type { ChartDBDiff, DiffMap } from '@/lib/domain/diff/diff';
 
 export const DiffProvider: React.FC<React.PropsWithChildren> = ({
     children,
 }) => {
     const [newDiagram, setNewDiagram] = React.useState<Diagram | null>(null);
+    const [originalDiagram, setOriginalDiagram] =
+        React.useState<Diagram | null>(null);
     const [diffMap, setDiffMap] = React.useState<DiffMap>(
         new Map<string, ChartDBDiff>()
     );
@@ -39,7 +49,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 if (diff.object === 'field' && diff.type === 'added') {
                     const field = newDiagram?.tables
                         ?.find((table) => table.id === diff.tableId)
-                        ?.fields.find((f) => f.id === diff.fieldId);
+                        ?.fields.find((f) => f.id === diff.newField.id);
 
                     if (field) {
                         newFieldsMap.set(diff.tableId, [
@@ -67,7 +77,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
             diffMap.forEach((diff) => {
                 if (diff.object === 'relationship' && diff.type === 'added') {
                     const relationship = newDiagram?.relationships?.find(
-                        (rel) => rel.id === diff.relationshipId
+                        (rel) => rel.id === diff.newRelationship.id
                     );
 
                     if (relationship) {
@@ -81,6 +91,41 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         []
     );
 
+    const generateDiffCalculatedData = useCallback(
+        ({
+            newDiagram,
+            diffMap,
+        }: {
+            newDiagram: Diagram;
+            diffMap: DiffMap;
+        }): DiffCalculatedData => {
+            return {
+                tablesAdded:
+                    newDiagram?.tables?.filter((table) => {
+                        const tableKey = getDiffMapKey({
+                            diffObject: 'table',
+                            objectId: table.id,
+                        });
+
+                        return (
+                            diffMap.has(tableKey) &&
+                            diffMap.get(tableKey)?.type === 'added'
+                        );
+                    }) ?? [],
+
+                fieldsAdded: generateNewFieldsMap({
+                    diffMap: diffMap,
+                    newDiagram: newDiagram,
+                }),
+                relationshipsAdded: findNewRelationships({
+                    diffMap: diffMap,
+                    newDiagram: newDiagram,
+                }),
+            };
+        },
+        [findNewRelationships, generateNewFieldsMap]
+    );
+
     const calculateDiff: DiffContext['calculateDiff'] = useCallback(
         ({ diagram, newDiagram: newDiagramArg }) => {
             const {
@@ -93,35 +138,17 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
             setTablesChanged(newChangedTables);
             setFieldsChanged(newChangedFields);
             setNewDiagram(newDiagramArg);
+            setOriginalDiagram(diagram);
 
             events.emit({
                 action: 'diff_calculated',
-                data: {
-                    tablesAdded:
-                        newDiagramArg?.tables?.filter((table) => {
-                            const tableKey = getDiffMapKey({
-                                diffObject: 'table',
-                                objectId: table.id,
-                            });
-
-                            return (
-                                newDiffs.has(tableKey) &&
-                                newDiffs.get(tableKey)?.type === 'added'
-                            );
-                        }) ?? [],
-
-                    fieldsAdded: generateNewFieldsMap({
-                        diffMap: newDiffs,
-                        newDiagram: newDiagramArg,
-                    }),
-                    relationshipsAdded: findNewRelationships({
-                        diffMap: newDiffs,
-                        newDiagram: newDiagramArg,
-                    }),
-                },
+                data: generateDiffCalculatedData({
+                    diffMap: newDiffs,
+                    newDiagram: newDiagramArg,
+                }),
             });
         },
-        [setDiffMap, events, generateNewFieldsMap, findNewRelationships]
+        [setDiffMap, events, generateDiffCalculatedData]
     );
 
     const getTableNewName = useCallback<DiffContext['getTableNewName']>(
@@ -145,6 +172,26 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         [diffMap]
     );
 
+    const getTableNewColor = useCallback<DiffContext['getTableNewColor']>(
+        ({ tableId }) => {
+            const tableColorKey = getDiffMapKey({
+                diffObject: 'table',
+                objectId: tableId,
+                attribute: 'color',
+            });
+
+            if (diffMap.has(tableColorKey)) {
+                const diff = diffMap.get(tableColorKey);
+
+                if (diff?.type === 'changed') {
+                    return diff.newValue as string;
+                }
+            }
+            return null;
+        },
+        [diffMap]
+    );
+
     const checkIfTableHasChange = useCallback<
         DiffContext['checkIfTableHasChange']
     >(({ tableId }) => tablesChanged.get(tableId) ?? false, [tablesChanged]);
@@ -296,6 +343,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         <diffContext.Provider
             value={{
                 newDiagram,
+                originalDiagram,
                 diffMap,
                 hasDiff: diffMap.size > 0,
 
@@ -306,6 +354,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 checkIfNewTable,
                 checkIfTableRemoved,
                 checkIfTableHasChange,
+                getTableNewColor,
 
                 // field diff
                 checkIfFieldHasChange,

src/context/diff-context/types.ts

@@ -1,53 +0,0 @@
-import type { DataType } from '@/lib/data/data-types/data-types';
-
-export type TableDiffAttribute = 'name' | 'comments';
-
-export interface TableDiff {
-    object: 'table';
-    type: 'added' | 'removed' | 'changed';
-    tableId: string;
-    attributes?: TableDiffAttribute;
-    oldValue?: string;
-    newValue?: string;
-}
-
-export interface RelationshipDiff {
-    object: 'relationship';
-    type: 'added' | 'removed';
-    relationshipId: string;
-}
-
-export type FieldDiffAttribute =
-    | 'name'
-    | 'type'
-    | 'primaryKey'
-    | 'unique'
-    | 'nullable'
-    | 'comments';
-
-export interface FieldDiff {
-    object: 'field';
-    type: 'added' | 'removed' | 'changed';
-    fieldId: string;
-    tableId: string;
-    attributes?: FieldDiffAttribute;
-    oldValue?: string | boolean | DataType;
-    newValue?: string | boolean | DataType;
-}
-
-export interface IndexDiff {
-    object: 'index';
-    type: 'added' | 'removed';
-    indexId: string;
-    tableId: string;
-}
-
-export type ChartDBDiff = TableDiff | FieldDiff | IndexDiff | RelationshipDiff;
-
-export type DiffMap = Map<string, ChartDBDiff>;
-
-export type DiffObject =
-    | TableDiff['object']
-    | FieldDiff['object']
-    | IndexDiff['object']
-    | RelationshipDiff['object'];

src/context/export-image-context/export-image-context.tsx

@@ -3,7 +3,14 @@ import { emptyFn } from '@/lib/utils';
 
 export type ImageType = 'png' | 'jpeg' | 'svg';
 export interface ExportImageContext {
-    exportImage: (type: ImageType, scale: number) => Promise<void>;
+    exportImage: (
+        type: ImageType,
+        options: {
+            includePatternBG: boolean;
+            transparent: boolean;
+            scale: number;
+        }
+    ) => Promise<void>;
 }
 
 export const exportImageContext = createContext<ExportImageContext>({

src/context/export-image-context/export-image-provider.tsx

@@ -8,6 +8,7 @@ import { useFullScreenLoader } from '@/hooks/use-full-screen-spinner';
 import { useTheme } from '@/hooks/use-theme';
 import logoDark from '@/assets/logo-dark.png';
 import logoLight from '@/assets/logo-light.png';
+import type { EffectiveTheme } from '../theme-context/theme-context';
 
 export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
     children,
@@ -57,8 +58,16 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
         []
     );
 
+    const getBackgroundColor = useCallback(
+        (theme: EffectiveTheme, transparent: boolean): string => {
+            if (transparent) return 'transparent';
+            return theme === 'light' ? '#ffffff' : '#141414';
+        },
+        []
+    );
+
     const exportImage: ExportImageContext['exportImage'] = useCallback(
-        async (type, scale = 1) => {
+        async (type, { includePatternBG, transparent, scale }) => {
             showLoader({
                 animated: false,
             });
@@ -114,34 +123,37 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
                     defs.innerHTML = markerDefs.innerHTML;
                 }
 
-                const pattern = document.createElementNS(
-                    'http://www.w3.org/2000/svg',
-                    'pattern'
-                );
-                pattern.setAttribute('id', 'background-pattern');
-                pattern.setAttribute('width', String(16 * viewport.zoom));
-                pattern.setAttribute('height', String(16 * viewport.zoom));
-                pattern.setAttribute('patternUnits', 'userSpaceOnUse');
-                pattern.setAttribute(
-                    'patternTransform',
-                    `translate(${viewport.x % (16 * viewport.zoom)} ${viewport.y % (16 * viewport.zoom)})`
-                );
+                if (includePatternBG) {
+                    const pattern = document.createElementNS(
+                        'http://www.w3.org/2000/svg',
+                        'pattern'
+                    );
+                    pattern.setAttribute('id', 'background-pattern');
+                    pattern.setAttribute('width', String(16 * viewport.zoom));
+                    pattern.setAttribute('height', String(16 * viewport.zoom));
+                    pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+                    pattern.setAttribute(
+                        'patternTransform',
+                        `translate(${viewport.x % (16 * viewport.zoom)} ${viewport.y % (16 * viewport.zoom)})`
+                    );
 
-                const dot = document.createElementNS(
-                    'http://www.w3.org/2000/svg',
-                    'circle'
-                );
+                    const dot = document.createElementNS(
+                        'http://www.w3.org/2000/svg',
+                        'circle'
+                    );
 
-                const dotSize = viewport.zoom * 0.5;
-                dot.setAttribute('cx', String(viewport.zoom));
-                dot.setAttribute('cy', String(viewport.zoom));
-                dot.setAttribute('r', String(dotSize));
-                const dotColor =
-                    effectiveTheme === 'light' ? '#92939C' : '#777777';
-                dot.setAttribute('fill', dotColor);
+                    const dotSize = viewport.zoom * 0.5;
+                    dot.setAttribute('cx', String(viewport.zoom));
+                    dot.setAttribute('cy', String(viewport.zoom));
+                    dot.setAttribute('r', String(dotSize));
+                    const dotColor =
+                        effectiveTheme === 'light' ? '#92939C' : '#777777';
+                    dot.setAttribute('fill', dotColor);
+
+                    pattern.appendChild(dot);
+                    defs.appendChild(pattern);
+                }
 
-                pattern.appendChild(dot);
-                defs.appendChild(pattern);
                 tempSvg.appendChild(defs);
 
                 const backgroundRect = document.createElementNS(
@@ -196,10 +208,10 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
                     const initialDataUrl = await imageCreateFn(
                         viewportElement,
                         {
-                            backgroundColor:
-                                effectiveTheme === 'light'
-                                    ? '#ffffff'
-                                    : '#141414',
+                            backgroundColor: getBackgroundColor(
+                                effectiveTheme,
+                                transparent
+                            ),
                             width: reactFlowBounds.width,
                             height: reactFlowBounds.height,
                             style: {
@@ -285,6 +297,7 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
             }, 0);
         },
         [
+            getBackgroundColor,
             downloadImage,
             getViewport,
             hideLoader,

src/context/history-context/history-provider.tsx

@@ -33,6 +33,12 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
         removeIndex,
         updateIndex,
         removeRelationships,
+        addAreas,
+        removeAreas,
+        updateArea,
+        addCustomTypes,
+        removeCustomTypes,
+        updateCustomType,
     } = useChartDB();
 
     const redoActionHandlers = useMemo(
@@ -107,6 +113,28 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
                     updateHistory: false,
                 });
             },
+            addAreas: ({ redoData: { areas } }) => {
+                return addAreas(areas, { updateHistory: false });
+            },
+            removeAreas: ({ redoData: { areaIds } }) => {
+                return removeAreas(areaIds, { updateHistory: false });
+            },
+            updateArea: ({ redoData: { areaId, area } }) => {
+                return updateArea(areaId, area, { updateHistory: false });
+            },
+            addCustomTypes: ({ redoData: { customTypes } }) => {
+                return addCustomTypes(customTypes, { updateHistory: false });
+            },
+            removeCustomTypes: ({ redoData: { customTypeIds } }) => {
+                return removeCustomTypes(customTypeIds, {
+                    updateHistory: false,
+                });
+            },
+            updateCustomType: ({ redoData: { customTypeId, customType } }) => {
+                return updateCustomType(customTypeId, customType, {
+                    updateHistory: false,
+                });
+            },
         }),
         [
             addTables,
@@ -126,6 +154,12 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
             addDependencies,
             removeDependencies,
             updateDependency,
+            addAreas,
+            removeAreas,
+            updateArea,
+            addCustomTypes,
+            removeCustomTypes,
+            updateCustomType,
         ]
     );
 
@@ -215,6 +249,28 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
                     updateHistory: false,
                 });
             },
+            addAreas: ({ undoData: { areaIds } }) => {
+                return removeAreas(areaIds, { updateHistory: false });
+            },
+            removeAreas: ({ undoData: { areas } }) => {
+                return addAreas(areas, { updateHistory: false });
+            },
+            updateArea: ({ undoData: { areaId, area } }) => {
+                return updateArea(areaId, area, { updateHistory: false });
+            },
+            addCustomTypes: ({ undoData: { customTypeIds } }) => {
+                return removeCustomTypes(customTypeIds, {
+                    updateHistory: false,
+                });
+            },
+            removeCustomTypes: ({ undoData: { customTypes } }) => {
+                return addCustomTypes(customTypes, { updateHistory: false });
+            },
+            updateCustomType: ({ undoData: { customTypeId, customType } }) => {
+                return updateCustomType(customTypeId, customType, {
+                    updateHistory: false,
+                });
+            },
         }),
         [
             addTables,
@@ -234,6 +290,12 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
             addDependencies,
             removeDependencies,
             updateDependency,
+            addAreas,
+            removeAreas,
+            updateArea,
+            addCustomTypes,
+            removeCustomTypes,
+            updateCustomType,
         ]
     );
 

src/context/history-context/redo-undo-action.ts

@@ -4,6 +4,8 @@ import type { DBField } from '@/lib/domain/db-field';
 import type { DBIndex } from '@/lib/domain/db-index';
 import type { DBRelationship } from '@/lib/domain/db-relationship';
 import type { DBDependency } from '@/lib/domain/db-dependency';
+import type { Area } from '@/lib/domain/area';
+import type { DBCustomType } from '@/lib/domain/db-custom-type';
 
 type Action = keyof ChartDBContext;
 
@@ -123,6 +125,42 @@ type RedoUndoActionRemoveDependencies = RedoUndoActionBase<
     { dependencies: DBDependency[] }
 >;
 
+type RedoUndoActionAddAreas = RedoUndoActionBase<
+    'addAreas',
+    { areas: Area[] },
+    { areaIds: string[] }
+>;
+
+type RedoUndoActionUpdateArea = RedoUndoActionBase<
+    'updateArea',
+    { areaId: string; area: Partial<Area> },
+    { areaId: string; area: Partial<Area> }
+>;
+
+type RedoUndoActionRemoveAreas = RedoUndoActionBase<
+    'removeAreas',
+    { areaIds: string[] },
+    { areas: Area[] }
+>;
+
+type RedoUndoActionAddCustomTypes = RedoUndoActionBase<
+    'addCustomTypes',
+    { customTypes: DBCustomType[] },
+    { customTypeIds: string[] }
+>;
+
+type RedoUndoActionUpdateCustomType = RedoUndoActionBase<
+    'updateCustomType',
+    { customTypeId: string; customType: Partial<DBCustomType> },
+    { customTypeId: string; customType: Partial<DBCustomType> }
+>;
+
+type RedoUndoActionRemoveCustomTypes = RedoUndoActionBase<
+    'removeCustomTypes',
+    { customTypeIds: string[] },
+    { customTypes: DBCustomType[] }
+>;
+
 export type RedoUndoAction =
     | RedoUndoActionAddTables
     | RedoUndoActionRemoveTables
@@ -140,7 +178,13 @@ export type RedoUndoAction =
     | RedoUndoActionRemoveRelationships
     | RedoUndoActionAddDependencies
     | RedoUndoActionUpdateDependency
-    | RedoUndoActionRemoveDependencies;
+    | RedoUndoActionRemoveDependencies
+    | RedoUndoActionAddAreas
+    | RedoUndoActionUpdateArea
+    | RedoUndoActionRemoveAreas
+    | RedoUndoActionAddCustomTypes
+    | RedoUndoActionUpdateCustomType
+    | RedoUndoActionRemoveCustomTypes;
 
 export type RedoActionData<T extends Action> = Extract<
     RedoUndoAction,

src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts

@@ -8,6 +8,7 @@ export enum KeyboardShortcutAction {
     TOGGLE_SIDE_PANEL = 'toggle_side_panel',
     SHOW_ALL = 'show_all',
     TOGGLE_THEME = 'toggle_theme',
+    TOGGLE_FILTER = 'toggle_filter',
 }
 
 export interface KeyboardShortcut {
@@ -71,6 +72,13 @@ export const keyboardShortcuts: Record<
         keyCombinationMac: 'meta+m',
         keyCombinationWin: 'ctrl+m',
     },
+    [KeyboardShortcutAction.TOGGLE_FILTER]: {
+        action: KeyboardShortcutAction.TOGGLE_FILTER,
+        keyCombinationLabelMac: '⌘F',
+        keyCombinationLabelWin: 'Ctrl+F',
+        keyCombinationMac: 'meta+f',
+        keyCombinationWin: 'ctrl+f',
+    },
 };
 
 export interface KeyboardShortcutForOS {

src/context/layout-context/layout-context.tsx

@@ -1,7 +1,12 @@
 import { emptyFn } from '@/lib/utils';
 import { createContext } from 'react';
 
-export type SidebarSection = 'tables' | 'relationships' | 'dependencies';
+export type SidebarSection =
+    | 'tables'
+    | 'relationships'
+    | 'dependencies'
+    | 'areas'
+    | 'customTypes';
 
 export interface LayoutContext {
     openedTableInSidebar: string | undefined;
@@ -16,6 +21,14 @@ export interface LayoutContext {
     openDependencyFromSidebar: (dependencyId: string) => void;
     closeAllDependenciesInSidebar: () => void;
 
+    openedAreaInSidebar: string | undefined;
+    openAreaFromSidebar: (areaId: string) => void;
+    closeAllAreasInSidebar: () => void;
+
+    openedCustomTypeInSidebar: string | undefined;
+    openCustomTypeFromSidebar: (customTypeId: string) => void;
+    closeAllCustomTypesInSidebar: () => void;
+
     selectedSidebarSection: SidebarSection;
     selectSidebarSection: (section: SidebarSection) => void;
 
@@ -41,6 +54,14 @@ export const layoutContext = createContext<LayoutContext>({
     openDependencyFromSidebar: emptyFn,
     closeAllDependenciesInSidebar: emptyFn,
 
+    openedAreaInSidebar: undefined,
+    openAreaFromSidebar: emptyFn,
+    closeAllAreasInSidebar: emptyFn,
+
+    openedCustomTypeInSidebar: undefined,
+    openCustomTypeFromSidebar: emptyFn,
+    closeAllCustomTypesInSidebar: emptyFn,
+
     selectSidebarSection: emptyFn,
     openTableFromSidebar: emptyFn,
     closeAllTablesInSidebar: emptyFn,

src/context/layout-context/layout-provider.tsx

@@ -14,6 +14,11 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
         React.useState<string | undefined>();
     const [openedDependencyInSidebar, setOpenedDependencyInSidebar] =
         React.useState<string | undefined>();
+    const [openedAreaInSidebar, setOpenedAreaInSidebar] = React.useState<
+        string | undefined
+    >();
+    const [openedCustomTypeInSidebar, setOpenedCustomTypeInSidebar] =
+        React.useState<string | undefined>();
     const [selectedSidebarSection, setSelectedSidebarSection] =
         React.useState<SidebarSection>('tables');
     const [isSidePanelShowed, setIsSidePanelShowed] =
@@ -30,6 +35,12 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     const closeAllDependenciesInSidebar: LayoutContext['closeAllDependenciesInSidebar'] =
         () => setOpenedDependencyInSidebar('');
 
+    const closeAllAreasInSidebar: LayoutContext['closeAllAreasInSidebar'] =
+        () => setOpenedAreaInSidebar('');
+
+    const closeAllCustomTypesInSidebar: LayoutContext['closeAllCustomTypesInSidebar'] =
+        () => setOpenedCustomTypeInSidebar('');
+
     const hideSidePanel: LayoutContext['hideSidePanel'] = () =>
         setIsSidePanelShowed(false);
 
@@ -62,6 +73,21 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
             setOpenedDependencyInSidebar(dependencyId);
         };
 
+    const openAreaFromSidebar: LayoutContext['openAreaFromSidebar'] = (
+        areaId
+    ) => {
+        showSidePanel();
+        setSelectedSidebarSection('areas');
+        setOpenedAreaInSidebar(areaId);
+    };
+
+    const openCustomTypeFromSidebar: LayoutContext['openCustomTypeFromSidebar'] =
+        (customTypeId) => {
+            showSidePanel();
+            setSelectedSidebarSection('customTypes');
+            setOpenedTableInSidebar(customTypeId);
+        };
+
     const openSelectSchema: LayoutContext['openSelectSchema'] = () =>
         setIsSelectSchemaOpen(true);
 
@@ -88,6 +114,12 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 openedDependencyInSidebar,
                 openDependencyFromSidebar,
                 closeAllDependenciesInSidebar,
+                openedAreaInSidebar,
+                openAreaFromSidebar,
+                closeAllAreasInSidebar,
+                openedCustomTypeInSidebar,
+                openCustomTypeFromSidebar,
+                closeAllCustomTypesInSidebar,
             }}
         >
             {children}

src/context/storage-context/storage-context.tsx

@@ -5,6 +5,8 @@ import type { DBRelationship } from '@/lib/domain/db-relationship';
 import type { DBTable } from '@/lib/domain/db-table';
 import type { ChartDBConfig } from '@/lib/domain/config';
 import type { DBDependency } from '@/lib/domain/db-dependency';
+import type { Area } from '@/lib/domain/area';
+import type { DBCustomType } from '@/lib/domain/db-custom-type';
 
 export interface StorageContext {
     // Config operations
@@ -17,6 +19,8 @@ export interface StorageContext {
         includeTables?: boolean;
         includeRelationships?: boolean;
         includeDependencies?: boolean;
+        includeAreas?: boolean;
+        includeCustomTypes?: boolean;
     }) => Promise<Diagram[]>;
     getDiagram: (
         id: string,
@@ -24,6 +28,8 @@ export interface StorageContext {
             includeTables?: boolean;
             includeRelationships?: boolean;
             includeDependencies?: boolean;
+            includeAreas?: boolean;
+            includeCustomTypes?: boolean;
         }
     ) => Promise<Diagram | undefined>;
     updateDiagram: (params: {
@@ -86,6 +92,40 @@ export interface StorageContext {
     }) => Promise<void>;
     listDependencies: (diagramId: string) => Promise<DBDependency[]>;
     deleteDiagramDependencies: (diagramId: string) => Promise<void>;
+
+    // Area operations
+    addArea: (params: { diagramId: string; area: Area }) => Promise<void>;
+    getArea: (params: {
+        diagramId: string;
+        id: string;
+    }) => Promise<Area | undefined>;
+    updateArea: (params: {
+        id: string;
+        attributes: Partial<Area>;
+    }) => Promise<void>;
+    deleteArea: (params: { diagramId: string; id: string }) => Promise<void>;
+    listAreas: (diagramId: string) => Promise<Area[]>;
+    deleteDiagramAreas: (diagramId: string) => Promise<void>;
+
+    // Custom type operations
+    addCustomType: (params: {
+        diagramId: string;
+        customType: DBCustomType;
+    }) => Promise<void>;
+    getCustomType: (params: {
+        diagramId: string;
+        id: string;
+    }) => Promise<DBCustomType | undefined>;
+    updateCustomType: (params: {
+        id: string;
+        attributes: Partial<DBCustomType>;
+    }) => Promise<void>;
+    deleteCustomType: (params: {
+        diagramId: string;
+        id: string;
+    }) => Promise<void>;
+    listCustomTypes: (diagramId: string) => Promise<DBCustomType[]>;
+    deleteDiagramCustomTypes: (diagramId: string) => Promise<void>;
 }
 
 export const storageInitialValue: StorageContext = {
@@ -119,6 +159,21 @@ export const storageInitialValue: StorageContext = {
     deleteDependency: emptyFn,
     listDependencies: emptyFn,
     deleteDiagramDependencies: emptyFn,
+
+    addArea: emptyFn,
+    getArea: emptyFn,
+    updateArea: emptyFn,
+    deleteArea: emptyFn,
+    listAreas: emptyFn,
+    deleteDiagramAreas: emptyFn,
+
+    // Custom type operations
+    addCustomType: emptyFn,
+    getCustomType: emptyFn,
+    updateCustomType: emptyFn,
+    deleteCustomType: emptyFn,
+    listCustomTypes: emptyFn,
+    deleteDiagramCustomTypes: emptyFn,
 };
 
 export const storageContext =

src/context/theme-context/theme-context.tsx

@@ -1,8 +1,7 @@
 import { createContext } from 'react';
 import { emptyFn } from '@/lib/utils';
-
-export type Theme = 'light' | 'dark' | 'system';
-export type EffectiveTheme = Exclude<Theme, 'system'>;
+import type { Theme, EffectiveTheme } from '@/lib/types';
+export type { Theme, EffectiveTheme };
 
 export interface ThemeContext {
     theme: Theme;

src/context/theme-context/theme-provider.tsx

@@ -48,6 +48,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
         handleThemeToggle,
         {
             preventDefault: true,
+            enableOnFormTags: true,
         },
         [handleThemeToggle]
     );

src/dialogs/common/import-database/import-database.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+    Suspense,
+    useCallback,
+    useEffect,
+    useState,
+    useRef,
+} from 'react';
 import { Button } from '@/components/button/button';
 import {
     DialogClose,
@@ -8,32 +14,10 @@ import {
     DialogInternalContent,
     DialogTitle,
 } from '@/components/dialog/dialog';
-import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
-import { DatabaseType } from '@/lib/domain/database-type';
-import { databaseSecondaryLogoMap } from '@/lib/databases';
-import { CodeSnippet } from '@/components/code-snippet/code-snippet';
-import { Textarea } from '@/components/textarea/textarea';
+import type { DatabaseType } from '@/lib/domain/database-type';
+import { Editor } from '@/components/code-snippet/code-snippet';
 import type { DatabaseEdition } from '@/lib/domain/database-edition';
-import {
-    databaseEditionToImageMap,
-    databaseEditionToLabelMap,
-    databaseTypeToEditionMap,
-} from '@/lib/domain/database-edition';
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from '@/components/avatar/avatar';
-import { SSMSInfo } from './ssms-info/ssms-info';
 import { useTranslation } from 'react-i18next';
-import { Tabs, TabsList, TabsTrigger } from '@/components/tabs/tabs';
-import type { DatabaseClient } from '@/lib/domain/database-clients';
-import {
-    databaseClientToLabelMap,
-    databaseTypeToClientsMap,
-    databaseEditionToClientsMap,
-} from '@/lib/domain/database-clients';
-import type { ImportMetadataScripts } from '@/lib/data/import-metadata/scripts/scripts';
 import { ZoomableImage } from '@/components/zoomable-image/zoomable-image';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
 import { Spinner } from '@/components/spinner/spinner';
@@ -41,9 +25,78 @@ import {
     fixMetadataJson,
     isStringMetadataJson,
 } from '@/lib/data/import-metadata/utils';
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from '@/components/resizable/resizable';
+import { useTheme } from '@/hooks/use-theme';
+import type { OnChange } from '@monaco-editor/react';
+import { useDebounce } from '@/hooks/use-debounce-v2';
+import { InstructionsSection } from './instructions-section/instructions-section';
+import { parseSQLError } from '@/lib/data/sql-import';
+import type { editor, IDisposable } from 'monaco-editor';
+import { waitFor } from '@/lib/utils';
+import {
+    validateSQL,
+    type ValidationResult,
+} from '@/lib/data/sql-import/sql-validator';
+import { SQLValidationStatus } from './sql-validation-status';
+
+const calculateContentSizeMB = (content: string): number => {
+    return content.length / (1024 * 1024); // Convert to MB
+};
+
+const calculateIsLargeFile = (content: string): boolean => {
+    const contentSizeMB = calculateContentSizeMB(content);
+    return contentSizeMB > 2; // Consider large if over 2MB
+};
 
 const errorScriptOutputMessage =
-    'Invalid JSON. Please correct it or contact us at chartdb.io@gmail.com for help.';
+    'Invalid JSON. Please correct it or contact us at support@chartdb.io for help.';
+
+// Helper to detect if content is likely SQL DDL or JSON
+const detectContentType = (content: string): 'query' | 'ddl' | null => {
+    if (!content || content.trim().length === 0) return null;
+
+    // Common SQL DDL keywords
+    const ddlKeywords = [
+        'CREATE TABLE',
+        'ALTER TABLE',
+        'DROP TABLE',
+        'CREATE INDEX',
+        'CREATE VIEW',
+        'CREATE PROCEDURE',
+        'CREATE FUNCTION',
+        'CREATE SCHEMA',
+        'CREATE DATABASE',
+    ];
+
+    const upperContent = content.toUpperCase();
+
+    // Check for SQL DDL patterns
+    const hasDDLKeywords = ddlKeywords.some((keyword) =>
+        upperContent.includes(keyword)
+    );
+    if (hasDDLKeywords) return 'ddl';
+
+    // Check if it looks like JSON
+    try {
+        // Just check structure, don't need full parse for detection
+        if (
+            (content.trim().startsWith('{') && content.trim().endsWith('}')) ||
+            (content.trim().startsWith('[') && content.trim().endsWith(']'))
+        ) {
+            return 'query';
+        }
+    } catch (error) {
+        // Not valid JSON, might be partial
+        console.error('Error detecting content type:', error);
+    }
+
+    // If we can't confidently detect, return null
+    return null;
+};
 
 export interface ImportDatabaseProps {
     goBack?: () => void;
@@ -58,6 +111,8 @@ export interface ImportDatabaseProps {
     >;
     keepDialogAfterImport?: boolean;
     title: string;
+    importMethod: 'query' | 'ddl';
+    setImportMethod: (method: 'query' | 'ddl') => void;
 }
 
 export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
@@ -71,42 +126,80 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
     setDatabaseEdition,
     keepDialogAfterImport,
     title,
+    importMethod,
+    setImportMethod,
 }) => {
-    const databaseClients = useMemo(
-        () => [
-            ...databaseTypeToClientsMap[databaseType],
-            ...(databaseEdition
-                ? databaseEditionToClientsMap[databaseEdition]
-                : []),
-        ],
-        [databaseType, databaseEdition]
-    );
+    const { effectiveTheme } = useTheme();
     const [errorMessage, setErrorMessage] = useState('');
-    const [databaseClient, setDatabaseClient] = useState<
-        DatabaseClient | undefined
-    >();
-    const { t } = useTranslation();
-    const [importMetadataScripts, setImportMetadataScripts] =
-        useState<ImportMetadataScripts | null>(null);
+    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+    const pasteDisposableRef = useRef<IDisposable | null>(null);
 
+    const { t } = useTranslation();
     const { isSm: isDesktop } = useBreakpoint('sm');
 
     const [showCheckJsonButton, setShowCheckJsonButton] = useState(false);
     const [isCheckingJson, setIsCheckingJson] = useState(false);
-
     const [showSSMSInfoDialog, setShowSSMSInfoDialog] = useState(false);
+    const [sqlValidation, setSqlValidation] = useState<ValidationResult | null>(
+        null
+    );
+    const [isAutoFixing, setIsAutoFixing] = useState(false);
+    const [showAutoFixButton, setShowAutoFixButton] = useState(false);
 
     useEffect(() => {
-        const loadScripts = async () => {
-            const { importMetadataScripts } = await import(
-                '@/lib/data/import-metadata/scripts/scripts'
-            );
-            setImportMetadataScripts(importMetadataScripts);
-        };
-        loadScripts();
-    }, []);
+        setScriptResult('');
+        setErrorMessage('');
+        setShowCheckJsonButton(false);
+    }, [importMethod, setScriptResult]);
 
+    // Check if the ddl is valid
     useEffect(() => {
+        if (importMethod !== 'ddl') {
+            setSqlValidation(null);
+            setShowAutoFixButton(false);
+            return;
+        }
+
+        if (!scriptResult.trim()) {
+            setSqlValidation(null);
+            setShowAutoFixButton(false);
+            return;
+        }
+
+        // First run our validation based on database type
+        const validation = validateSQL(scriptResult, databaseType);
+        setSqlValidation(validation);
+
+        // If we have auto-fixable errors, show the auto-fix button
+        if (validation.fixedSQL && validation.errors.length > 0) {
+            setShowAutoFixButton(true);
+            // Don't try to parse invalid SQL
+            setErrorMessage('SQL contains syntax errors');
+            return;
+        }
+
+        // Hide auto-fix button if no fixes available
+        setShowAutoFixButton(false);
+
+        // Validate the SQL (either original or already fixed)
+        parseSQLError({
+            sqlContent: scriptResult,
+            sourceDatabaseType: databaseType,
+        }).then((result) => {
+            if (result.success) {
+                setErrorMessage('');
+            } else if (!result.success && result.error) {
+                setErrorMessage(result.error);
+            }
+        });
+    }, [importMethod, scriptResult, databaseType]);
+
+    // Check if the script result is a valid JSON
+    useEffect(() => {
+        if (importMethod !== 'query') {
+            return;
+        }
+
         if (scriptResult.trim().length === 0) {
             setErrorMessage('');
             setShowCheckJsonButton(false);
@@ -126,7 +219,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
             setErrorMessage(errorScriptOutputMessage);
             setShowCheckJsonButton(false);
         }
-    }, [scriptResult]);
+    }, [scriptResult, importMethod]);
 
     const handleImport = useCallback(() => {
         if (errorMessage.length === 0 && scriptResult.trim().length !== 0) {
@@ -134,35 +227,150 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
         }
     }, [errorMessage.length, onImport, scriptResult]);
 
-    const handleInputChange = useCallback(
-        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            const inputValue = e.target.value;
-            setScriptResult(inputValue);
+    const handleAutoFix = useCallback(() => {
+        if (sqlValidation?.fixedSQL) {
+            setIsAutoFixing(true);
+            setShowAutoFixButton(false);
+            setErrorMessage('');
+
+            // Apply the fix with a delay so user sees the fixing message
+            setTimeout(() => {
+                setScriptResult(sqlValidation.fixedSQL!);
+
+                setTimeout(() => {
+                    setIsAutoFixing(false);
+                }, 100);
+            }, 1000);
+        }
+    }, [sqlValidation, setScriptResult]);
+
+    const handleErrorClick = useCallback((line: number) => {
+        if (editorRef.current) {
+            // Set cursor to the error line
+            editorRef.current.setPosition({ lineNumber: line, column: 1 });
+            editorRef.current.revealLineInCenter(line);
+            editorRef.current.focus();
+        }
+    }, []);
+
+    const formatEditor = useCallback(() => {
+        if (editorRef.current) {
+            const model = editorRef.current.getModel();
+            if (model) {
+                const content = model.getValue();
+
+                // Skip formatting for large files (> 2MB)
+                if (calculateIsLargeFile(content)) {
+                    return;
+                }
+            }
+
+            setTimeout(() => {
+                editorRef.current
+                    ?.getAction('editor.action.formatDocument')
+                    ?.run();
+            }, 50);
+        }
+    }, []);
+
+    const handleInputChange: OnChange = useCallback(
+        (inputValue) => {
+            setScriptResult(inputValue ?? '');
 
             // Automatically open SSMS info when input length is exactly 65535
-            if (inputValue.length === 65535) {
+            if ((inputValue ?? '').length === 65535) {
                 setShowSSMSInfoDialog(true);
             }
         },
         [setScriptResult]
     );
 
+    const debouncedHandleInputChange = useDebounce(handleInputChange, 500);
+
     const handleCheckJson = useCallback(async () => {
         setIsCheckingJson(true);
 
-        const fixedJson = await fixMetadataJson(scriptResult);
+        await waitFor(1000);
+        const fixedJson = fixMetadataJson(scriptResult);
 
         if (isStringMetadataJson(fixedJson)) {
             setScriptResult(fixedJson);
             setErrorMessage('');
+            formatEditor();
         } else {
             setScriptResult(fixedJson);
             setErrorMessage(errorScriptOutputMessage);
+            formatEditor();
         }
 
         setShowCheckJsonButton(false);
         setIsCheckingJson(false);
-    }, [scriptResult, setScriptResult]);
+    }, [scriptResult, setScriptResult, formatEditor]);
+
+    useEffect(() => {
+        // Cleanup paste handler on unmount
+        return () => {
+            if (pasteDisposableRef.current) {
+                pasteDisposableRef.current.dispose();
+                pasteDisposableRef.current = null;
+            }
+        };
+    }, []);
+
+    const handleEditorDidMount = useCallback(
+        (editor: editor.IStandaloneCodeEditor) => {
+            editorRef.current = editor;
+
+            // Cleanup previous disposable if it exists
+            if (pasteDisposableRef.current) {
+                pasteDisposableRef.current.dispose();
+                pasteDisposableRef.current = null;
+            }
+
+            // Add paste handler for all modes
+            const disposable = editor.onDidPaste(() => {
+                const model = editor.getModel();
+                if (!model) return;
+
+                const content = model.getValue();
+
+                // Skip formatting for large files (> 2MB) to prevent browser freezing
+                const isLargeFile = calculateIsLargeFile(content);
+
+                // First, detect content type to determine if we should switch modes
+                const detectedType = detectContentType(content);
+                if (detectedType && detectedType !== importMethod) {
+                    // Switch to the detected mode immediately
+                    setImportMethod(detectedType);
+
+                    // Only format if it's JSON (query mode) AND file is not too large
+                    if (detectedType === 'query' && !isLargeFile) {
+                        // For JSON mode, format after a short delay
+                        setTimeout(() => {
+                            editor
+                                .getAction('editor.action.formatDocument')
+                                ?.run();
+                        }, 100);
+                    }
+                    // For DDL mode, do NOT format as it can break the SQL
+                } else {
+                    // Content type didn't change, apply formatting based on current mode
+                    if (importMethod === 'query' && !isLargeFile) {
+                        // Only format JSON content if not too large
+                        setTimeout(() => {
+                            editor
+                                .getAction('editor.action.formatDocument')
+                                ?.run();
+                        }, 100);
+                    }
+                    // For DDL mode or large files, do NOT format
+                }
+            });
+
+            pasteDisposableRef.current = disposable;
+        },
+        [importMethod, setImportMethod]
+    );
 
     const renderHeader = useCallback(() => {
         return (
@@ -173,228 +381,137 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
         );
     }, [title]);
 
+    const renderInstructions = useCallback(
+        () => (
+            <InstructionsSection
+                databaseType={databaseType}
+                importMethod={importMethod}
+                setDatabaseEdition={setDatabaseEdition}
+                setImportMethod={setImportMethod}
+                databaseEdition={databaseEdition}
+                setShowSSMSInfoDialog={setShowSSMSInfoDialog}
+                showSSMSInfoDialog={showSSMSInfoDialog}
+            />
+        ),
+        [
+            databaseType,
+            importMethod,
+            setDatabaseEdition,
+            setImportMethod,
+            databaseEdition,
+            setShowSSMSInfoDialog,
+            showSSMSInfoDialog,
+        ]
+    );
+
+    const renderOutputTextArea = useCallback(
+        () => (
+            <div className="flex size-full flex-col gap-1 overflow-hidden rounded-md border p-1">
+                <div className="w-full text-center text-xs text-muted-foreground">
+                    {importMethod === 'query'
+                        ? 'Smart Query Output'
+                        : 'SQL Script'}
+                </div>
+                <div className="flex-1 overflow-hidden">
+                    <Suspense fallback={<Spinner />}>
+                        <Editor
+                            value={scriptResult}
+                            onChange={debouncedHandleInputChange}
+                            language={importMethod === 'query' ? 'json' : 'sql'}
+                            loading={<Spinner />}
+                            onMount={handleEditorDidMount}
+                            theme={
+                                effectiveTheme === 'dark'
+                                    ? 'dbml-dark'
+                                    : 'dbml-light'
+                            }
+                            options={{
+                                formatOnPaste: false, // Never format on paste - we handle it manually
+                                minimap: { enabled: false },
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                glyphMargin: false,
+                                lineNumbers: 'on',
+                                guides: {
+                                    indentation: false,
+                                },
+                                folding: true,
+                                lineNumbersMinChars: 3,
+                                renderValidationDecorations: 'off',
+                                lineDecorationsWidth: 0,
+                                overviewRulerBorder: false,
+                                overviewRulerLanes: 0,
+                                hideCursorInOverviewRuler: true,
+                                contextmenu: false,
+
+                                scrollbar: {
+                                    vertical: 'hidden',
+                                    horizontal: 'hidden',
+                                    alwaysConsumeMouseWheel: false,
+                                },
+                            }}
+                            className="size-full min-h-40"
+                        />
+                    </Suspense>
+                </div>
+
+                {errorMessage || (importMethod === 'ddl' && sqlValidation) ? (
+                    <SQLValidationStatus
+                        validation={sqlValidation}
+                        errorMessage={errorMessage}
+                        isAutoFixing={isAutoFixing}
+                        onErrorClick={handleErrorClick}
+                    />
+                ) : null}
+            </div>
+        ),
+        [
+            errorMessage,
+            scriptResult,
+            importMethod,
+            effectiveTheme,
+            debouncedHandleInputChange,
+            handleEditorDidMount,
+            sqlValidation,
+            isAutoFixing,
+            handleErrorClick,
+        ]
+    );
+
     const renderContent = useCallback(() => {
         return (
             <DialogInternalContent>
-                <div className="flex w-full flex-1 flex-col gap-6">
-                    {databaseTypeToEditionMap[databaseType].length > 0 ? (
-                        <div className="flex flex-col gap-1 md:flex-row">
-                            <p className="text-sm leading-6 text-muted-foreground">
-                                {t(
-                                    'new_diagram_dialog.import_database.database_edition'
-                                )}
-                            </p>
-                            <ToggleGroup
-                                type="single"
-                                className="ml-1 flex-wrap gap-2"
-                                value={
-                                    !databaseEdition
-                                        ? 'regular'
-                                        : databaseEdition
-                                }
-                                onValueChange={(value) => {
-                                    setDatabaseEdition(
-                                        value === 'regular'
-                                            ? undefined
-                                            : (value as DatabaseEdition)
-                                    );
-                                }}
-                            >
-                                <ToggleGroupItem
-                                    value="regular"
-                                    variant="outline"
-                                    className="h-6 gap-1 p-0 px-2 shadow-none"
-                                >
-                                    <Avatar className="size-4 rounded-none">
-                                        <AvatarImage
-                                            src={
-                                                databaseSecondaryLogoMap[
-                                                    databaseType
-                                                ]
-                                            }
-                                            alt="Regular"
-                                        />
-                                        <AvatarFallback>Regular</AvatarFallback>
-                                    </Avatar>
-                                    Regular
-                                </ToggleGroupItem>
-                                {databaseTypeToEditionMap[databaseType].map(
-                                    (edition) => (
-                                        <ToggleGroupItem
-                                            value={edition}
-                                            key={edition}
-                                            variant="outline"
-                                            className="h-6 gap-1 p-0 px-2 shadow-none"
-                                        >
-                                            <Avatar className="size-4">
-                                                <AvatarImage
-                                                    src={
-                                                        databaseEditionToImageMap[
-                                                            edition
-                                                        ]
-                                                    }
-                                                    alt={
-                                                        databaseEditionToLabelMap[
-                                                            edition
-                                                        ]
-                                                    }
-                                                />
-                                                <AvatarFallback>
-                                                    {
-                                                        databaseEditionToLabelMap[
-                                                            edition
-                                                        ]
-                                                    }
-                                                </AvatarFallback>
-                                            </Avatar>
-                                            {databaseEditionToLabelMap[edition]}
-                                        </ToggleGroupItem>
-                                    )
-                                )}
-                            </ToggleGroup>
-                        </div>
-                    ) : null}
-                    <div className="flex flex-col gap-1">
-                        <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:justify-between">
-                            <div>
-                                1.{' '}
-                                {t('new_diagram_dialog.import_database.step_1')}
-                            </div>
-                            {databaseType === DatabaseType.SQL_SERVER && (
-                                <SSMSInfo
-                                    open={showSSMSInfoDialog}
-                                    setOpen={setShowSSMSInfoDialog}
-                                />
-                            )}
-                        </div>
-                        {databaseClients.length > 0 ? (
-                            <Tabs
-                                value={
-                                    !databaseClient
-                                        ? 'dbclient'
-                                        : databaseClient
-                                }
-                                onValueChange={(value) => {
-                                    setDatabaseClient(
-                                        value === 'dbclient'
-                                            ? undefined
-                                            : (value as DatabaseClient)
-                                    );
-                                }}
-                            >
-                                <div className="flex flex-1">
-                                    <TabsList className="h-8 justify-start rounded-none rounded-t-sm ">
-                                        <TabsTrigger
-                                            value="dbclient"
-                                            className="h-6 w-20"
-                                        >
-                                            DB Client
-                                        </TabsTrigger>
-
-                                        {databaseClients?.map((client) => (
-                                            <TabsTrigger
-                                                key={client}
-                                                value={client}
-                                                className="h-6 !w-20"
-                                            >
-                                                {
-                                                    databaseClientToLabelMap[
-                                                        client
-                                                    ]
-                                                }
-                                            </TabsTrigger>
-                                        )) ?? []}
-                                    </TabsList>
-                                </div>
-                                <CodeSnippet
-                                    className="h-40 w-full"
-                                    loading={!importMetadataScripts}
-                                    code={
-                                        importMetadataScripts?.[databaseType]?.(
-                                            {
-                                                databaseEdition,
-                                                databaseClient,
-                                            }
-                                        ) ?? ''
-                                    }
-                                    language={databaseClient ? 'shell' : 'sql'}
-                                />
-                            </Tabs>
-                        ) : (
-                            <CodeSnippet
-                                className="h-40 w-full flex-auto"
-                                loading={!importMetadataScripts}
-                                code={
-                                    importMetadataScripts?.[databaseType]?.({
-                                        databaseEdition,
-                                    }) ?? ''
-                                }
-                                language="sql"
-                            />
-                        )}
+                {isDesktop ? (
+                    <ResizablePanelGroup
+                        direction={isDesktop ? 'horizontal' : 'vertical'}
+                        className="min-h-[500px]"
+                    >
+                        <ResizablePanel
+                            defaultSize={25}
+                            minSize={25}
+                            maxSize={99}
+                            className="min-h-fit rounded-md bg-gradient-to-b from-slate-50 to-slate-100 p-2 dark:from-slate-900 dark:to-slate-800 md:min-h-fit md:min-w-[350px] md:rounded-l-md md:p-2"
+                        >
+                            {renderInstructions()}
+                        </ResizablePanel>
+                        <ResizableHandle withHandle />
+                        <ResizablePanel className="min-h-40 py-2 md:px-2 md:py-0">
+                            {renderOutputTextArea()}
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                ) : (
+                    <div className="flex flex-col gap-2">
+                        {renderInstructions()}
+                        {renderOutputTextArea()}
                     </div>
-                    <div className="flex h-48 flex-col gap-1">
-                        <p className="text-sm text-muted-foreground">
-                            2. {t('new_diagram_dialog.import_database.step_2')}
-                        </p>
-                        <Textarea
-                            className="w-full flex-1 rounded-md bg-muted p-2 text-sm"
-                            placeholder={t(
-                                'new_diagram_dialog.import_database.script_results_placeholder'
-                            )}
-                            value={scriptResult}
-                            onChange={handleInputChange}
-                        />
-                        {showCheckJsonButton || errorMessage ? (
-                            <div className="mt-2 flex items-center gap-2">
-                                {showCheckJsonButton ? (
-                                    <Button
-                                        type="button"
-                                        variant="outline"
-                                        size="sm"
-                                        onClick={handleCheckJson}
-                                        disabled={isCheckingJson}
-                                    >
-                                        {isCheckingJson ? (
-                                            <Spinner size="small" />
-                                        ) : (
-                                            t(
-                                                'new_diagram_dialog.import_database.check_script_result'
-                                            )
-                                        )}
-                                    </Button>
-                                ) : (
-                                    <p className="text-sm text-red-700">
-                                        {errorMessage}
-                                    </p>
-                                )}
-                            </div>
-                        ) : null}
-                    </div>
-                </div>
+                )}
             </DialogInternalContent>
         );
-    }, [
-        databaseEdition,
-        databaseType,
-        errorMessage,
-        handleInputChange,
-        scriptResult,
-        setDatabaseEdition,
-        databaseClients,
-        databaseClient,
-        importMetadataScripts,
-        t,
-        showCheckJsonButton,
-        isCheckingJson,
-        handleCheckJson,
-        showSSMSInfoDialog,
-        setShowSSMSInfoDialog,
-    ]);
+    }, [renderOutputTextArea, renderInstructions, isDesktop]);
 
     const renderFooter = useCallback(() => {
         return (
-            <DialogFooter className="mt-4 flex !justify-between gap-2">
+            <DialogFooter className="flex !justify-between gap-2">
                 <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
                     {goBack && (
                         <Button
@@ -428,13 +545,43 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                         </DialogClose>
                     )}
 
-                    {keepDialogAfterImport ? (
+                    {showCheckJsonButton ? (
+                        <Button
+                            type="button"
+                            variant="default"
+                            onClick={handleCheckJson}
+                            disabled={isCheckingJson}
+                        >
+                            {isCheckingJson ? (
+                                <Spinner size="small" />
+                            ) : (
+                                t(
+                                    'new_diagram_dialog.import_database.check_script_result'
+                                )
+                            )}
+                        </Button>
+                    ) : showAutoFixButton && importMethod === 'ddl' ? (
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            onClick={handleAutoFix}
+                            disabled={isAutoFixing}
+                            className="bg-sky-600 text-white hover:bg-sky-700"
+                        >
+                            {isAutoFixing ? (
+                                <Spinner size="small" />
+                            ) : (
+                                'Try auto-fix'
+                            )}
+                        </Button>
+                    ) : keepDialogAfterImport ? (
                         <Button
                             type="button"
                             variant="default"
                             disabled={
                                 scriptResult.trim().length === 0 ||
-                                errorMessage.length > 0
+                                errorMessage.length > 0 ||
+                                isAutoFixing
                             }
                             onClick={handleImport}
                         >
@@ -446,9 +593,9 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                                 type="button"
                                 variant="default"
                                 disabled={
-                                    showCheckJsonButton ||
                                     scriptResult.trim().length === 0 ||
-                                    errorMessage.length > 0
+                                    errorMessage.length > 0 ||
+                                    isAutoFixing
                                 }
                                 onClick={handleImport}
                             >
@@ -477,8 +624,14 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
         errorMessage.length,
         scriptResult,
         showCheckJsonButton,
+        isCheckingJson,
+        handleCheckJson,
         goBack,
         t,
+        importMethod,
+        isAutoFixing,
+        showAutoFixButton,
+        handleAutoFix,
     ]);
 
     return (

src/dialogs/common/import-database/instructions-section/instructions-section.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import logo from '@/assets/logo-2.png';
+import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
+import { DatabaseType } from '@/lib/domain/database-type';
+import { databaseSecondaryLogoMap } from '@/lib/databases';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import {
+    databaseEditionToImageMap,
+    databaseEditionToLabelMap,
+    databaseTypeToEditionMap,
+} from '@/lib/domain/database-edition';
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from '@/components/avatar/avatar';
+import { useTranslation } from 'react-i18next';
+import { Code } from 'lucide-react';
+import { SmartQueryInstructions } from './instructions/smart-query-instructions';
+import { DDLInstructions } from './instructions/ddl-instructions';
+
+const DatabasesWithoutDDLInstructions: DatabaseType[] = [
+    DatabaseType.CLICKHOUSE,
+    DatabaseType.ORACLE,
+];
+
+export interface InstructionsSectionProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+    setDatabaseEdition: React.Dispatch<
+        React.SetStateAction<DatabaseEdition | undefined>
+    >;
+    importMethod: 'query' | 'ddl';
+    setImportMethod: (method: 'query' | 'ddl') => void;
+    showSSMSInfoDialog: boolean;
+    setShowSSMSInfoDialog: (show: boolean) => void;
+}
+
+export const InstructionsSection: React.FC<InstructionsSectionProps> = ({
+    databaseType,
+    databaseEdition,
+    setDatabaseEdition,
+    importMethod,
+    setImportMethod,
+    setShowSSMSInfoDialog,
+    showSSMSInfoDialog,
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className="flex w-full flex-1 flex-col gap-4">
+            {databaseTypeToEditionMap[databaseType].length > 0 ? (
+                <div className="flex flex-col gap-1">
+                    <p className="text-sm leading-6 text-primary">
+                        {t(
+                            'new_diagram_dialog.import_database.database_edition'
+                        )}
+                    </p>
+                    <ToggleGroup
+                        type="single"
+                        className="ml-1 flex-wrap justify-start gap-2"
+                        value={!databaseEdition ? 'regular' : databaseEdition}
+                        onValueChange={(value) => {
+                            setDatabaseEdition(
+                                value === 'regular'
+                                    ? undefined
+                                    : (value as DatabaseEdition)
+                            );
+                        }}
+                    >
+                        <ToggleGroupItem
+                            value="regular"
+                            variant="outline"
+                            className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                        >
+                            <Avatar className="size-4 rounded-none">
+                                <AvatarImage
+                                    src={databaseSecondaryLogoMap[databaseType]}
+                                    alt="Regular"
+                                />
+                                <AvatarFallback>Regular</AvatarFallback>
+                            </Avatar>
+                            Regular
+                        </ToggleGroupItem>
+                        {databaseTypeToEditionMap[databaseType].map(
+                            (edition) => (
+                                <ToggleGroupItem
+                                    value={edition}
+                                    key={edition}
+                                    variant="outline"
+                                    className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                                >
+                                    <Avatar className="size-4">
+                                        <AvatarImage
+                                            src={
+                                                databaseEditionToImageMap[
+                                                    edition
+                                                ]
+                                            }
+                                            alt={
+                                                databaseEditionToLabelMap[
+                                                    edition
+                                                ]
+                                            }
+                                        />
+                                        <AvatarFallback>
+                                            {databaseEditionToLabelMap[edition]}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    {databaseEditionToLabelMap[edition]}
+                                </ToggleGroupItem>
+                            )
+                        )}
+                    </ToggleGroup>
+                </div>
+            ) : null}
+
+            {DatabasesWithoutDDLInstructions.includes(databaseType) ? null : (
+                <div className="flex flex-col gap-1">
+                    <p className="text-sm leading-6 text-primary">
+                        How would you like to import?
+                    </p>
+                    <ToggleGroup
+                        type="single"
+                        className="ml-1 flex-wrap justify-start gap-2"
+                        value={importMethod}
+                        onValueChange={(value) => {
+                            let selectedImportMethod: 'query' | 'ddl' = 'query';
+                            if (value) {
+                                selectedImportMethod = value as 'query' | 'ddl';
+                            }
+
+                            setImportMethod(selectedImportMethod);
+                        }}
+                    >
+                        <ToggleGroupItem
+                            value="query"
+                            variant="outline"
+                            className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                        >
+                            <Avatar className="h-3 w-4 rounded-none">
+                                <AvatarImage src={logo} alt="query" />
+                                <AvatarFallback>Query</AvatarFallback>
+                            </Avatar>
+                            Smart Query
+                        </ToggleGroupItem>
+                        <ToggleGroupItem
+                            value="ddl"
+                            variant="outline"
+                            className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                        >
+                            <Avatar className="size-4 rounded-none">
+                                <Code size={16} />
+                            </Avatar>
+                            SQL Script
+                        </ToggleGroupItem>
+                    </ToggleGroup>
+                </div>
+            )}
+
+            <div className="flex flex-col gap-2">
+                <div className="text-sm font-semibold">Instructions:</div>
+                {importMethod === 'query' ? (
+                    <SmartQueryInstructions
+                        databaseType={databaseType}
+                        databaseEdition={databaseEdition}
+                        showSSMSInfoDialog={showSSMSInfoDialog}
+                        setShowSSMSInfoDialog={setShowSSMSInfoDialog}
+                    />
+                ) : (
+                    <DDLInstructions
+                        databaseType={databaseType}
+                        databaseEdition={databaseEdition}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};

src/dialogs/common/import-database/instructions-section/instructions/ddl-instruction-step.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { CodeSnippet } from '@/components/code-snippet/code-snippet';
+
+export interface DDLInstructionStepProps {
+    index: number;
+    text: string;
+    code?: string;
+    example?: string;
+}
+
+export const DDLInstructionStep: React.FC<DDLInstructionStepProps> = ({
+    index,
+    text,
+    code,
+    example,
+}) => {
+    return (
+        <div className="flex flex-col gap-1">
+            <div className="flex flex-col gap-1 text-sm text-primary">
+                <div>
+                    <span className="font-medium">{index}.</span> {text}
+                </div>
+
+                {code ? (
+                    <div className="h-[60px]">
+                        <CodeSnippet
+                            className="h-full"
+                            code={code}
+                            language={'shell'}
+                        />
+                    </div>
+                ) : null}
+                {example ? (
+                    <>
+                        <div className="my-2">Example:</div>
+                        <div className="h-[60px]">
+                            <CodeSnippet
+                                className="h-full"
+                                code={example}
+                                language={'shell'}
+                            />
+                        </div>
+                    </>
+                ) : null}
+            </div>
+        </div>
+    );
+};

src/dialogs/common/import-database/instructions-section/instructions/ddl-instructions.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { DatabaseType } from '@/lib/domain/database-type';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import { DDLInstructionStep } from './ddl-instruction-step';
+
+interface DDLInstruction {
+    text: string;
+    code?: string;
+    example?: string;
+}
+
+const DDLInstructionsMap: Record<DatabaseType, DDLInstruction[]> = {
+    [DatabaseType.GENERIC]: [],
+    [DatabaseType.MYSQL]: [
+        {
+            text: 'Install mysqldump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `mysqldump -h <host> -u <username>\n-P <port> -p --no-data\n<database_name> > <output_path>`,
+            example: `mysqldump -h localhost -u root -P\n3306 -p --no-data my_db >\nschema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.POSTGRESQL]: [
+        {
+            text: 'Install pg_dump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `pg_dump -h <host> -p <port> -d <database_name> \n  -U <username> -s -F p -E UTF-8 \n  -f <output_file_path>`,
+            example: `pg_dump -h localhost -p 5432 -d my_db \n  -U postgres -s -F p -E UTF-8 \n  -f schema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.SQLITE]: [
+        {
+            text: 'Install sqlite3.',
+        },
+        {
+            text: 'Execute the following command in your terminal:',
+            code: `sqlite3 <database_file_path>\n.dump > <output_file_path>`,
+            example: `sqlite3 my_db.db\n.dump > schema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.SQL_SERVER]: [
+        {
+            text: 'Download and install SQL Server Management Studio (SSMS).',
+        },
+        {
+            text: 'Connect to your SQL Server instance using SSMS.',
+        },
+        {
+            text: 'Right-click on the database you want to export and select Script Database as > CREATE To > New Query Editor Window.',
+        },
+        {
+            text: 'Copy the generated script and paste it here.',
+        },
+    ],
+    [DatabaseType.CLICKHOUSE]: [],
+    [DatabaseType.COCKROACHDB]: [
+        {
+            text: 'Install pg_dump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `pg_dump -h <host> -p <port> -d <database_name> \n  -U <username> -s -F p -E UTF-8 \n  -f <output_file_path>`,
+            example: `pg_dump -h localhost -p 5432 -d my_db \n  -U postgres -s -F p -E UTF-8 \n  -f schema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.MARIADB]: [
+        {
+            text: 'Install mysqldump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `mysqldump -h <host> -u <username>\n-P <port> -p --no-data\n<database_name> > <output_path>`,
+            example: `mysqldump -h localhost -u root -P\n3306 -p --no-data my_db >\nschema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.ORACLE]: [],
+};
+
+export interface DDLInstructionsProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+}
+
+export const DDLInstructions: React.FC<DDLInstructionsProps> = ({
+    databaseType,
+}) => {
+    return (
+        <>
+            {DDLInstructionsMap[databaseType].map((instruction, index) => (
+                <DDLInstructionStep
+                    key={index}
+                    index={index + 1}
+                    text={instruction.text}
+                    code={instruction.code}
+                    example={instruction.example}
+                />
+            ))}
+        </>
+    );
+};

src/dialogs/common/import-database/instructions-section/instructions/smart-query-instructions.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { DatabaseType } from '@/lib/domain/database-type';
+import { CodeSnippet } from '@/components/code-snippet/code-snippet';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import { SSMSInfo } from './ssms-info/ssms-info';
+import { useTranslation } from 'react-i18next';
+import { Tabs, TabsList, TabsTrigger } from '@/components/tabs/tabs';
+import type { DatabaseClient } from '@/lib/domain/database-clients';
+import { minimizeQuery } from '@/lib/data/import-metadata/utils';
+import {
+    databaseClientToLabelMap,
+    databaseTypeToClientsMap,
+    databaseEditionToClientsMap,
+} from '@/lib/domain/database-clients';
+import type { ImportMetadataScripts } from '@/lib/data/import-metadata/scripts/scripts';
+
+export interface SmartQueryInstructionsProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+    showSSMSInfoDialog: boolean;
+    setShowSSMSInfoDialog: (show: boolean) => void;
+}
+
+export const SmartQueryInstructions: React.FC<SmartQueryInstructionsProps> = ({
+    databaseType,
+    databaseEdition,
+    showSSMSInfoDialog,
+    setShowSSMSInfoDialog,
+}) => {
+    const databaseClients = useMemo(
+        () => [
+            ...databaseTypeToClientsMap[databaseType],
+            ...(databaseEdition
+                ? databaseEditionToClientsMap[databaseEdition]
+                : []),
+        ],
+        [databaseType, databaseEdition]
+    );
+    const [databaseClient, setDatabaseClient] = useState<
+        DatabaseClient | undefined
+    >();
+    const { t } = useTranslation();
+    const [importMetadataScripts, setImportMetadataScripts] =
+        useState<ImportMetadataScripts | null>(null);
+
+    const code = useMemo(
+        () =>
+            (databaseClients.length > 0
+                ? importMetadataScripts?.[databaseType]?.({
+                      databaseEdition,
+                      databaseClient,
+                  })
+                : importMetadataScripts?.[databaseType]?.({
+                      databaseEdition,
+                  })) ?? '',
+        [
+            databaseType,
+            databaseEdition,
+            databaseClients,
+            importMetadataScripts,
+            databaseClient,
+        ]
+    );
+
+    useEffect(() => {
+        const loadScripts = async () => {
+            const { importMetadataScripts } = await import(
+                '@/lib/data/import-metadata/scripts/scripts'
+            );
+            setImportMetadataScripts(importMetadataScripts);
+        };
+        loadScripts();
+    }, []);
+
+    return (
+        <>
+            <div className="flex flex-col gap-1">
+                <div className="flex flex-col gap-1 text-sm text-primary">
+                    <div>
+                        <span className="font-medium">1.</span>{' '}
+                        {t('new_diagram_dialog.import_database.step_1')}
+                    </div>
+                    {databaseType === DatabaseType.SQL_SERVER && (
+                        <SSMSInfo
+                            open={showSSMSInfoDialog}
+                            setOpen={setShowSSMSInfoDialog}
+                        />
+                    )}
+                </div>
+                {databaseClients.length > 0 ? (
+                    <Tabs
+                        value={!databaseClient ? 'dbclient' : databaseClient}
+                        onValueChange={(value) => {
+                            setDatabaseClient(
+                                value === 'dbclient'
+                                    ? undefined
+                                    : (value as DatabaseClient)
+                            );
+                        }}
+                    >
+                        <div className="flex flex-1">
+                            <TabsList className="h-8 justify-start rounded-none rounded-t-sm ">
+                                <TabsTrigger
+                                    value="dbclient"
+                                    className="h-6 w-20"
+                                >
+                                    DB Client
+                                </TabsTrigger>
+
+                                {databaseClients?.map((client) => (
+                                    <TabsTrigger
+                                        key={client}
+                                        value={client}
+                                        className="h-6 !w-20"
+                                    >
+                                        {databaseClientToLabelMap[client]}
+                                    </TabsTrigger>
+                                )) ?? []}
+                            </TabsList>
+                        </div>
+                        <CodeSnippet
+                            className="h-40 w-full md:h-[200px]"
+                            loading={!importMetadataScripts}
+                            code={minimizeQuery(code)}
+                            codeToCopy={code}
+                            language={databaseClient ? 'shell' : 'sql'}
+                        />
+                    </Tabs>
+                ) : (
+                    <CodeSnippet
+                        className="h-40 w-full flex-auto md:h-[200px]"
+                        loading={!importMetadataScripts}
+                        code={minimizeQuery(code)}
+                        codeToCopy={code}
+                        language="sql"
+                    />
+                )}
+            </div>
+            <div className="flex flex-col gap-1">
+                <p className="text-sm text-primary">
+                    <span className="font-medium">2.</span>{' '}
+                    {t('new_diagram_dialog.import_database.step_2')}
+                </p>
+            </div>
+        </>
+    );
+};

src/dialogs/common/import-database/sql-validation-status.tsx

@@ -0,0 +1,179 @@
+import React, { useMemo } from 'react';
+import { CheckCircle, AlertTriangle, MessageCircleWarning } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/alert/alert';
+import type { ValidationResult } from '@/lib/data/sql-import/sql-validator';
+import { Separator } from '@/components/separator/separator';
+import { ScrollArea } from '@/components/scroll-area/scroll-area';
+import { Spinner } from '@/components/spinner/spinner';
+
+interface SQLValidationStatusProps {
+    validation?: ValidationResult | null;
+    errorMessage: string;
+    isAutoFixing?: boolean;
+    onErrorClick?: (line: number) => void;
+}
+
+export const SQLValidationStatus: React.FC<SQLValidationStatusProps> = ({
+    validation,
+    errorMessage,
+    isAutoFixing = false,
+    onErrorClick,
+}) => {
+    const hasErrors = useMemo(
+        () => validation?.errors.length && validation.errors.length > 0,
+        [validation?.errors]
+    );
+    const hasWarnings = useMemo(
+        () => validation?.warnings && validation.warnings.length > 0,
+        [validation?.warnings]
+    );
+    const wasAutoFixed = useMemo(
+        () =>
+            validation?.warnings?.some((w) =>
+                w.message.includes('Auto-fixed')
+            ) || false,
+        [validation?.warnings]
+    );
+
+    if (!validation && !errorMessage && !isAutoFixing) return null;
+
+    if (isAutoFixing) {
+        return (
+            <>
+                <Separator className="mb-1 mt-2" />
+                <div className="rounded-md border border-sky-200 bg-sky-50 dark:border-sky-800 dark:bg-sky-950">
+                    <div className="space-y-3 p-3 pt-2 text-sky-700 dark:text-sky-300">
+                        <div className="flex items-start gap-2">
+                            <Spinner className="mt-0.5 size-4 shrink-0 text-sky-700 dark:text-sky-300" />
+                            <div className="flex-1 text-sm text-sky-700 dark:text-sky-300">
+                                Auto-fixing SQL syntax errors...
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    // If we have parser errors (errorMessage) after validation
+    if (errorMessage && !hasErrors) {
+        return (
+            <>
+                <Separator className="mb-1 mt-2" />
+                <div className="mb-1 flex shrink-0 items-center gap-2">
+                    <p className="text-xs text-red-700">{errorMessage}</p>
+                </div>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <Separator className="mb-1 mt-2" />
+
+            {hasErrors ? (
+                <div className="rounded-md border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
+                    <ScrollArea className="h-24">
+                        <div className="space-y-3 p-3 pt-2 text-red-700 dark:text-red-300">
+                            {validation?.errors
+                                .slice(0, 3)
+                                .map((error, idx) => (
+                                    <div
+                                        key={idx}
+                                        className="flex items-start gap-2"
+                                    >
+                                        <MessageCircleWarning className="mt-0.5 size-4 shrink-0 text-red-700 dark:text-red-300" />
+                                        <div className="flex-1 text-sm text-red-700 dark:text-red-300">
+                                            <button
+                                                onClick={() =>
+                                                    onErrorClick?.(error.line)
+                                                }
+                                                className="rounded font-medium underline hover:text-red-600 focus:outline-none focus:ring-1 focus:ring-red-500 dark:hover:text-red-200"
+                                                type="button"
+                                            >
+                                                Line {error.line}
+                                            </button>
+                                            <span className="mx-1">:</span>
+                                            <span className="text-xs">
+                                                {error.message}
+                                            </span>
+                                            {error.suggestion && (
+                                                <div className="mt-1 flex items-start gap-2">
+                                                    <span className="text-xs font-medium ">
+                                                        {error.suggestion}
+                                                    </span>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            {validation?.errors &&
+                            validation?.errors.length > 3 ? (
+                                <div className="flex items-center gap-2">
+                                    <MessageCircleWarning className="mt-0.5 size-4 shrink-0 text-red-700 dark:text-red-300" />
+                                    <span className="text-xs font-medium">
+                                        {validation.errors.length - 3} more
+                                        error
+                                        {validation.errors.length - 3 > 1
+                                            ? 's'
+                                            : ''}
+                                    </span>
+                                </div>
+                            ) : null}
+                        </div>
+                    </ScrollArea>
+                </div>
+            ) : null}
+
+            {wasAutoFixed && !hasErrors ? (
+                <Alert className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950">
+                    <CheckCircle className="size-4 text-green-600 dark:text-green-400" />
+                    <AlertDescription className="text-sm text-green-700 dark:text-green-300">
+                        SQL syntax errors were automatically fixed. Your SQL is
+                        now ready to import.
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
+            {hasWarnings && !hasErrors ? (
+                <div className="rounded-md border border-sky-200 bg-sky-50 dark:border-sky-800 dark:bg-sky-950">
+                    <ScrollArea className="h-24">
+                        <div className="space-y-3 p-3 pt-2 text-sky-700 dark:text-sky-300">
+                            <div className="flex items-start gap-2">
+                                <AlertTriangle className="mt-0.5 size-4 shrink-0 text-sky-700 dark:text-sky-300" />
+                                <div className="flex-1 text-sm text-sky-700 dark:text-sky-300">
+                                    <div className="mb-1 font-medium">
+                                        Import Info:
+                                    </div>
+                                    {validation?.warnings.map(
+                                        (warning, idx) => (
+                                            <div
+                                                key={idx}
+                                                className="ml-2 text-xs"
+                                            >
+                                                • {warning.message}
+                                            </div>
+                                        )
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </ScrollArea>
+                </div>
+            ) : null}
+
+            {!hasErrors && !hasWarnings && !errorMessage && validation ? (
+                <div className="rounded-md border border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950">
+                    <div className="space-y-3 p-3 pt-2 text-green-700 dark:text-green-300">
+                        <div className="flex items-start gap-2">
+                            <CheckCircle className="mt-0.5 size-4 shrink-0 text-green-700 dark:text-green-300" />
+                            <div className="flex-1 text-sm text-green-700 dark:text-green-300">
+                                SQL syntax validated successfully
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+        </>
+    );
+};

src/dialogs/common/select-tables/constants.ts

@@ -0,0 +1,2 @@
+export const MAX_TABLES_IN_DIAGRAM = 500;
+export const MAX_TABLES_WITHOUT_SHOWING_FILTER = 50;

src/dialogs/common/select-tables/select-tables.tsx

@@ -0,0 +1,665 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Button } from '@/components/button/button';
+import { Input } from '@/components/input/input';
+import { Search, AlertCircle, Check, X, View, Table } from 'lucide-react';
+import { Checkbox } from '@/components/checkbox/checkbox';
+import type { DatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
+import { schemaNameToDomainSchemaName } from '@/lib/domain/db-schema';
+import { cn } from '@/lib/utils';
+import {
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogInternalContent,
+    DialogTitle,
+} from '@/components/dialog/dialog';
+import type { SelectedTable } from '@/lib/data/import-metadata/filter-metadata';
+import { generateTableKey } from '@/lib/domain';
+import { Spinner } from '@/components/spinner/spinner';
+import {
+    Pagination,
+    PaginationContent,
+    PaginationItem,
+    PaginationPrevious,
+    PaginationNext,
+} from '@/components/pagination/pagination';
+import { MAX_TABLES_IN_DIAGRAM } from './constants';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
+import { useTranslation } from 'react-i18next';
+
+export interface SelectTablesProps {
+    databaseMetadata?: DatabaseMetadata;
+    onImport: ({
+        selectedTables,
+        databaseMetadata,
+    }: {
+        selectedTables?: SelectedTable[];
+        databaseMetadata?: DatabaseMetadata;
+    }) => Promise<void>;
+    onBack: () => void;
+    isLoading?: boolean;
+}
+
+const TABLES_PER_PAGE = 10;
+
+interface TableInfo {
+    key: string;
+    schema?: string;
+    tableName: string;
+    fullName: string;
+    type: 'table' | 'view';
+}
+
+export const SelectTables: React.FC<SelectTablesProps> = ({
+    databaseMetadata,
+    onImport,
+    onBack,
+    isLoading = false,
+}) => {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [showTables, setShowTables] = useState(true);
+    const [showViews, setShowViews] = useState(false);
+    const { t } = useTranslation();
+
+    // Prepare all tables and views with their metadata
+    const allTables = useMemo(() => {
+        const tables: TableInfo[] = [];
+
+        // Add regular tables
+        databaseMetadata?.tables.forEach((table) => {
+            const schema = schemaNameToDomainSchemaName(table.schema);
+            const tableName = table.table;
+
+            const key = `table:${generateTableKey({ tableName, schemaName: schema })}`;
+
+            tables.push({
+                key,
+                schema,
+                tableName,
+                fullName: schema ? `${schema}.${tableName}` : tableName,
+                type: 'table',
+            });
+        });
+
+        // Add views
+        databaseMetadata?.views?.forEach((view) => {
+            const schema = schemaNameToDomainSchemaName(view.schema);
+            const viewName = view.view_name;
+
+            if (!viewName) {
+                return;
+            }
+
+            const key = `view:${generateTableKey({
+                tableName: viewName,
+                schemaName: schema,
+            })}`;
+
+            tables.push({
+                key,
+                schema,
+                tableName: viewName,
+                fullName:
+                    schema === 'default' ? viewName : `${schema}.${viewName}`,
+                type: 'view',
+            });
+        });
+
+        return tables.sort((a, b) => a.fullName.localeCompare(b.fullName));
+    }, [databaseMetadata?.tables, databaseMetadata?.views]);
+
+    // Count tables and views separately
+    const tableCount = useMemo(
+        () => allTables.filter((t) => t.type === 'table').length,
+        [allTables]
+    );
+    const viewCount = useMemo(
+        () => allTables.filter((t) => t.type === 'view').length,
+        [allTables]
+    );
+
+    // Initialize selectedTables with all tables (not views) if less than 100 tables
+    const [selectedTables, setSelectedTables] = useState<Set<string>>(() => {
+        const tables = allTables.filter((t) => t.type === 'table');
+        if (tables.length < MAX_TABLES_IN_DIAGRAM) {
+            return new Set(tables.map((t) => t.key));
+        }
+        return new Set();
+    });
+
+    // Filter tables based on search term and type filters
+    const filteredTables = useMemo(() => {
+        let filtered = allTables;
+
+        // Filter by type
+        filtered = filtered.filter((table) => {
+            if (table.type === 'table' && !showTables) return false;
+            if (table.type === 'view' && !showViews) return false;
+            return true;
+        });
+
+        // Filter by search term
+        if (searchTerm.trim()) {
+            const searchLower = searchTerm.toLowerCase();
+            filtered = filtered.filter(
+                (table) =>
+                    table.tableName.toLowerCase().includes(searchLower) ||
+                    table.schema?.toLowerCase().includes(searchLower) ||
+                    table.fullName.toLowerCase().includes(searchLower)
+            );
+        }
+
+        return filtered;
+    }, [allTables, searchTerm, showTables, showViews]);
+
+    // Calculate pagination
+    const totalPages = useMemo(
+        () => Math.max(1, Math.ceil(filteredTables.length / TABLES_PER_PAGE)),
+        [filteredTables.length]
+    );
+
+    const paginatedTables = useMemo(() => {
+        const startIndex = (currentPage - 1) * TABLES_PER_PAGE;
+        const endIndex = startIndex + TABLES_PER_PAGE;
+        return filteredTables.slice(startIndex, endIndex);
+    }, [filteredTables, currentPage]);
+
+    // Get currently visible selected tables
+    const visibleSelectedTables = useMemo(() => {
+        return paginatedTables.filter((table) => selectedTables.has(table.key));
+    }, [paginatedTables, selectedTables]);
+
+    const canAddMore = useMemo(
+        () => selectedTables.size < MAX_TABLES_IN_DIAGRAM,
+        [selectedTables.size]
+    );
+    const hasSearchResults = useMemo(
+        () => filteredTables.length > 0,
+        [filteredTables.length]
+    );
+    const allVisibleSelected = useMemo(
+        () =>
+            visibleSelectedTables.length === paginatedTables.length &&
+            paginatedTables.length > 0,
+        [visibleSelectedTables.length, paginatedTables.length]
+    );
+    const canSelectAllFiltered = useMemo(
+        () =>
+            filteredTables.length > 0 &&
+            filteredTables.some((table) => !selectedTables.has(table.key)) &&
+            canAddMore,
+        [filteredTables, selectedTables, canAddMore]
+    );
+
+    // Reset to first page when search changes
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchTerm]);
+
+    const handleTableToggle = useCallback(
+        (tableKey: string) => {
+            const newSelected = new Set(selectedTables);
+
+            if (newSelected.has(tableKey)) {
+                newSelected.delete(tableKey);
+            } else if (selectedTables.size < MAX_TABLES_IN_DIAGRAM) {
+                newSelected.add(tableKey);
+            }
+
+            setSelectedTables(newSelected);
+        },
+        [selectedTables]
+    );
+
+    const handleTogglePageSelection = useCallback(() => {
+        const newSelected = new Set(selectedTables);
+
+        if (allVisibleSelected) {
+            // Deselect all on current page
+            for (const table of paginatedTables) {
+                newSelected.delete(table.key);
+            }
+        } else {
+            // Select all on current page
+            for (const table of paginatedTables) {
+                if (newSelected.size >= MAX_TABLES_IN_DIAGRAM) break;
+                newSelected.add(table.key);
+            }
+        }
+
+        setSelectedTables(newSelected);
+    }, [allVisibleSelected, paginatedTables, selectedTables]);
+
+    const handleSelectAllFiltered = useCallback(() => {
+        const newSelected = new Set(selectedTables);
+
+        for (const table of filteredTables) {
+            if (newSelected.size >= MAX_TABLES_IN_DIAGRAM) break;
+            newSelected.add(table.key);
+        }
+
+        setSelectedTables(newSelected);
+    }, [filteredTables, selectedTables]);
+
+    const handleNextPage = useCallback(() => {
+        if (currentPage < totalPages) {
+            setCurrentPage(currentPage + 1);
+        }
+    }, [currentPage, totalPages]);
+
+    const handlePrevPage = useCallback(() => {
+        if (currentPage > 1) {
+            setCurrentPage(currentPage - 1);
+        }
+    }, [currentPage]);
+
+    const handleClearSelection = useCallback(() => {
+        setSelectedTables(new Set());
+    }, []);
+
+    const handleConfirm = useCallback(() => {
+        const selectedTableObjects: SelectedTable[] = Array.from(selectedTables)
+            .map((key): SelectedTable | null => {
+                const table = allTables.find((t) => t.key === key);
+                if (!table) return null;
+
+                return {
+                    schema: table.schema,
+                    table: table.tableName,
+                    type: table.type,
+                } satisfies SelectedTable;
+            })
+            .filter((t): t is SelectedTable => t !== null);
+
+        onImport({ selectedTables: selectedTableObjects, databaseMetadata });
+    }, [selectedTables, allTables, onImport, databaseMetadata]);
+
+    const { isMd: isDesktop } = useBreakpoint('md');
+
+    const renderPagination = useCallback(
+        () => (
+            <Pagination>
+                <PaginationContent>
+                    <PaginationItem>
+                        <PaginationPrevious
+                            onClick={handlePrevPage}
+                            className={cn(
+                                'cursor-pointer',
+                                currentPage === 1 &&
+                                    'pointer-events-none opacity-50'
+                            )}
+                        />
+                    </PaginationItem>
+                    <PaginationItem>
+                        <span className="px-3 text-sm text-muted-foreground">
+                            Page {currentPage} of {totalPages}
+                        </span>
+                    </PaginationItem>
+                    <PaginationItem>
+                        <PaginationNext
+                            onClick={handleNextPage}
+                            className={cn(
+                                'cursor-pointer',
+                                (currentPage >= totalPages ||
+                                    filteredTables.length === 0) &&
+                                    'pointer-events-none opacity-50'
+                            )}
+                        />
+                    </PaginationItem>
+                </PaginationContent>
+            </Pagination>
+        ),
+        [
+            currentPage,
+            totalPages,
+            handlePrevPage,
+            handleNextPage,
+            filteredTables.length,
+        ]
+    );
+
+    if (isLoading) {
+        return (
+            <div className="flex h-[400px] items-center justify-center">
+                <div className="text-center">
+                    <Spinner className="mb-4" />
+                    <p className="text-sm text-muted-foreground">
+                        Parsing database metadata...
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <DialogHeader>
+                <DialogTitle>Select Tables to Import</DialogTitle>
+                <DialogDescription>
+                    {tableCount} {tableCount === 1 ? 'table' : 'tables'}
+                    {viewCount > 0 && (
+                        <>
+                            {' and '}
+                            {viewCount} {viewCount === 1 ? 'view' : 'views'}
+                        </>
+                    )}
+                    {' found. '}
+                    {allTables.length > MAX_TABLES_IN_DIAGRAM
+                        ? `Select up to ${MAX_TABLES_IN_DIAGRAM} to import.`
+                        : 'Choose which ones to import.'}
+                </DialogDescription>
+            </DialogHeader>
+            <DialogInternalContent>
+                <div className="flex h-full flex-col space-y-4">
+                    {/* Warning/Info Banner */}
+                    {allTables.length > MAX_TABLES_IN_DIAGRAM ? (
+                        <div
+                            className={cn(
+                                'flex items-center gap-2 rounded-lg p-3 text-sm',
+                                'bg-amber-50 text-amber-800 dark:bg-amber-950 dark:text-amber-200'
+                            )}
+                        >
+                            <AlertCircle className="size-4 shrink-0" />
+                            <span>
+                                Due to performance limitations, you can import a
+                                maximum of {MAX_TABLES_IN_DIAGRAM} tables.
+                            </span>
+                        </div>
+                    ) : null}
+                    {/* Search Input */}
+                    <div className="relative">
+                        <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                            placeholder="Search tables..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="px-9"
+                        />
+                        {searchTerm && (
+                            <button
+                                onClick={() => setSearchTerm('')}
+                                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                            >
+                                <X className="size-4" />
+                            </button>
+                        )}
+                    </div>
+
+                    {/* Selection Status and Actions - Responsive layout */}
+                    <div className="flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                        {/* Left side: selection count -> checkboxes -> results found */}
+                        <div className="flex flex-col items-center gap-3 text-sm sm:flex-row sm:items-center sm:gap-4">
+                            <div className="flex flex-col items-center gap-1 sm:flex-row sm:items-center sm:gap-4">
+                                <span className="text-center font-medium">
+                                    {selectedTables.size} /{' '}
+                                    {Math.min(
+                                        MAX_TABLES_IN_DIAGRAM,
+                                        allTables.length
+                                    )}{' '}
+                                    items selected
+                                </span>
+                            </div>
+
+                            <div className="flex items-center gap-3 sm:border-x sm:px-4">
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        checked={showTables}
+                                        onCheckedChange={(checked) => {
+                                            // Prevent unchecking if it's the only one checked
+                                            if (!checked && !showViews) return;
+                                            setShowTables(!!checked);
+                                        }}
+                                    />
+                                    <Table
+                                        className="size-4"
+                                        strokeWidth={1.5}
+                                    />
+                                    <span>tables</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        checked={showViews}
+                                        onCheckedChange={(checked) => {
+                                            // Prevent unchecking if it's the only one checked
+                                            if (!checked && !showTables) return;
+                                            setShowViews(!!checked);
+                                        }}
+                                    />
+                                    <View
+                                        className="size-4"
+                                        strokeWidth={1.5}
+                                    />
+                                    <span>views</span>
+                                </div>
+                            </div>
+
+                            <span className="hidden text-muted-foreground sm:inline">
+                                {filteredTables.length}{' '}
+                                {filteredTables.length === 1
+                                    ? 'result'
+                                    : 'results'}{' '}
+                                found
+                            </span>
+                        </div>
+
+                        {/* Right side: action buttons */}
+                        <div className="flex flex-wrap items-center justify-center gap-2">
+                            {hasSearchResults && (
+                                <>
+                                    {/* Show page selection button when not searching and no selection */}
+                                    {!searchTerm &&
+                                        selectedTables.size === 0 && (
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={
+                                                    handleTogglePageSelection
+                                                }
+                                                disabled={
+                                                    paginatedTables.length === 0
+                                                }
+                                            >
+                                                {allVisibleSelected
+                                                    ? 'Deselect'
+                                                    : 'Select'}{' '}
+                                                page
+                                            </Button>
+                                        )}
+                                    {/* Show Select all button when there are unselected tables */}
+                                    {canSelectAllFiltered &&
+                                        selectedTables.size === 0 && (
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                onClick={
+                                                    handleSelectAllFiltered
+                                                }
+                                                disabled={!canSelectAllFiltered}
+                                                title={(() => {
+                                                    const unselectedCount =
+                                                        filteredTables.filter(
+                                                            (table) =>
+                                                                !selectedTables.has(
+                                                                    table.key
+                                                                )
+                                                        ).length;
+                                                    const remainingCapacity =
+                                                        MAX_TABLES_IN_DIAGRAM -
+                                                        selectedTables.size;
+                                                    if (
+                                                        unselectedCount >
+                                                        remainingCapacity
+                                                    ) {
+                                                        return `Can only select ${remainingCapacity} more tables (${MAX_TABLES_IN_DIAGRAM} max limit)`;
+                                                    }
+                                                    return undefined;
+                                                })()}
+                                            >
+                                                {(() => {
+                                                    const unselectedCount =
+                                                        filteredTables.filter(
+                                                            (table) =>
+                                                                !selectedTables.has(
+                                                                    table.key
+                                                                )
+                                                        ).length;
+                                                    const remainingCapacity =
+                                                        MAX_TABLES_IN_DIAGRAM -
+                                                        selectedTables.size;
+                                                    if (
+                                                        unselectedCount >
+                                                        remainingCapacity
+                                                    ) {
+                                                        return `Select ${remainingCapacity} of ${unselectedCount}`;
+                                                    }
+                                                    return `Select all ${unselectedCount}`;
+                                                })()}
+                                            </Button>
+                                        )}
+                                </>
+                            )}
+                            {selectedTables.size > 0 && (
+                                <>
+                                    {/* Show page selection/deselection button when user has selections */}
+                                    {paginatedTables.length > 0 && (
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={handleTogglePageSelection}
+                                        >
+                                            {allVisibleSelected
+                                                ? 'Deselect'
+                                                : 'Select'}{' '}
+                                            page
+                                        </Button>
+                                    )}
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={handleClearSelection}
+                                    >
+                                        Clear selection
+                                    </Button>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Table List */}
+                <div className="flex min-h-[428px] flex-1 flex-col">
+                    {hasSearchResults ? (
+                        <>
+                            <div className="flex-1 py-4">
+                                <div className="space-y-1">
+                                    {paginatedTables.map((table) => {
+                                        const isSelected = selectedTables.has(
+                                            table.key
+                                        );
+                                        const isDisabled =
+                                            !isSelected &&
+                                            selectedTables.size >=
+                                                MAX_TABLES_IN_DIAGRAM;
+
+                                        return (
+                                            <div
+                                                key={table.key}
+                                                className={cn(
+                                                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+                                                    {
+                                                        'cursor-not-allowed':
+                                                            isDisabled,
+
+                                                        'bg-muted hover:bg-muted/80':
+                                                            isSelected,
+                                                        'hover:bg-accent':
+                                                            !isSelected &&
+                                                            !isDisabled,
+                                                    }
+                                                )}
+                                            >
+                                                <Checkbox
+                                                    checked={isSelected}
+                                                    disabled={isDisabled}
+                                                    onCheckedChange={() =>
+                                                        handleTableToggle(
+                                                            table.key
+                                                        )
+                                                    }
+                                                />
+                                                {table.type === 'view' ? (
+                                                    <View
+                                                        className="size-4"
+                                                        strokeWidth={1.5}
+                                                    />
+                                                ) : (
+                                                    <Table
+                                                        className="size-4"
+                                                        strokeWidth={1.5}
+                                                    />
+                                                )}
+                                                <span className="flex-1">
+                                                    {table.schema ? (
+                                                        <span className="text-muted-foreground">
+                                                            {table.schema}.
+                                                        </span>
+                                                    ) : null}
+                                                    <span className="font-medium">
+                                                        {table.tableName}
+                                                    </span>
+                                                    {table.type === 'view' && (
+                                                        <span className="ml-2 text-xs text-muted-foreground">
+                                                            (view)
+                                                        </span>
+                                                    )}
+                                                </span>
+                                                {isSelected && (
+                                                    <Check className="size-4 text-pink-600" />
+                                                )}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </>
+                    ) : (
+                        <div className="flex h-full items-center justify-center py-4">
+                            <p className="text-sm text-muted-foreground">
+                                {searchTerm
+                                    ? 'No tables found matching your search.'
+                                    : 'Start typing to search for tables...'}
+                            </p>
+                        </div>
+                    )}
+                </div>
+                {isDesktop ? renderPagination() : null}
+            </DialogInternalContent>
+            <DialogFooter
+                // className={cn(
+                //     'gap-2',
+                //     isDesktop
+                //         ? 'flex items-center justify-between'
+                //         : 'flex flex-col'
+                // )}
+                className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 md:justify-between md:gap-0"
+            >
+                {/* Desktop layout */}
+
+                <Button type="button" variant="secondary" onClick={onBack}>
+                    {t('new_diagram_dialog.back')}
+                </Button>
+
+                <Button
+                    onClick={handleConfirm}
+                    disabled={selectedTables.size === 0}
+                    className="bg-pink-500 text-white hover:bg-pink-600"
+                >
+                    Import {selectedTables.size} Tables
+                </Button>
+
+                {!isDesktop ? renderPagination() : null}
+            </DialogFooter>
+        </>
+    );
+};

src/dialogs/create-diagram-dialog/create-diagram-dialog-step.ts

@@ -1,4 +1,5 @@
 export enum CreateDiagramDialogStep {
     SELECT_DATABASE = 'SELECT_DATABASE',
     IMPORT_DATABASE = 'IMPORT_DATABASE',
+    SELECT_TABLES = 'SELECT_TABLES',
 }

src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx

@@ -15,8 +15,13 @@ import type { DatabaseEdition } from '@/lib/domain/database-edition';
 import { SelectDatabase } from './select-database/select-database';
 import { CreateDiagramDialogStep } from './create-diagram-dialog-step';
 import { ImportDatabase } from '../common/import-database/import-database';
+import { SelectTables } from '../common/select-tables/select-tables';
 import { useTranslation } from 'react-i18next';
 import type { BaseDialogProps } from '../common/base-dialog-props';
+import { sqlImportToDiagram } from '@/lib/data/sql-import';
+import type { SelectedTable } from '@/lib/data/import-metadata/filter-metadata';
+import { filterMetadataByTables } from '@/lib/data/import-metadata/filter-metadata';
+import { MAX_TABLES_WITHOUT_SHOWING_FILTER } from '../common/select-tables/constants';
 
 export interface CreateDiagramDialogProps extends BaseDialogProps {}
 
@@ -25,6 +30,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
 }) => {
     const { diagramId } = useChartDB();
     const { t } = useTranslation();
+    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
     const [databaseType, setDatabaseType] = useState<DatabaseType>(
         DatabaseType.GENERIC
     );
@@ -40,9 +46,12 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
     const { listDiagrams, addDiagram } = useStorage();
     const [diagramNumber, setDiagramNumber] = useState<number>(1);
     const navigate = useNavigate();
+    const [parsedMetadata, setParsedMetadata] = useState<DatabaseMetadata>();
+    const [isParsingMetadata, setIsParsingMetadata] = useState(false);
 
     useEffect(() => {
         setDatabaseEdition(undefined);
+        setImportMethod('query');
     }, [databaseType]);
 
     useEffect(() => {
@@ -58,38 +67,73 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         setDatabaseType(DatabaseType.GENERIC);
         setDatabaseEdition(undefined);
         setScriptResult('');
+        setImportMethod('query');
+        setParsedMetadata(undefined);
     }, [dialog.open]);
 
     const hasExistingDiagram = (diagramId ?? '').trim().length !== 0;
 
-    const importNewDiagram = useCallback(async () => {
-        const databaseMetadata: DatabaseMetadata =
-            loadDatabaseMetadata(scriptResult);
-
-        const diagram = await loadFromDatabaseMetadata({
-            databaseType,
+    const importNewDiagram = useCallback(
+        async ({
+            selectedTables,
             databaseMetadata,
-            diagramNumber,
-            databaseEdition:
-                databaseEdition?.trim().length === 0
-                    ? undefined
-                    : databaseEdition,
-        });
+        }: {
+            selectedTables?: SelectedTable[];
+            databaseMetadata?: DatabaseMetadata;
+        } = {}) => {
+            let diagram: Diagram | undefined;
 
-        await addDiagram({ diagram });
-        await updateConfig({ defaultDiagramId: diagram.id });
-        closeCreateDiagramDialog();
-        navigate(`/diagrams/${diagram.id}`);
-    }, [
-        databaseType,
-        addDiagram,
-        databaseEdition,
-        closeCreateDiagramDialog,
-        navigate,
-        updateConfig,
-        scriptResult,
-        diagramNumber,
-    ]);
+            if (importMethod === 'ddl') {
+                diagram = await sqlImportToDiagram({
+                    sqlContent: scriptResult,
+                    sourceDatabaseType: databaseType,
+                    targetDatabaseType: databaseType,
+                });
+            } else {
+                let metadata: DatabaseMetadata | undefined = databaseMetadata;
+
+                if (!metadata) {
+                    metadata = loadDatabaseMetadata(scriptResult);
+                }
+
+                if (selectedTables && selectedTables.length > 0) {
+                    metadata = filterMetadataByTables({
+                        metadata,
+                        selectedTables,
+                    });
+                }
+
+                diagram = await loadFromDatabaseMetadata({
+                    databaseType,
+                    databaseMetadata: metadata,
+                    diagramNumber,
+                    databaseEdition:
+                        databaseEdition?.trim().length === 0
+                            ? undefined
+                            : databaseEdition,
+                });
+            }
+
+            await addDiagram({ diagram });
+            await updateConfig({
+                config: { defaultDiagramId: diagram.id },
+            });
+
+            closeCreateDiagramDialog();
+            navigate(`/diagrams/${diagram.id}`);
+        },
+        [
+            importMethod,
+            databaseType,
+            addDiagram,
+            databaseEdition,
+            closeCreateDiagramDialog,
+            navigate,
+            updateConfig,
+            scriptResult,
+            diagramNumber,
+        ]
+    );
 
     const createEmptyDiagram = useCallback(async () => {
         const diagram: Diagram = {
@@ -105,7 +149,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         };
 
         await addDiagram({ diagram });
-        await updateConfig({ defaultDiagramId: diagram.id });
+        await updateConfig({ config: { defaultDiagramId: diagram.id } });
         closeCreateDiagramDialog();
         navigate(`/diagrams/${diagram.id}`);
         setTimeout(
@@ -123,10 +167,56 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         openImportDBMLDialog,
     ]);
 
+    const importNewDiagramOrFilterTables = useCallback(async () => {
+        try {
+            setIsParsingMetadata(true);
+
+            if (importMethod === 'ddl') {
+                await importNewDiagram();
+            } else {
+                // Parse metadata asynchronously to avoid blocking the UI
+                const metadata = await new Promise<DatabaseMetadata>(
+                    (resolve, reject) => {
+                        setTimeout(() => {
+                            try {
+                                const result =
+                                    loadDatabaseMetadata(scriptResult);
+                                resolve(result);
+                            } catch (err) {
+                                reject(err);
+                            }
+                        }, 0);
+                    }
+                );
+
+                const totalTablesAndViews =
+                    metadata.tables.length + (metadata.views?.length || 0);
+
+                setParsedMetadata(metadata);
+
+                // Check if it's a large database that needs table selection
+                if (totalTablesAndViews > MAX_TABLES_WITHOUT_SHOWING_FILTER) {
+                    setStep(CreateDiagramDialogStep.SELECT_TABLES);
+                } else {
+                    await importNewDiagram({
+                        databaseMetadata: metadata,
+                    });
+                }
+            }
+        } finally {
+            setIsParsingMetadata(false);
+        }
+    }, [importMethod, scriptResult, importNewDiagram]);
+
     return (
         <Dialog
             {...dialog}
             onOpenChange={(open) => {
+                // Don't allow closing while parsing metadata
+                if (isParsingMetadata) {
+                    return;
+                }
+
                 if (!hasExistingDiagram) {
                     return;
                 }
@@ -137,8 +227,10 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
             }}
         >
             <DialogContent
-                className="flex max-h-screen w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
+                className="flex max-h-dvh w-full flex-col md:max-w-[900px]"
                 showClose={hasExistingDiagram}
+                onInteractOutside={(e) => e.preventDefault()}
+                onEscapeKeyDown={(e) => e.preventDefault()}
             >
                 {step === CreateDiagramDialogStep.SELECT_DATABASE ? (
                     <SelectDatabase
@@ -150,9 +242,9 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
                             setStep(CreateDiagramDialogStep.IMPORT_DATABASE)
                         }
                     />
-                ) : (
+                ) : step === CreateDiagramDialogStep.IMPORT_DATABASE ? (
                     <ImportDatabase
-                        onImport={importNewDiagram}
+                        onImport={importNewDiagramOrFilterTables}
                         onCreateEmptyDiagram={createEmptyDiagram}
                         databaseEdition={databaseEdition}
                         databaseType={databaseType}
@@ -163,8 +255,20 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
                         }
                         setScriptResult={setScriptResult}
                         title={t('new_diagram_dialog.import_database.title')}
+                        importMethod={importMethod}
+                        setImportMethod={setImportMethod}
+                        keepDialogAfterImport={true}
                     />
-                )}
+                ) : step === CreateDiagramDialogStep.SELECT_TABLES ? (
+                    <SelectTables
+                        isLoading={isParsingMetadata || !parsedMetadata}
+                        databaseMetadata={parsedMetadata}
+                        onImport={importNewDiagram}
+                        onBack={() =>
+                            setStep(CreateDiagramDialogStep.IMPORT_DATABASE)
+                        }
+                    />
+                ) : null}
             </DialogContent>
         </Dialog>
     );

src/dialogs/create-diagram-dialog/select-database/select-database-content.tsx

@@ -20,6 +20,7 @@ const SUPPORTED_DB_TYPES: DatabaseType[] = [
     DatabaseType.MARIADB,
     DatabaseType.SQLITE,
     DatabaseType.SQL_SERVER,
+    DatabaseType.ORACLE,
     DatabaseType.COCKROACHDB,
     DatabaseType.CLICKHOUSE,
 ];

src/dialogs/export-image-dialog/export-image-dialog.tsx

@@ -16,11 +16,20 @@ import type { BaseDialogProps } from '../common/base-dialog-props';
 import { useTranslation } from 'react-i18next';
 import type { ImageType } from '@/context/export-image-context/export-image-context';
 import { useExportImage } from '@/hooks/use-export-image';
+import { Checkbox } from '@/components/checkbox/checkbox';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@/components/accordion/accordion';
 
 export interface ExportImageDialogProps extends BaseDialogProps {
     format: ImageType;
 }
 
+const DEFAULT_INCLUDE_PATTERN_BG = true;
+const DEFAULT_TRANSPARENT = false;
 const DEFAULT_SCALE = '2';
 export const ExportImageDialog: React.FC<ExportImageDialogProps> = ({
     dialog,
@@ -28,17 +37,28 @@ export const ExportImageDialog: React.FC<ExportImageDialogProps> = ({
 }) => {
     const { t } = useTranslation();
     const [scale, setScale] = useState<string>(DEFAULT_SCALE);
+    const [includePatternBG, setIncludePatternBG] = useState<boolean>(
+        DEFAULT_INCLUDE_PATTERN_BG
+    );
+    const [transparent, setTransparent] =
+        useState<boolean>(DEFAULT_TRANSPARENT);
     const { exportImage } = useExportImage();
 
     useEffect(() => {
         if (!dialog.open) return;
         setScale(DEFAULT_SCALE);
+        setIncludePatternBG(DEFAULT_INCLUDE_PATTERN_BG);
+        setTransparent(DEFAULT_TRANSPARENT);
     }, [dialog.open]);
     const { closeExportImageDialog } = useDialog();
 
     const handleExport = useCallback(() => {
-        exportImage(format, Number(scale));
-    }, [exportImage, format, scale]);
+        exportImage(format, {
+            transparent,
+            includePatternBG,
+            scale: Number(scale),
+        });
+    }, [exportImage, format, includePatternBG, transparent, scale]);
 
     const scaleOptions: SelectBoxOption[] = useMemo(
         () =>
@@ -65,15 +85,79 @@ export const ExportImageDialog: React.FC<ExportImageDialogProps> = ({
                         {t('export_image_dialog.description')}
                     </DialogDescription>
                 </DialogHeader>
-                <div className="grid gap-4 py-1">
-                    <div className="grid w-full items-center gap-4">
-                        <SelectBox
-                            options={scaleOptions}
-                            multiple={false}
-                            value={scale}
-                            onChange={(value) => setScale(value as string)}
-                        />
-                    </div>
+                <div className="flex flex-col gap-4 py-1">
+                    <SelectBox
+                        options={scaleOptions}
+                        multiple={false}
+                        value={scale}
+                        onChange={(value) => setScale(value as string)}
+                    />
+                    <Accordion type="single" collapsible className="w-full">
+                        <AccordionItem value="settings" className="border-0">
+                            <AccordionTrigger
+                                className="py-1.5"
+                                iconPosition="right"
+                            >
+                                {t('export_image_dialog.advanced_options')}
+                            </AccordionTrigger>
+                            <AccordionContent>
+                                <div className="flex flex-col gap-3 py-2">
+                                    <div className="flex items-start gap-3">
+                                        <Checkbox
+                                            id="pattern-checkbox"
+                                            className="mt-1 data-[state=checked]:border-pink-600 data-[state=checked]:bg-pink-600 data-[state=checked]:text-white"
+                                            checked={includePatternBG}
+                                            onCheckedChange={(value) =>
+                                                setIncludePatternBG(
+                                                    value as boolean
+                                                )
+                                            }
+                                        />
+                                        <div className="flex flex-col">
+                                            <label
+                                                htmlFor="pattern-checkbox"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t(
+                                                    'export_image_dialog.pattern'
+                                                )}
+                                            </label>
+                                            <span className="text-sm text-muted-foreground">
+                                                {t(
+                                                    'export_image_dialog.pattern_description'
+                                                )}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-start gap-3">
+                                        <Checkbox
+                                            id="transparent-checkbox"
+                                            className="mt-1 data-[state=checked]:border-pink-600 data-[state=checked]:bg-pink-600 data-[state=checked]:text-white"
+                                            checked={transparent}
+                                            onCheckedChange={(value) =>
+                                                setTransparent(value as boolean)
+                                            }
+                                        />
+                                        <div className="flex flex-col">
+                                            <label
+                                                htmlFor="transparent-checkbox"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t(
+                                                    'export_image_dialog.transparent'
+                                                )}
+                                            </label>
+                                            <span className="text-sm text-muted-foreground">
+                                                {t(
+                                                    'export_image_dialog.transparent_description'
+                                                )}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </AccordionContent>
+                        </AccordionItem>
+                    </Accordion>
                 </div>
                 <DialogFooter className="flex gap-1 md:justify-between">
                     <DialogClose asChild>

src/dialogs/export-sql-dialog/export-sql-dialog.tsx

@@ -140,7 +140,7 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
                             components={[
                                 <a
                                     key={0}
-                                    href="mailto:chartdb.io@gmail.com"
+                                    href="mailto:support@chartdb.io"
                                     target="_blank"
                                     className="text-pink-600 hover:underline"
                                     rel="noreferrer"

src/dialogs/import-database-dialog/import-database-dialog.tsx

@@ -6,6 +6,7 @@ import { ImportDatabase } from '../common/import-database/import-database';
 import type { DatabaseEdition } from '@/lib/domain/database-edition';
 import type { DatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
 import { loadDatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
+import type { Diagram } from '@/lib/domain/diagram';
 import { loadFromDatabaseMetadata } from '@/lib/domain/diagram';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
@@ -13,6 +14,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useReactFlow } from '@xyflow/react';
 import type { BaseDialogProps } from '../common/base-dialog-props';
 import { useAlert } from '@/context/alert-context/alert-context';
+import { sqlImportToDiagram } from '@/lib/data/sql-import';
 
 export interface ImportDatabaseDialogProps extends BaseDialogProps {
     databaseType: DatabaseType;
@@ -22,6 +24,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
     dialog,
     databaseType,
 }) => {
+    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
     const { closeImportDatabaseDialog } = useDialog();
     const { showAlert } = useAlert();
     const {
@@ -54,17 +57,27 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
     }, [dialog.open]);
 
     const importDatabase = useCallback(async () => {
-        const databaseMetadata: DatabaseMetadata =
-            loadDatabaseMetadata(scriptResult);
+        let diagram: Diagram | undefined;
 
-        const diagram = await loadFromDatabaseMetadata({
-            databaseType,
-            databaseMetadata,
-            databaseEdition:
-                databaseEdition?.trim().length === 0
-                    ? undefined
-                    : databaseEdition,
-        });
+        if (importMethod === 'ddl') {
+            diagram = await sqlImportToDiagram({
+                sqlContent: scriptResult,
+                sourceDatabaseType: databaseType,
+                targetDatabaseType: databaseType,
+            });
+        } else {
+            const databaseMetadata: DatabaseMetadata =
+                loadDatabaseMetadata(scriptResult);
+
+            diagram = await loadFromDatabaseMetadata({
+                databaseType,
+                databaseMetadata,
+                databaseEdition:
+                    databaseEdition?.trim().length === 0
+                        ? undefined
+                        : databaseEdition,
+            });
+        }
 
         const tableIdsToRemove = tables
             .filter((table) =>
@@ -308,6 +321,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
 
         closeImportDatabaseDialog();
     }, [
+        importMethod,
         databaseEdition,
         currentDatabaseType,
         updateDatabaseType,
@@ -337,7 +351,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
             }}
         >
             <DialogContent
-                className="flex max-h-screen w-[90vw] flex-col overflow-y-auto md:overflow-visible xl:min-w-[45vw]"
+                className="flex max-h-screen w-full flex-col md:max-w-[900px]"
                 showClose
             >
                 <ImportDatabase
@@ -349,6 +363,8 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
                     setScriptResult={setScriptResult}
                     keepDialogAfterImport
                     title={t('import_database_dialog.title', { diagramName })}
+                    importMethod={importMethod}
+                    setImportMethod={setImportMethod}
                 />
             </DialogContent>
         </Dialog>

src/dialogs/import-dbml-dialog/import-dbml-dialog.tsx

@@ -23,11 +23,16 @@ import { useTranslation } from 'react-i18next';
 import { Editor } from '@/components/code-snippet/code-snippet';
 import { useTheme } from '@/hooks/use-theme';
 import { AlertCircle } from 'lucide-react';
-import { importDBMLToDiagram } from '@/lib/dbml-import';
+import {
+    importDBMLToDiagram,
+    sanitizeDBML,
+    preprocessDBML,
+} from '@/lib/dbml/dbml-import/dbml-import';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { Parser } from '@dbml/core';
 import { useCanvas } from '@/hooks/use-canvas';
 import { setupDBMLLanguage } from '@/components/code-snippet/languages/dbml-language';
+import type { DBTable } from '@/lib/domain/db-table';
 import { useToast } from '@/components/toast/use-toast';
 import { Spinner } from '@/components/spinner/spinner';
 import { debounce } from '@/lib/utils';
@@ -189,8 +194,10 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
             if (!content.trim()) return;
 
             try {
+                const preprocessedContent = preprocessDBML(content);
+                const sanitizedContent = sanitizeDBML(preprocessedContent);
                 const parser = new Parser();
-                parser.parse(content, 'dbml');
+                parser.parse(sanitizedContent, 'dbml');
             } catch (e) {
                 const parsedError = parseDBMLError(e);
                 if (parsedError) {
@@ -245,7 +252,7 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
             const tableIdsToRemove = tables
                 .filter((table) =>
                     importedDiagram.tables?.some(
-                        (t) =>
+                        (t: DBTable) =>
                             t.name === table.name && t.schema === table.schema
                     )
                 )
@@ -254,19 +261,21 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
             const relationshipIdsToRemove = relationships
                 .filter((relationship) => {
                     const sourceTable = tables.find(
-                        (table) => table.id === relationship.sourceTableId
+                        (table: DBTable) =>
+                            table.id === relationship.sourceTableId
                     );
                     const targetTable = tables.find(
-                        (table) => table.id === relationship.targetTableId
+                        (table: DBTable) =>
+                            table.id === relationship.targetTableId
                     );
                     if (!sourceTable || !targetTable) return true;
                     const replacementSourceTable = importedDiagram.tables?.find(
-                        (table) =>
+                        (table: DBTable) =>
                             table.name === sourceTable.name &&
                             table.schema === sourceTable.schema
                     );
                     const replacementTargetTable = importedDiagram.tables?.find(
-                        (table) =>
+                        (table: DBTable) =>
                             table.name === targetTable.name &&
                             table.schema === targetTable.schema
                     );
@@ -330,7 +339,7 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
             }}
         >
             <DialogContent
-                className="flex h-[80vh] max-h-screen flex-col"
+                className="flex h-[80vh] max-h-screen w-full flex-col md:max-w-[900px]"
                 showClose
             >
                 <DialogHeader>

src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx

@@ -65,7 +65,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
     const openDiagram = useCallback(
         (diagramId: string) => {
             if (diagramId) {
-                updateConfig({ defaultDiagramId: diagramId });
+                updateConfig({ config: { defaultDiagramId: diagramId } });
                 navigate(`/diagrams/${diagramId}`);
             }
         },

src/dialogs/table-schema-dialog/table-schema-dialog.tsx

@@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next';
 export interface TableSchemaDialogProps extends BaseDialogProps {
     table?: DBTable;
     schemas: DBSchema[];
-    onConfirm: (schema: string) => void;
+    onConfirm: ({ schema }: { schema: DBSchema }) => void;
 }
 
 export const TableSchemaDialog: React.FC<TableSchemaDialogProps> = ({
@@ -31,7 +31,7 @@ export const TableSchemaDialog: React.FC<TableSchemaDialogProps> = ({
     onConfirm,
 }) => {
     const { t } = useTranslation();
-    const [selectedSchema, setSelectedSchema] = React.useState<string>(
+    const [selectedSchemaId, setSelectedSchemaId] = React.useState<string>(
         table?.schema
             ? schemaNameToSchemaId(table.schema)
             : (schemas?.[0]?.id ?? '')
@@ -39,7 +39,7 @@ export const TableSchemaDialog: React.FC<TableSchemaDialogProps> = ({
 
     useEffect(() => {
         if (!dialog.open) return;
-        setSelectedSchema(
+        setSelectedSchemaId(
             table?.schema
                 ? schemaNameToSchemaId(table.schema)
                 : (schemas?.[0]?.id ?? '')
@@ -48,8 +48,11 @@ export const TableSchemaDialog: React.FC<TableSchemaDialogProps> = ({
     const { closeTableSchemaDialog } = useDialog();
 
     const handleConfirm = useCallback(() => {
-        onConfirm(selectedSchema);
-    }, [onConfirm, selectedSchema]);
+        const schema = schemas.find((s) => s.id === selectedSchemaId);
+        if (!schema) return;
+
+        onConfirm({ schema });
+    }, [onConfirm, selectedSchemaId, schemas]);
 
     const schemaOptions: SelectBoxOption[] = useMemo(
         () =>
@@ -89,9 +92,9 @@ export const TableSchemaDialog: React.FC<TableSchemaDialogProps> = ({
                         <SelectBox
                             options={schemaOptions}
                             multiple={false}
-                            value={selectedSchema}
+                            value={selectedSchemaId}
                             onChange={(value) =>
-                                setSelectedSchema(value as string)
+                                setSelectedSchemaId(value as string)
                             }
                         />
                     </div>

src/i18n/locales/ar.ts

@@ -42,9 +42,7 @@ export const ar: LanguageTranslation = {
             help: {
                 help: 'مساعدة',
                 docs_website: 'الوثائق',
-                visit_website: 'ChartDB قم بزيارة',
-                join_discord: 'Discord انضم إلينا على',
-                schedule_a_call: '!تحدث معنا',
+                join_discord: 'انضم إلينا على Discord',
             },
         },
 
@@ -76,8 +74,8 @@ export const ar: LanguageTranslation = {
             title: 'مخططات متعددة',
             description:
                 '{{formattedSchemas}} :مخططات في هذا الرسم البياني. يتم حاليا عرض {{schemasCount}} هناك',
-            dont_show_again: 'لا تظهره مجدداً',
-            change_schema: 'تغيير',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'لا شيء',
         },
 
@@ -153,6 +151,8 @@ export const ar: LanguageTranslation = {
                         delete_field: 'حذف الحقل',
                         // TODO: Translate
                         character_length: 'Max Length',
+                        default_value: 'Default Value',
+                        no_default: 'No default',
                     },
                     index_actions: {
                         title: 'خصائص الفهرس',
@@ -212,6 +212,54 @@ export const ar: LanguageTranslation = {
                     description: 'إنشاء اعتماد للبدء',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -223,6 +271,8 @@ export const ar: LanguageTranslation = {
             redo: 'إعادة',
             reorder_diagram: 'إعادة ترتيب الرسم البياني',
             highlight_overlapping_tables: 'تمييز الجداول المتداخلة',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -238,7 +288,7 @@ export const ar: LanguageTranslation = {
                 title: 'إسترد قاعدة بياناتك',
                 database_edition: ':إصدار قاعدة البيانات',
                 step_1: ':قم بتشغيل هذا البرنامج النصي في قاعدة بياناتك',
-                step_2: ':إلصق نتيجة البرنامج النصي هنا',
+                step_2: ':إلصق نتيجة البرنامج النصي هنا →',
                 script_results_placeholder: '...نتيجة البرنامج النصي هنا',
                 ssms_instructions: {
                     button_text: 'SSMS تعليمات',
@@ -332,6 +382,12 @@ export const ar: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'إلغاء',
             export: 'تصدير',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -364,7 +420,7 @@ export const ar: LanguageTranslation = {
             error: {
                 title: 'حدث خطأ أثناء التصدير',
                 description:
-                    'chartdb.io@gmail.com حدث خطأ ما. هل تحتاج إلى مساعدة؟',
+                    'support@chartdb.io حدث خطأ ما. هل تحتاج إلى مساعدة؟',
             },
         },
         import_diagram_dialog: {
@@ -375,7 +431,7 @@ export const ar: LanguageTranslation = {
             error: {
                 title: 'حدث خطأ أثناء الاستيراد',
                 description:
-                    'chartdb.io@gmail.com و المحاولة مرة اخرى. هل تحتاج إلى المساعدة؟ JSON غير صالح. يرجى التحقق من JSON الرسم البياني',
+                    'support@chartdb.io و المحاولة مرة اخرى. هل تحتاج إلى المساعدة؟ JSON غير صالح. يرجى التحقق من JSON الرسم البياني',
             },
         },
         import_dbml_dialog: {
@@ -402,6 +458,8 @@ export const ar: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'جدول جديد',
             new_relationship: 'علاقة جديدة',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/bn.ts

@@ -43,9 +43,7 @@ export const bn: LanguageTranslation = {
             help: {
                 help: 'সাহায্য',
                 docs_website: 'ডকুমেন্টেশন',
-                visit_website: 'ChartDB ওয়েবসাইটে যান',
                 join_discord: 'আমাদের Discord-এ যোগ দিন',
-                schedule_a_call: 'আমাদের সাথে কথা বলুন!',
             },
         },
 
@@ -77,8 +75,8 @@ export const bn: LanguageTranslation = {
             title: 'বহু স্কিমা',
             description:
                 '{{schemasCount}} স্কিমা এই ডায়াগ্রামে রয়েছে। বর্তমানে প্রদর্শিত: {{formattedSchemas}}।',
-            dont_show_again: 'পুনরায় দেখাবেন না',
-            change_schema: 'পরিবর্তন করুন',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'কিছুই না',
         },
 
@@ -153,6 +151,9 @@ export const bn: LanguageTranslation = {
                         no_comments: 'কোনো মন্তব্য নেই',
                         delete_field: 'ফিল্ড মুছুন',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -213,6 +214,53 @@ export const bn: LanguageTranslation = {
                     description: 'এই অংশে কোনো নির্ভরতা উপলব্ধ নেই।',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -224,6 +272,8 @@ export const bn: LanguageTranslation = {
             redo: 'পুনরায় করুন',
             reorder_diagram: 'ডায়াগ্রাম পুনর্বিন্যাস করুন',
             highlight_overlapping_tables: 'ওভারল্যাপিং টেবিল হাইলাইট করুন',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -239,7 +289,7 @@ export const bn: LanguageTranslation = {
                 title: 'আপনার ডাটাবেস আমদানি করুন',
                 database_edition: 'ডাটাবেস সংস্করণ:',
                 step_1: 'আপনার ডাটাবেসে এই স্ক্রিপ্ট চালান:',
-                step_2: 'স্ক্রিপ্টের ফলাফল এখানে পেস্ট করুন:',
+                step_2: 'স্ক্রিপ্টের ফলাফল এখানে পেস্ট করুন →',
                 script_results_placeholder: 'স্ক্রিপ্টের ফলাফল এখানে...',
                 ssms_instructions: {
                     button_text: 'SSMS নির্দেশনা',
@@ -333,6 +383,12 @@ export const bn: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'বাতিল করুন',
             export: 'রপ্তানি করুন',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -367,7 +423,7 @@ export const bn: LanguageTranslation = {
             error: {
                 title: 'চিত্র রপ্তানিতে ত্রুটি',
                 description:
-                    'কিছু ভুল হয়েছে। সাহায্যের প্রয়োজন? chartdb.io@gmail.com-এ যোগাযোগ করুন।',
+                    'কিছু ভুল হয়েছে। সাহায্যের প্রয়োজন? support@chartdb.io-এ যোগাযোগ করুন।',
             },
         },
 
@@ -379,7 +435,7 @@ export const bn: LanguageTranslation = {
             error: {
                 title: 'চিত্র আমদানিতে ত্রুটি',
                 description:
-                    'ডায়াগ্রাম JSON অবৈধ। অনুগ্রহ করে JSON পরীক্ষা করুন এবং আবার চেষ্টা করুন। সাহায্যের প্রয়োজন? chartdb.io@gmail.com-এ যোগাযোগ করুন।',
+                    'ডায়াগ্রাম JSON অবৈধ। অনুগ্রহ করে JSON পরীক্ষা করুন এবং আবার চেষ্টা করুন। সাহায্যের প্রয়োজন? support@chartdb.io-এ যোগাযোগ করুন।',
             },
         },
         // TODO: Translate
@@ -406,6 +462,8 @@ export const bn: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'নতুন টেবিল',
             new_relationship: 'নতুন সম্পর্ক',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/de.ts

@@ -43,9 +43,7 @@ export const de: LanguageTranslation = {
             help: {
                 help: 'Hilfe',
                 docs_website: 'Dokumentation',
-                visit_website: 'ChartDB Webseite',
                 join_discord: 'Auf Discord beitreten',
-                schedule_a_call: 'Gespräch vereinbaren',
             },
         },
 
@@ -77,8 +75,8 @@ export const de: LanguageTranslation = {
             title: 'Mehrere Schemas',
             description:
                 '{{schemasCount}} Schemas in diesem Diagramm. Derzeit angezeigt: {{formattedSchemas}}.',
-            dont_show_again: 'Nicht erneut anzeigen',
-            change_schema: 'Schema ändern',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'Keine',
         },
 
@@ -154,6 +152,9 @@ export const de: LanguageTranslation = {
                         no_comments: 'Keine Kommentare',
                         delete_field: 'Feld löschen',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -215,6 +216,53 @@ export const de: LanguageTranslation = {
                     description: 'Erstellen Sie eine Ansicht, um zu beginnen',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -226,6 +274,8 @@ export const de: LanguageTranslation = {
             redo: 'Wiederholen',
             reorder_diagram: 'Diagramm neu anordnen',
             highlight_overlapping_tables: 'Überlappende Tabellen hervorheben',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -241,7 +291,7 @@ export const de: LanguageTranslation = {
                 title: 'Datenbank importieren',
                 database_edition: 'Datenbank Edition:',
                 step_1: 'Führen Sie dieses Skript in Ihrer Datenbank aus:',
-                step_2: 'Fügen Sie das Skriptergebnis hier ein:',
+                step_2: 'Fügen Sie das Skriptergebnis hier ein →',
                 script_results_placeholder: 'Skriptergebnisse hier...',
                 ssms_instructions: {
                     button_text: 'SSMS Anweisungen',
@@ -336,6 +386,12 @@ export const de: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Abbrechen',
             export: 'Exportieren',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -370,7 +426,7 @@ export const de: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -382,7 +438,7 @@ export const de: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -409,6 +465,8 @@ export const de: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Neue Tabelle',
             new_relationship: 'Neue Beziehung',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/en.ts

@@ -41,9 +41,7 @@ export const en = {
             help: {
                 help: 'Help',
                 docs_website: 'Docs',
-                visit_website: 'Visit ChartDB',
                 join_discord: 'Join us on Discord',
-                schedule_a_call: 'Talk with us!',
             },
         },
 
@@ -75,8 +73,7 @@ export const en = {
             title: 'Multiple Schemas',
             description:
                 '{{schemasCount}} schemas in this diagram. Currently displaying: {{formattedSchemas}}.',
-            dont_show_again: "Don't show again",
-            change_schema: 'Change',
+            show_me: 'Show me',
             none: 'none',
         },
 
@@ -148,6 +145,8 @@ export const en = {
                         character_length: 'Max Length',
                         comments: 'Comments',
                         no_comments: 'No comments',
+                        default_value: 'Default Value',
+                        no_default: 'No default',
                         delete_field: 'Delete Field',
                     },
                     index_actions: {
@@ -208,6 +207,52 @@ export const en = {
                     description: 'Create a view to get started',
                 },
             },
+
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -219,6 +264,7 @@ export const en = {
             redo: 'Redo',
             reorder_diagram: 'Reorder Diagram',
             highlight_overlapping_tables: 'Highlight Overlapping Tables',
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -234,7 +280,7 @@ export const en = {
                 title: 'Import your Database',
                 database_edition: 'Database Edition:',
                 step_1: 'Run this script in your database:',
-                step_2: 'Paste the script result here:',
+                step_2: 'Paste the script result into this modal →',
                 script_results_placeholder: 'Script results here...',
                 ssms_instructions: {
                     button_text: 'SSMS Instructions',
@@ -328,6 +374,11 @@ export const en = {
             scale_4x: '4x',
             cancel: 'Cancel',
             export: 'Export',
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -361,7 +412,7 @@ export const en = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
 
@@ -373,7 +424,7 @@ export const en = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
 
@@ -400,6 +451,7 @@ export const en = {
         canvas_context_menu: {
             new_table: 'New Table',
             new_relationship: 'New Relationship',
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/es.ts

@@ -42,9 +42,7 @@ export const es: LanguageTranslation = {
             help: {
                 help: 'Ayuda',
                 docs_website: 'Documentación',
-                visit_website: 'Visitar ChartDB',
                 join_discord: 'Únete a nosotros en Discord',
-                schedule_a_call: '¡Habla con nosotros!',
             },
         },
 
@@ -143,6 +141,9 @@ export const es: LanguageTranslation = {
                         no_comments: 'Sin comentarios',
                         delete_field: 'Eliminar Campo',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -203,6 +204,53 @@ export const es: LanguageTranslation = {
                     description: 'Crea una vista para comenzar',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -214,6 +262,8 @@ export const es: LanguageTranslation = {
             redo: 'Rehacer',
             reorder_diagram: 'Reordenar Diagrama',
             highlight_overlapping_tables: 'Resaltar tablas superpuestas',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -229,7 +279,7 @@ export const es: LanguageTranslation = {
                 title: 'Importa tu Base de Datos',
                 database_edition: 'Edición de Base de Datos:',
                 step_1: 'Ejecuta este script en tu base de datos:',
-                step_2: 'Pega el resultado del script aquí:',
+                step_2: 'Pega el resultado del script aquí →',
                 script_results_placeholder: 'Resultados del script aquí...',
                 ssms_instructions: {
                     button_text: 'Instrucciones SSMS',
@@ -325,6 +375,12 @@ export const es: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Cancelar',
             export: 'Exportar',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -354,8 +410,8 @@ export const es: LanguageTranslation = {
             title: 'Múltiples Esquemas',
             description:
                 '{{schemasCount}} esquemas en este diagrama. Actualmente mostrando: {{formattedSchemas}}.',
-            dont_show_again: 'No mostrar de nuevo',
-            change_schema: 'Cambiar',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'nada',
         },
         // TODO: Translate
@@ -368,7 +424,7 @@ export const es: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -380,7 +436,7 @@ export const es: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -407,6 +463,8 @@ export const es: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Nueva Tabla',
             new_relationship: 'Nueva Relación',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/fr.ts

@@ -41,9 +41,7 @@ export const fr: LanguageTranslation = {
             help: {
                 help: 'Aide',
                 docs_website: 'Documentation',
-                visit_website: 'Visitez ChartDB',
                 join_discord: 'Rejoignez-nous sur Discord',
-                schedule_a_call: 'Parlez avec nous !',
             },
         },
 
@@ -141,6 +139,9 @@ export const fr: LanguageTranslation = {
                         no_comments: 'Pas de commentaires',
                         delete_field: 'Supprimer le Champ',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -201,6 +202,53 @@ export const fr: LanguageTranslation = {
                     description: 'Créez une vue pour commencer',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -212,6 +260,8 @@ export const fr: LanguageTranslation = {
             redo: 'Rétablir',
             reorder_diagram: 'Réorganiser le Diagramme',
             highlight_overlapping_tables: 'Surligner les tables chevauchées',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -227,7 +277,7 @@ export const fr: LanguageTranslation = {
                 title: 'Importer votre Base de Données',
                 database_edition: 'Édition de la Base de Données :',
                 step_1: 'Exécutez ce script dans votre base de données :',
-                step_2: 'Collez le résultat du script ici :',
+                step_2: 'Collez le résultat du script ici →',
                 script_results_placeholder: 'Résultats du script ici...',
                 ssms_instructions: {
                     button_text: 'Instructions SSMS',
@@ -288,14 +338,20 @@ export const fr: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Annuler',
             export: 'Exporter',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         multiple_schemas_alert: {
             title: 'Schémas Multiples',
             description:
                 '{{schemasCount}} schémas dans ce diagramme. Actuellement affiché(s) : {{formattedSchemas}}.',
-            dont_show_again: 'Ne plus afficher',
-            change_schema: 'Changer',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'Aucun',
         },
 
@@ -365,7 +421,7 @@ export const fr: LanguageTranslation = {
             error: {
                 title: "Erreur lors de l'exportation du diagramme",
                 description:
-                    "Une erreur s'est produite. Besoin d'aide ? chartdb.io@gmail.com",
+                    "Une erreur s'est produite. Besoin d'aide ? support@chartdb.io",
             },
         },
         import_diagram_dialog: {
@@ -376,7 +432,7 @@ export const fr: LanguageTranslation = {
             error: {
                 title: "Erreur lors de l'exportation du diagramme",
                 description:
-                    "Le diagramme JSON n'est pas valide. Veuillez vérifier le JSON et réessayer. Besoin d'aide ? chartdb.io@gmail.com",
+                    "Le diagramme JSON n'est pas valide. Veuillez vérifier le JSON et réessayer. Besoin d'aide ? support@chartdb.io",
             },
         },
         import_dbml_dialog: {
@@ -404,6 +460,8 @@ export const fr: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Nouvelle Table',
             new_relationship: 'Nouvelle Relation',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/gu.ts

@@ -43,9 +43,7 @@ export const gu: LanguageTranslation = {
             help: {
                 help: 'મદદ',
                 docs_website: 'દસ્તાવેજીકરણ',
-                visit_website: 'ChartDB વેબસાઇટ પર જાઓ',
                 join_discord: 'અમારા Discordમાં જોડાઓ',
-                schedule_a_call: 'અમારી સાથે વાત કરો!',
             },
         },
 
@@ -77,8 +75,8 @@ export const gu: LanguageTranslation = {
             title: 'કઈંક વધારે સ્કીમા',
             description:
                 '{{schemasCount}} સ્કીમા આ ડાયાગ્રામમાં છે. હાલમાં દર્શાવેલ છે: {{formattedSchemas}}.',
-            dont_show_again: 'ફરીથી ન બતાવો',
-            change_schema: 'બદલો',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'કઈ નહીં',
         },
 
@@ -154,6 +152,9 @@ export const gu: LanguageTranslation = {
                         no_comments: 'કોઈ ટિપ્પણીઓ નથી',
                         delete_field: 'ફીલ્ડ કાઢી નાખો',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -214,6 +215,53 @@ export const gu: LanguageTranslation = {
                     description: 'આ વિભાગમાં કોઈ નિર્ભરતા ઉપલબ્ધ નથી.',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -225,6 +273,8 @@ export const gu: LanguageTranslation = {
             redo: 'રીડુ',
             reorder_diagram: 'ડાયાગ્રામ ફરીથી વ્યવસ્થિત કરો',
             highlight_overlapping_tables: 'ઓવરલેપ કરતો ટેબલ હાઇલાઇટ કરો',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -239,7 +289,7 @@ export const gu: LanguageTranslation = {
                 title: 'તમારું ડેટાબેસ આયાત કરો',
                 database_edition: 'ડેટાબેસ આવૃત્તિ:',
                 step_1: 'તમારા ડેટાબેસમાં આ સ્ક્રિપ્ટ ચલાવો:',
-                step_2: 'સ્ક્રિપ્ટનો પરિણામ અહીં પેસ્ટ કરો:',
+                step_2: 'સ્ક્રિપ્ટનો પરિણામ અહીં પેસ્ટ કરો →',
                 script_results_placeholder: 'સ્ક્રિપ્ટના પરિણામ અહીં...',
                 ssms_instructions: {
                     button_text: 'SSMS સૂચનાઓ',
@@ -333,6 +383,12 @@ export const gu: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'રદ કરો',
             export: 'નિકાસ કરો',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -367,7 +423,7 @@ export const gu: LanguageTranslation = {
             error: {
                 title: 'ડાયાગ્રામ નિકાસમાં ભૂલ',
                 description:
-                    'કશુક તો ખોટું થયું. મદદ જોઈએ? chartdb.io@gmail.com પર સંપર્ક કરો.',
+                    'કશુક તો ખોટું થયું. મદદ જોઈએ? support@chartdb.io પર સંપર્ક કરો.',
             },
         },
 
@@ -379,7 +435,7 @@ export const gu: LanguageTranslation = {
             error: {
                 title: 'ડાયાગ્રામ આયાતમાં ભૂલ',
                 description:
-                    'ડાયાગ્રામ JSON અમાન્ય છે. કૃપા કરીને JSON તપાસો અને ફરી પ્રયાસ કરો. મદદ જોઈએ? chartdb.io@gmail.com પર સંપર્ક કરો.',
+                    'ડાયાગ્રામ JSON અમાન્ય છે. કૃપા કરીને JSON તપાસો અને ફરી પ્રયાસ કરો. મદદ જોઈએ? support@chartdb.io પર સંપર્ક કરો.',
             },
         },
         // TODO: Translate
@@ -406,6 +462,8 @@ export const gu: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'નવું ટેબલ',
             new_relationship: 'નવો સંબંધ',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/hi.ts

@@ -42,9 +42,7 @@ export const hi: LanguageTranslation = {
             help: {
                 help: 'मदद',
                 docs_website: 'દસ્તાવેજીકરણ',
-                visit_website: 'ChartDB वेबसाइट पर जाएँ',
                 join_discord: 'हमसे Discord पर जुड़ें',
-                schedule_a_call: 'हमसे बात करें!',
             },
         },
 
@@ -76,8 +74,8 @@ export const hi: LanguageTranslation = {
             title: 'एकाधिक स्कीमा',
             description:
                 '{{schemasCount}} स्कीमा इस आरेख में हैं। वर्तमान में प्रदर्शित: {{formattedSchemas}}।',
-            dont_show_again: 'फिर से न दिखाएँ',
-            change_schema: 'बदलें',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'कोई नहीं',
         },
 
@@ -153,6 +151,9 @@ export const hi: LanguageTranslation = {
                         no_comments: 'कोई टिप्पणी नहीं',
                         delete_field: 'फ़ील्ड हटाएँ',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -214,6 +215,53 @@ export const hi: LanguageTranslation = {
                     description: 'इस अनुभाग में कोई निर्भरता उपलब्ध नहीं है।',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -225,6 +273,8 @@ export const hi: LanguageTranslation = {
             redo: 'पुनः करें',
             reorder_diagram: 'आरेख पुनः व्यवस्थित करें',
             highlight_overlapping_tables: 'ओवरलैपिंग तालिकाओं को हाइलाइट करें',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -240,7 +290,7 @@ export const hi: LanguageTranslation = {
                 title: 'अपना डेटाबेस आयात करें',
                 database_edition: 'डेटाबेस संस्करण:',
                 step_1: 'अपने डेटाबेस में यह स्क्रिप्ट चलाएँ:',
-                step_2: 'यहाँ स्क्रिप्ट का परिणाम पेस्ट करें:',
+                step_2: 'यहाँ स्क्रिप्ट का परिणाम पेस्ट करें →',
                 script_results_placeholder: 'स्क्रिप्ट के परिणाम यहाँ...',
                 ssms_instructions: {
                     button_text: 'SSMS निर्देश',
@@ -336,6 +386,12 @@ export const hi: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'रद्द करें',
             export: 'निर्यात करें',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -370,7 +426,7 @@ export const hi: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -382,7 +438,7 @@ export const hi: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -409,6 +465,8 @@ export const hi: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'नई तालिका',
             new_relationship: 'नया संबंध',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/id_ID.ts

@@ -41,10 +41,8 @@ export const id_ID: LanguageTranslation = {
             },
             help: {
                 help: 'Bantuan',
-                docs_website: 'દસ્તાવેજીકરણ',
-                visit_website: 'Kunjungi ChartDB',
+                docs_website: 'Dokumentasi',
                 join_discord: 'Bergabunglah di Discord kami',
-                schedule_a_call: 'Berbicara dengan kami!',
             },
         },
 
@@ -76,8 +74,8 @@ export const id_ID: LanguageTranslation = {
             title: 'Schema Lebih dari satu',
             description:
                 '{{schemasCount}} schema di diagram ini. Sedang ditampilkan: {{formattedSchemas}}.',
-            dont_show_again: 'Jangan tampilkan lagi',
-            change_schema: 'Ubah',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'Tidak ada',
         },
 
@@ -152,6 +150,9 @@ export const id_ID: LanguageTranslation = {
                         no_comments: 'Tidak ada komentar',
                         delete_field: 'Hapus Kolom',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -212,6 +213,53 @@ export const id_ID: LanguageTranslation = {
                     description: 'Buat tampilan untuk memulai',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -223,6 +271,8 @@ export const id_ID: LanguageTranslation = {
             redo: 'Redo',
             reorder_diagram: 'Atur Ulang Diagram',
             highlight_overlapping_tables: 'Sorot Tabel yang Tumpang Tindih',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -238,7 +288,7 @@ export const id_ID: LanguageTranslation = {
                 title: 'Impor Database Anda',
                 database_edition: 'Edisi Database:',
                 step_1: 'Jalankan skrip ini di database Anda:',
-                step_2: 'Tempel hasil skrip di sini:',
+                step_2: 'Tempel hasil skrip di sini →',
                 script_results_placeholder: 'Hasil skrip di sini...',
                 ssms_instructions: {
                     button_text: 'Instruksi SSMS',
@@ -331,6 +381,12 @@ export const id_ID: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Batal',
             export: 'Ekspor',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -365,7 +421,7 @@ export const id_ID: LanguageTranslation = {
             error: {
                 title: 'Error ekspor diagram',
                 description:
-                    'Sesuatu yang salah. Butuh bantuan? chartdb.io@gmail.com',
+                    'Sesuatu yang salah. Butuh bantuan? support@chartdb.io',
             },
         },
 
@@ -377,7 +433,7 @@ export const id_ID: LanguageTranslation = {
             error: {
                 title: 'Error impor diagram',
                 description:
-                    'Diagram JSON tidak valid. Silakan cek JSON dan coba lagi. Butuh bantuan? chartdb.io@gmail.com',
+                    'Diagram JSON tidak valid. Silakan cek JSON dan coba lagi. Butuh bantuan? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -405,6 +461,8 @@ export const id_ID: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Tabel Baru',
             new_relationship: 'Hubungan Baru',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/ja.ts

@@ -44,9 +44,7 @@ export const ja: LanguageTranslation = {
             help: {
                 help: 'ヘルプ',
                 docs_website: 'ドキュメント',
-                visit_website: 'ChartDBにアクセス',
                 join_discord: 'Discordに参加',
-                schedule_a_call: '話しかけてください！',
             },
         },
 
@@ -78,8 +76,8 @@ export const ja: LanguageTranslation = {
             title: '複数のスキーマ',
             description:
                 'このダイアグラムには{{schemasCount}}個のスキーマがあります。現在表示中: {{formattedSchemas}}。',
-            dont_show_again: '再表示しない',
-            change_schema: '変更',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'なし',
         },
 
@@ -156,6 +154,9 @@ export const ja: LanguageTranslation = {
                         no_comments: 'コメントがありません',
                         delete_field: 'フィールドを削除',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -218,6 +219,53 @@ export const ja: LanguageTranslation = {
                     description: 'Create a view to get started',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -230,6 +278,8 @@ export const ja: LanguageTranslation = {
             reorder_diagram: 'ダイアグラムを並べ替え',
             // TODO: Translate
             highlight_overlapping_tables: 'Highlight Overlapping Tables',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -244,7 +294,7 @@ export const ja: LanguageTranslation = {
                 title: 'データベースをインポート',
                 database_edition: 'データベースエディション:',
                 step_1: 'このスクリプトをデータベースで実行してください:',
-                step_2: 'ここにスクリプトの結果を貼り付けてください:',
+                step_2: 'ここにスクリプトの結果を貼り付けてください →',
                 script_results_placeholder: 'ここにスクリプトの結果...',
                 ssms_instructions: {
                     button_text: 'SSMSの手順',
@@ -340,6 +390,12 @@ export const ja: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'キャンセル',
             export: 'エクスポート',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -374,7 +430,7 @@ export const ja: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -386,7 +442,7 @@ export const ja: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -413,6 +469,8 @@ export const ja: LanguageTranslation = {
         canvas_context_menu: {
             new_table: '新しいテーブル',
             new_relationship: '新しいリレーションシップ',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/ko_KR.ts

@@ -42,9 +42,7 @@ export const ko_KR: LanguageTranslation = {
             help: {
                 help: '도움말',
                 docs_website: '선적 서류 비치',
-                visit_website: 'ChartDB 사이트 방문',
                 join_discord: 'Discord 가입',
-                schedule_a_call: 'Talk with us!',
             },
         },
 
@@ -76,8 +74,8 @@ export const ko_KR: LanguageTranslation = {
             title: '다중 스키마',
             description:
                 '현재 다이어그램에 {{schemasCount}}개의 스키마가 있습니다. Currently displaying: {{formattedSchemas}}.',
-            dont_show_again: '다시 보여주지 마세요',
-            change_schema: '변경',
+            // TODO: Translate
+            show_me: 'Show me',
             none: '없음',
         },
 
@@ -152,6 +150,9 @@ export const ko_KR: LanguageTranslation = {
                         no_comments: '주석 없음',
                         delete_field: '필드 삭제',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -212,6 +213,53 @@ export const ko_KR: LanguageTranslation = {
                     description: '뷰 테이블을 만들어 시작하세요.',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -223,6 +271,8 @@ export const ko_KR: LanguageTranslation = {
             redo: '다시 실행',
             reorder_diagram: '다이어그램 재정렬',
             highlight_overlapping_tables: '겹치는 테이블 강조 표시',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -238,7 +288,7 @@ export const ko_KR: LanguageTranslation = {
                 title: '당신의 데이터베이스를 가져오세요',
                 database_edition: '데이터베이스 세부 종류:',
                 step_1: '데이터베이스에서 아래의 SQL을 실행해주세요:',
-                step_2: '이곳에 결과를 붙여넣어주세요:',
+                step_2: '이곳에 결과를 붙여넣어주세요 →',
                 script_results_placeholder: '이곳에 스크립트 결과를 입력...',
                 ssms_instructions: {
                     button_text: 'SSMS을 사용하시는 경우',
@@ -331,6 +381,12 @@ export const ko_KR: LanguageTranslation = {
             scale_4x: '4x',
             cancel: '취소',
             export: '내보내기',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -364,7 +420,7 @@ export const ko_KR: LanguageTranslation = {
             error: {
                 title: '다이어그램 내보내기 오류',
                 description:
-                    '무언가 문제가 발생하였습니다. 도움이 필요하신 경우 chartdb.io@gmail.com으로 연락해주세요.',
+                    '무언가 문제가 발생하였습니다. 도움이 필요하신 경우 support@chartdb.io으로 연락해주세요.',
             },
         },
         import_diagram_dialog: {
@@ -375,7 +431,7 @@ export const ko_KR: LanguageTranslation = {
             error: {
                 title: '다이어그램 가져오기 오류',
                 description:
-                    '다이어그램 JSON이 유효하지 않습니다. JSON이 올바른 형식인지 확인해주세요. 도움이 필요하신 경우 chartdb.io@gmail.com으로 연락해주세요.',
+                    '다이어그램 JSON이 유효하지 않습니다. JSON이 올바른 형식인지 확인해주세요. 도움이 필요하신 경우 support@chartdb.io으로 연락해주세요.',
             },
         },
         // TODO: Translate
@@ -402,6 +458,8 @@ export const ko_KR: LanguageTranslation = {
         canvas_context_menu: {
             new_table: '새 테이블',
             new_relationship: '새 연관관계',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/mr.ts

@@ -43,9 +43,7 @@ export const mr: LanguageTranslation = {
             help: {
                 help: 'मदत',
                 docs_website: 'दस्तऐवजीकरण',
-                visit_website: 'ChartDB ला भेट द्या',
                 join_discord: 'आमच्या डिस्कॉर्डमध्ये सामील व्हा',
-                schedule_a_call: 'आमच्याशी बोला!',
             },
         },
 
@@ -77,8 +75,8 @@ export const mr: LanguageTranslation = {
             title: 'एकाधिक स्कीमा',
             description:
                 '{{schemasCount}} स्कीमा या आरेखात आहेत. सध्या दाखवत आहोत: {{formattedSchemas}}.',
-            dont_show_again: 'पुन्हा दाखवू नका',
-            change_schema: 'बदला',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'काहीही नाही',
         },
 
@@ -155,6 +153,9 @@ export const mr: LanguageTranslation = {
                         no_comments: 'कोणत्याही टिप्पणी नाहीत',
                         delete_field: 'फील्ड हटवा',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -217,6 +218,53 @@ export const mr: LanguageTranslation = {
                     description: 'सुरू करण्यासाठी एक दृश्य तयार करा',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -228,6 +276,8 @@ export const mr: LanguageTranslation = {
             redo: 'पुन्हा करा',
             reorder_diagram: 'आरेख पुनःक्रमित करा',
             highlight_overlapping_tables: 'ओव्हरलॅपिंग टेबल्स हायलाइट करा',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -243,7 +293,7 @@ export const mr: LanguageTranslation = {
                 title: 'तुमचा डेटाबेस आयात करा',
                 database_edition: 'डेटाबेस संस्करण:',
                 step_1: 'तुमच्या डेटाबेसमध्ये हा स्क्रिप्ट चालवा:',
-                step_2: 'स्क्रिप्टचा परिणाम येथे पेस्ट करा:',
+                step_2: 'स्क्रिप्टचा परिणाम येथे पेस्ट करा →',
                 script_results_placeholder: 'स्क्रिप्ट परिणाम येथे...',
                 ssms_instructions: {
                     button_text: 'SSMS सूचना',
@@ -339,6 +389,12 @@ export const mr: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'रद्द करा',
             export: 'निर्यात करा',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -374,7 +430,7 @@ export const mr: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
 
@@ -387,7 +443,7 @@ export const mr: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -415,6 +471,8 @@ export const mr: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'नवीन टेबल',
             new_relationship: 'नवीन रिलेशनशिप',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/ne.ts

@@ -43,9 +43,7 @@ export const ne: LanguageTranslation = {
             help: {
                 help: 'मद्दत',
                 docs_website: 'कागजात',
-                visit_website: 'वेबसाइटमा जानुहोस्',
                 join_discord: 'डिस्कोर्डमा सामिल हुनुहोस्',
-                schedule_a_call: 'कल अनुसूची गर्नुहोस्',
             },
         },
 
@@ -77,8 +75,8 @@ export const ne: LanguageTranslation = {
             title: 'विविध स्कीमहरू',
             description:
                 '{{schemasCount}} डायाग्राममा स्कीमहरू। हालको रूपमा देखाइएको छ: {{formattedSchemas}}।',
-            dont_show_again: 'फेरि देखाउन नदिनुहोस्',
-            change_schema: 'स्कीम परिवर्तन गर्नुहोस्',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'कुनै पनि छैन',
         },
 
@@ -153,6 +151,9 @@ export const ne: LanguageTranslation = {
                         no_comments: 'कुनै टिप्पणीहरू छैनन्',
                         delete_field: 'क्षेत्र हटाउनुहोस्',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -214,6 +215,53 @@ export const ne: LanguageTranslation = {
                         'डिपेन्डेन्सीहरू देखाउनका लागि एक व्यू बनाउनुहोस्',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -226,6 +274,8 @@ export const ne: LanguageTranslation = {
             reorder_diagram: 'पुनः क्रमबद्ध गर्नुहोस्',
             highlight_overlapping_tables:
                 'अतिरिक्त तालिकाहरू हाइलाइट गर्नुहोस्',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -241,7 +291,7 @@ export const ne: LanguageTranslation = {
                 title: 'तपाईंको डाटाबेस आयात गर्नुहोस्',
                 database_edition: 'डाटाबेस संस्करण:',
                 step_1: 'तपाईंको डाटाबेसमा यो स्क्रिप्ट चलाउनुहोस्:',
-                step_2: 'यो स्क्रिप्ट परिणाम यहाँ पेस्ट गर्नुहोस्:',
+                step_2: 'यो स्क्रिप्ट परिणाम यहाँ पेस्ट गर्नुहोस् →',
                 script_results_placeholder: 'स्क्रिप्ट परिणाम यहाँ...',
                 ssms_instructions: {
                     button_text: 'SSMS निर्देशन',
@@ -336,6 +386,12 @@ export const ne: LanguageTranslation = {
             scale_4x: '४x',
             cancel: 'रद्द गर्नुहोस्',
             export: 'निर्यात गर्नुहोस्',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -369,7 +425,7 @@ export const ne: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
 
@@ -381,7 +437,7 @@ export const ne: LanguageTranslation = {
             error: {
                 title: 'डायाग्राम आयात गर्दा समस्या आयो',
                 description:
-                    'डायाग्राम JSON अमान्य छ। कृपया JSON जाँच गर्नुहोस् र पुन: प्रयास गर्नुहोस्। मद्दत चाहिन्छ? chartdb.io@gmail.com मा सम्पर्क गर्नुहोस्',
+                    'डायाग्राम JSON अमान्य छ। कृपया JSON जाँच गर्नुहोस् र पुन: प्रयास गर्नुहोस्। मद्दत चाहिन्छ? support@chartdb.io मा सम्पर्क गर्नुहोस्',
             },
         },
         // TODO: Translate
@@ -409,6 +465,8 @@ export const ne: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'नयाँ तालिका',
             new_relationship: 'नयाँ सम्बन्ध',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/pt_BR.ts

@@ -43,9 +43,7 @@ export const pt_BR: LanguageTranslation = {
             help: {
                 help: 'Ajuda',
                 docs_website: 'Documentação',
-                visit_website: 'Visitar ChartDB',
                 join_discord: 'Junte-se a nós no Discord',
-                schedule_a_call: 'Fale Conosco!',
             },
         },
 
@@ -77,8 +75,8 @@ export const pt_BR: LanguageTranslation = {
             title: 'Múltiplos Esquemas',
             description:
                 '{{schemasCount}} esquemas neste diagrama. Atualmente exibindo: {{formattedSchemas}}.',
-            dont_show_again: 'Não mostrar novamente',
-            change_schema: 'Alterar',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'nenhum',
         },
 
@@ -153,6 +151,9 @@ export const pt_BR: LanguageTranslation = {
                         no_comments: 'Sem comentários',
                         delete_field: 'Excluir Campo',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -213,6 +214,53 @@ export const pt_BR: LanguageTranslation = {
                     description: 'Crie uma visualização para começar',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -224,6 +272,8 @@ export const pt_BR: LanguageTranslation = {
             redo: 'Refazer',
             reorder_diagram: 'Reordenar Diagrama',
             highlight_overlapping_tables: 'Destacar Tabelas Sobrepostas',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -239,7 +289,7 @@ export const pt_BR: LanguageTranslation = {
                 title: 'Importe seu Banco de Dados',
                 database_edition: 'Edição do Banco de Dados:',
                 step_1: 'Execute este script no seu banco de dados:',
-                step_2: 'Cole o resultado do script aqui:',
+                step_2: 'Cole o resultado do script aqui →',
                 script_results_placeholder: 'Resultados do script aqui...',
                 ssms_instructions: {
                     button_text: 'Instruções do SSMS',
@@ -334,6 +384,12 @@ export const pt_BR: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Cancelar',
             export: 'Exportar',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -368,7 +424,7 @@ export const pt_BR: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -380,7 +436,7 @@ export const pt_BR: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -407,6 +463,8 @@ export const pt_BR: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Nova Tabela',
             new_relationship: 'Novo Relacionamento',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/ru.ts

@@ -24,28 +24,24 @@ export const ru: LanguageTranslation = {
                 view: 'Вид',
                 show_sidebar: 'Показать боковую панель',
                 hide_sidebar: 'Скрыть боковую панель',
-                hide_cardinality: 'Скрыть множественность связи',
-                show_cardinality: 'Показать множественность связи',
+                hide_cardinality: 'Скрыть виды связи',
+                show_cardinality: 'Показать виды связи',
                 zoom_on_scroll: 'Увеличение при прокрутке',
                 theme: 'Тема',
                 show_dependencies: 'Показать зависимости',
                 hide_dependencies: 'Скрыть зависимости',
-                // TODO: Translate
-                show_minimap: 'Show Mini Map',
-                hide_minimap: 'Hide Mini Map',
+                show_minimap: 'Показать мини-карту',
+                hide_minimap: 'Скрыть мини-карту',
             },
-            // TODO: Translate
             backup: {
-                backup: 'Backup',
-                export_diagram: 'Export Diagram',
-                restore_diagram: 'Restore Diagram',
+                backup: 'Бэкап',
+                export_diagram: 'Экспорт диаграммы',
+                restore_diagram: 'Восстановить диаграмму',
             },
             help: {
                 help: 'Помощь',
                 docs_website: 'Документация',
-                visit_website: 'Перейти на сайт ChartDB',
                 join_discord: 'Присоединиться к сообществу в Discord',
-                schedule_a_call: 'Поговорите с нами!',
             },
         },
 
@@ -77,8 +73,8 @@ export const ru: LanguageTranslation = {
             title: 'Множественные схемы',
             description:
                 '{{schemasCount}} схем в этой диаграмме. В данный момент отображается: {{formattedSchemas}}.',
-            dont_show_again: 'Больше не показывать',
-            change_schema: 'Изменить',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'никто',
         },
 
@@ -125,17 +121,17 @@ export const ru: LanguageTranslation = {
                 add_table: 'Добавить таблицу',
                 filter: 'Фильтр',
                 collapse: 'Свернуть все',
-                // TODO: Translate
-                clear: 'Clear Filter',
-                no_results: 'No tables found matching your filter.',
-                // TODO: Translate
-                show_list: 'Show Table List',
-                show_dbml: 'Show DBML Editor',
+                clear: 'Очистить фильтр',
+
+                no_results:
+                    'Таблицы не найдены, соответствующие вашему фильтру.',
+                show_list: 'Переключиться на список таблиц',
+                show_dbml: 'Переключиться на редактор DBML',
 
                 table: {
                     fields: 'Поля',
-                    nullable: 'Может содержать NULL?',
-                    primary_key: 'Первичный ключ,',
+                    nullable: 'Может быть NULL?',
+                    primary_key: 'Первичный ключ',
                     indexes: 'Индексы',
                     comments: 'Комментарии',
                     no_comments: 'Нет комментария',
@@ -152,7 +148,9 @@ export const ru: LanguageTranslation = {
                         no_comments: 'Нет комментария',
                         delete_field: 'Удалить поле',
                         // TODO: Translate
-                        character_length: 'Max Length',
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        character_length: 'Макс. длина',
                     },
                     index_actions: {
                         title: 'Атрибуты индекса',
@@ -165,7 +163,7 @@ export const ru: LanguageTranslation = {
                         change_schema: 'Изменить схему',
                         add_field: 'Добавить поле',
                         add_index: 'Добавить индекс',
-                        duplicate_table: 'Duplicate Table', // TODO: Translate
+                        duplicate_table: 'Создать копию',
                         delete_table: 'Удалить таблицу',
                     },
                 },
@@ -182,7 +180,7 @@ export const ru: LanguageTranslation = {
                 relationship: {
                     primary: 'Основная таблица',
                     foreign: 'Справочная таблица',
-                    cardinality: 'Тип множественности связи',
+                    cardinality: 'Тип множественной связи',
                     delete_relationship: 'Удалить',
                     relationship_actions: {
                         title: 'Действия',
@@ -212,6 +210,54 @@ export const ru: LanguageTranslation = {
                     description: 'Создайте представление, чтобы начать',
                 },
             },
+
+            areas_section: {
+                areas: 'Области',
+                add_area: 'Добавить область',
+                filter: 'Фильтр',
+                clear: 'Очистить фильтр',
+
+                no_results:
+                    'Области не найдены, соответствующие вашему фильтру.',
+
+                area: {
+                    area_actions: {
+                        title: 'Действия',
+                        edit_name: 'Изменить название',
+                        delete_area: 'Удалить область',
+                    },
+                },
+                empty_state: {
+                    title: 'Нет областей',
+                    description: 'Создайте область, чтобы начать',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -223,6 +269,8 @@ export const ru: LanguageTranslation = {
             redo: 'Вернуть',
             reorder_diagram: 'Переупорядочить диаграмму',
             highlight_overlapping_tables: 'Выделение перекрывающихся таблиц',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -238,7 +286,7 @@ export const ru: LanguageTranslation = {
                 title: 'Импортируйте свою базу данных',
                 database_edition: 'Версия базы данных:',
                 step_1: 'Запустите этот скрипт в своей базе данных:',
-                step_2: 'Вставьте вывод скрипта сюда:',
+                step_2: 'Вставьте вывод скрипта сюда →',
                 script_results_placeholder: 'Вывод скрипта здесь...',
                 ssms_instructions: {
                     button_text: 'SSMS Инструкции',
@@ -333,6 +381,12 @@ export const ru: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Отменить',
             export: 'Экспортировать',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -366,7 +420,7 @@ export const ru: LanguageTranslation = {
             error: {
                 title: 'Ошибка экспортирования диаграммы',
                 description:
-                    'Что-то пошло не так. Если вам нужна помощь, напишите нам: chartdb.io@gmail.com',
+                    'Что-то пошло не так. Если вам нужна помощь, напишите нам: support@chartdb.io',
             },
         },
         import_diagram_dialog: {
@@ -377,21 +431,22 @@ export const ru: LanguageTranslation = {
             error: {
                 title: 'Ошибка при импорте диаграммы',
                 description:
-                    'Код JSON диаграммы некорректен. Проверьте, пожалуйста, код и попробуйте снова. Проблема не решается? Напишите нам: chartdb.io@gmail.com',
+                    'Код JSON диаграммы некорректен. Проверьте, пожалуйста, код и попробуйте снова. Проблема не решается? Напишите нам: support@chartdb.io',
             },
         },
-        // TODO: Translate
         import_dbml_dialog: {
-            example_title: 'Import Example DBML',
-            title: 'Import DBML',
-            description: 'Import a database schema from DBML format.',
-            import: 'Import',
-            cancel: 'Cancel',
-            skip_and_empty: 'Skip & Empty',
-            show_example: 'Show Example',
+            example_title: 'Импорт DBML',
+            title: 'Импортировать DBML',
+            description: 'Импортировать схему базы данных из DBML формата.',
+            import: 'Импортировать',
+            cancel: 'Отмена',
+            skip_and_empty: 'Продолжить с пустой диаграммой',
+            show_example: 'Использовать эту схему',
+
             error: {
-                title: 'Error',
-                description: 'Failed to parse DBML. Please check the syntax.',
+                title: 'Ошибка',
+                description:
+                    'Ошибка парсинга DBML. Пожалуйста проверьте синтаксис.',
             },
         },
         relationship_type: {
@@ -404,13 +459,14 @@ export const ru: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Создать таблицу',
             new_relationship: 'Создать отношение',
+            new_area: 'Новая область',
         },
 
         table_node_context_menu: {
             edit_table: 'Изменить таблицу',
-            duplicate_table: 'Duplicate Table', // TODO: Translate
+            duplicate_table: 'Создать копию',
             delete_table: 'Удалить таблицу',
-            add_relationship: 'Add Relationship', // TODO: Translate
+            add_relationship: 'Добавить связь',
         },
 
         copy_to_clipboard: 'Скопировать в буфер обмена',

src/i18n/locales/te.ts

@@ -43,9 +43,7 @@ export const te: LanguageTranslation = {
             help: {
                 help: 'సహాయం',
                 docs_website: 'డాక్యుమెంటేషన్',
-                visit_website: 'ChartDB సందర్శించండి',
                 join_discord: 'డిస్కార్డ్‌లో మా నుంచి చేరండి',
-                schedule_a_call: 'మాతో మాట్లాడండి!',
             },
         },
 
@@ -77,8 +75,8 @@ export const te: LanguageTranslation = {
             title: 'బహుళ స్కీమాలు',
             description:
                 '{{schemasCount}} స్కీమాలు ఈ చిత్రంలో ఉన్నాయి. ప్రస్తుత స్కీమాలు: {{formattedSchemas}}.',
-            dont_show_again: 'మరలా చూపించవద్దు',
-            change_schema: 'మార్చు',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'ఎదరికాదు',
         },
 
@@ -153,6 +151,9 @@ export const te: LanguageTranslation = {
                         no_comments: 'వ్యాఖ్యలు లేవు',
                         delete_field: 'ఫీల్డ్ తొలగించు',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -214,6 +215,53 @@ export const te: LanguageTranslation = {
                     description: 'ప్రారంభించడానికి ఒక వీక్షణ సృష్టించండి',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -225,6 +273,8 @@ export const te: LanguageTranslation = {
             redo: 'మరలా చేయు',
             reorder_diagram: 'చిత్రాన్ని పునఃసరిచేయండి',
             highlight_overlapping_tables: 'అవకాశించు పట్టికలను హైలైట్ చేయండి',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -240,7 +290,7 @@ export const te: LanguageTranslation = {
                 title: 'మీ డేటాబేస్‌ను దిగుమతి చేసుకోండి',
                 database_edition: 'డేటాబేస్ ఎడిషన్:',
                 step_1: 'ఈ స్క్రిప్ట్ను మీ డేటాబేస్‌లో అమలు చేయండి:',
-                step_2: 'స్క్రిప్ట్ ఫలితాన్ని ఇక్కడ పేస్ట్ చేయండి:',
+                step_2: 'స్క్రిప్ట్ ఫలితాన్ని ఇక్కడ పేస్ట్ చేయండి →',
                 script_results_placeholder: 'స్క్రిప్ట్ ఫలితాలు ఇక్కడ...',
                 ssms_instructions: {
                     button_text: 'SSMS సూచనల్ని చూపించు',
@@ -335,6 +385,12 @@ export const te: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'రద్దు',
             export: 'ఎగుమతి',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -370,7 +426,7 @@ export const te: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
 
@@ -383,7 +439,7 @@ export const te: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -411,6 +467,8 @@ export const te: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'కొత్త పట్టిక',
             new_relationship: 'కొత్త సంబంధం',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/tr.ts

@@ -43,9 +43,7 @@ export const tr: LanguageTranslation = {
             help: {
                 help: 'Yardım',
                 docs_website: 'Belgeleme',
-                visit_website: "ChartDB'yi Ziyaret Et",
                 join_discord: "Discord'a Katıl",
-                schedule_a_call: 'Bize Ulaş!',
             },
         },
 
@@ -77,8 +75,8 @@ export const tr: LanguageTranslation = {
             title: 'Birden Fazla Şema',
             description:
                 'Bu diyagramda {{schemasCount}} şema var. Şu anda görüntülenen: {{formattedSchemas}}.',
-            dont_show_again: 'Tekrar gösterme',
-            change_schema: 'Değiştir',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'yok',
         },
 
@@ -152,6 +150,9 @@ export const tr: LanguageTranslation = {
                         no_comments: 'Yorum yok',
                         delete_field: 'Alanı Sil',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -213,6 +214,53 @@ export const tr: LanguageTranslation = {
                     description: 'Başlamak için bir görünüm oluşturun',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
         toolbar: {
             zoom_in: 'Yakınlaştır',
@@ -223,6 +271,8 @@ export const tr: LanguageTranslation = {
             redo: 'Yinele',
             reorder_diagram: 'Diyagramı Yeniden Sırala',
             highlight_overlapping_tables: 'Çakışan Tabloları Vurgula',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
         new_diagram_dialog: {
             database_selection: {
@@ -236,7 +286,7 @@ export const tr: LanguageTranslation = {
                 title: 'Veritabanını İçe Aktar',
                 database_edition: 'Veritabanı Sürümü:',
                 step_1: 'Bu komut dosyasını veritabanınızda çalıştırın:',
-                step_2: 'Komut dosyası sonucunu buraya yapıştırın:',
+                step_2: 'Komut dosyası sonucunu buraya yapıştırın →',
                 script_results_placeholder: 'Komut dosyası sonuçları burada...',
                 ssms_instructions: {
                     button_text: 'SSMS Talimatları',
@@ -327,6 +377,12 @@ export const tr: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'İptal',
             export: 'Dışa Aktar',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
         new_table_schema_dialog: {
             title: 'Şema Seç',
@@ -358,7 +414,7 @@ export const tr: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -370,7 +426,7 @@ export const tr: LanguageTranslation = {
             error: {
                 title: 'Error importing diagram',
                 description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -396,6 +452,8 @@ export const tr: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Yeni Tablo',
             new_relationship: 'Yeni İlişki',
+            // TODO: Translate
+            new_area: 'New Area',
         },
         table_node_context_menu: {
             edit_table: 'Tabloyu Düzenle',

src/i18n/locales/uk.ts

@@ -41,9 +41,7 @@ export const uk: LanguageTranslation = {
             help: {
                 help: 'Довідка',
                 docs_website: 'Документація',
-                visit_website: 'Сайт ChartDB',
                 join_discord: 'Приєднуйтесь до нас в Діскорд',
-                schedule_a_call: 'Забронювати зустріч!',
             },
         },
 
@@ -75,8 +73,8 @@ export const uk: LanguageTranslation = {
             title: 'Кілька схем',
             description:
                 '{{schemasCount}} схеми на цій діаграмі. Зараз відображається: {{formattedSchemas}}.',
-            dont_show_again: 'Більше не показувати',
-            change_schema: 'Зміна',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'немає',
         },
 
@@ -151,6 +149,9 @@ export const uk: LanguageTranslation = {
                         no_comments: 'Немає коментарів',
                         delete_field: 'Видалити поле',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -211,6 +212,53 @@ export const uk: LanguageTranslation = {
                     description: 'Створіть подання, щоб почати',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -222,6 +270,8 @@ export const uk: LanguageTranslation = {
             redo: 'Повторити',
             reorder_diagram: 'Перевпорядкувати діаграму',
             highlight_overlapping_tables: 'Показати таблиці, що перекриваються',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -237,7 +287,7 @@ export const uk: LanguageTranslation = {
                 title: 'Імпортуйте вашу базу даних',
                 database_edition: 'Варіант бази даних:',
                 step_1: 'Запустіть цей сценарій у своїй базі даних:',
-                step_2: 'Вставте сюди результат сценарію:',
+                step_2: 'Вставте сюди результат сценарію →',
                 script_results_placeholder: 'Результати сценарію має бути тут…',
                 ssms_instructions: {
                     button_text: 'SSMS Інструкції',
@@ -332,6 +382,12 @@ export const uk: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Скасувати',
             export: 'Експортувати',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -364,7 +420,7 @@ export const uk: LanguageTranslation = {
             error: {
                 title: 'Помилка експорут діаграми',
                 description:
-                    'Щось пішло не так. Потрібна допомога? chartdb.io@gmail.com',
+                    'Щось пішло не так. Потрібна допомога? support@chartdb.io',
             },
         },
         import_diagram_dialog: {
@@ -375,7 +431,7 @@ export const uk: LanguageTranslation = {
             error: {
                 title: 'Помилка імпорту діаграми',
                 description:
-                    'JSON діаграми є неправильним. Будь ласка, перевірте JSON і спробуйте ще раз. Потрібна допомога? chartdb.io@gmail.com',
+                    'JSON діаграми є неправильним. Будь ласка, перевірте JSON і спробуйте ще раз. Потрібна допомога? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -402,6 +458,8 @@ export const uk: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Нова таблиця',
             new_relationship: 'Новий звʼязок',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/vi.ts

@@ -42,9 +42,7 @@ export const vi: LanguageTranslation = {
             help: {
                 help: 'Trợ giúp',
                 docs_website: 'Tài liệu',
-                visit_website: 'Truy cập ChartDB',
                 join_discord: 'Tham gia Discord',
-                schedule_a_call: 'Trò chuyện cùng chúng tôi!',
             },
         },
 
@@ -76,8 +74,8 @@ export const vi: LanguageTranslation = {
             title: 'Có nhiều lược đồ',
             description:
                 'Có {{schemasCount}} lược đồ trong sơ đồ này. Hiện đang hiển thị: {{formattedSchemas}}.',
-            dont_show_again: 'Không hiển thị lại',
-            change_schema: 'Thay đổi',
+            // TODO: Translate
+            show_me: 'Show me',
             none: 'không có',
         },
 
@@ -152,6 +150,9 @@ export const vi: LanguageTranslation = {
                         no_comments: 'Không có bình luận',
                         delete_field: 'Xóa trường',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -212,6 +213,53 @@ export const vi: LanguageTranslation = {
                     description: 'Tạo bảng xem phụ thuộc để bắt đầu',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -223,6 +271,8 @@ export const vi: LanguageTranslation = {
             redo: 'Làm lại',
             reorder_diagram: 'Sắp xếp lại sơ đồ',
             highlight_overlapping_tables: 'Làm nổi bật các bảng chồng chéo',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -238,7 +288,7 @@ export const vi: LanguageTranslation = {
                 title: 'Nhập cơ sở dữ liệu của bạn',
                 database_edition: 'Loại:',
                 step_1: 'Chạy lệnh này trong cơ sở dữ liệu của bạn:',
-                step_2: 'Dán kết quả vào đây:',
+                step_2: 'Dán kết quả vào đây →',
                 script_results_placeholder: 'Kết quả...',
                 ssms_instructions: {
                     button_text: 'Hướng dẫn SSMS',
@@ -331,6 +381,12 @@ export const vi: LanguageTranslation = {
             scale_4x: '4x',
             cancel: 'Hủy',
             export: 'Xuất',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -364,7 +420,7 @@ export const vi: LanguageTranslation = {
             error: {
                 title: 'Lỗi khi xuất sơ đồ',
                 description:
-                    'Có gì đó không ổn. Cần trợ giúp? chartdb.io@gmail.com',
+                    'Có gì đó không ổn. Cần trợ giúp? support@chartdb.io',
             },
         },
 
@@ -376,7 +432,7 @@ export const vi: LanguageTranslation = {
             error: {
                 title: 'Lỗi khi nhập sơ đồ',
                 description:
-                    'Sơ đồ ở dạng JSON không hợp lệ. Vui lòng kiểm tra JSON và thử lại. Bạn cần trợ giúp? chartdb.io@gmail.com',
+                    'Sơ đồ ở dạng JSON không hợp lệ. Vui lòng kiểm tra JSON và thử lại. Bạn cần trợ giúp? support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -403,6 +459,8 @@ export const vi: LanguageTranslation = {
         canvas_context_menu: {
             new_table: 'Tạo bảng mới',
             new_relationship: 'Tạo quan hệ mới',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/zh_CN.ts

@@ -42,9 +42,7 @@ export const zh_CN: LanguageTranslation = {
             help: {
                 help: '帮助',
                 docs_website: '文档',
-                visit_website: '访问 ChartDB',
                 join_discord: '在 Discord 上加入我们',
-                schedule_a_call: '和我们交流！',
             },
         },
 
@@ -73,8 +71,8 @@ export const zh_CN: LanguageTranslation = {
             title: '多个模式',
             description:
                 '此关系图中有 {{schemasCount}} 个模式，当前显示：{{formattedSchemas}}。',
-            dont_show_again: '不再展示',
-            change_schema: '更改',
+            // TODO: Translate
+            show_me: 'Show me',
             none: '无',
         },
 
@@ -149,6 +147,9 @@ export const zh_CN: LanguageTranslation = {
                         no_comments: '空',
                         delete_field: '删除字段',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -209,6 +210,53 @@ export const zh_CN: LanguageTranslation = {
                     description: '创建视图以开始',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -220,6 +268,8 @@ export const zh_CN: LanguageTranslation = {
             redo: '重做',
             reorder_diagram: '重新排列关系图',
             highlight_overlapping_tables: '突出显示重叠的表',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -234,7 +284,7 @@ export const zh_CN: LanguageTranslation = {
                 title: '导入您的数据库',
                 database_edition: '数据库类型：',
                 step_1: '在您的数据库中执行以下脚本：',
-                step_2: '将结果粘贴于此：',
+                step_2: '将结果粘贴于此 →',
                 script_results_placeholder: '结果...',
                 ssms_instructions: {
                     button_text: 'SSMS 说明',
@@ -328,6 +378,12 @@ export const zh_CN: LanguageTranslation = {
             scale_4x: '4x',
             cancel: '取消',
             export: '导出',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -360,7 +416,7 @@ export const zh_CN: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
 
@@ -372,7 +428,7 @@ export const zh_CN: LanguageTranslation = {
             error: {
                 title: '导入关系图时出错',
                 description:
-                    '关系图 JSON 无效，请检查 JSON 后重试。需要帮助？ 联系 chartdb.io@gmail.com',
+                    '关系图 JSON 无效，请检查 JSON 后重试。需要帮助？ 联系 support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -399,6 +455,8 @@ export const zh_CN: LanguageTranslation = {
         canvas_context_menu: {
             new_table: '新建表',
             new_relationship: '新建关系',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/i18n/locales/zh_TW.ts

@@ -42,9 +42,7 @@ export const zh_TW: LanguageTranslation = {
             help: {
                 help: '幫助',
                 docs_website: '文件',
-                visit_website: '訪問 ChartDB 網站',
                 join_discord: '加入 Discord',
-                schedule_a_call: '與我們聯絡！',
             },
         },
 
@@ -73,8 +71,8 @@ export const zh_TW: LanguageTranslation = {
             title: '多重 Schema',
             description:
                 '此圖表中包含 {{schemasCount}} 個 Schema，目前顯示：{{formattedSchemas}}。',
-            dont_show_again: '不再顯示',
-            change_schema: '變更',
+            // TODO: Translate
+            show_me: 'Show me',
             none: '無',
         },
 
@@ -149,6 +147,9 @@ export const zh_TW: LanguageTranslation = {
                         no_comments: '無註解',
                         delete_field: '刪除欄位',
                         // TODO: Translate
+                        default_value: 'Default Value',
+                        no_default: 'No default',
+                        // TODO: Translate
                         character_length: 'Max Length',
                     },
                     index_actions: {
@@ -209,6 +210,53 @@ export const zh_TW: LanguageTranslation = {
                     description: '請建立檢視以開始',
                 },
             },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
         },
 
         toolbar: {
@@ -220,6 +268,8 @@ export const zh_TW: LanguageTranslation = {
             redo: '重做',
             reorder_diagram: '重新排列圖表',
             highlight_overlapping_tables: '突出顯示重疊表格',
+            // TODO: Translate
+            filter: 'Filter Tables',
         },
 
         new_diagram_dialog: {
@@ -234,7 +284,7 @@ export const zh_TW: LanguageTranslation = {
                 title: '匯入資料庫',
                 database_edition: '資料庫版本:',
                 step_1: '請在資料庫中執行以下腳本:',
-                step_2: '將腳本結果貼到此處:',
+                step_2: '將腳本結果貼到此處 →',
                 script_results_placeholder: '在此處貼上腳本結果...',
                 ssms_instructions: {
                     button_text: 'SSMS 操作步驟',
@@ -327,6 +377,12 @@ export const zh_TW: LanguageTranslation = {
             scale_4x: '4x',
             cancel: '取消',
             export: '匯出',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
         },
 
         new_table_schema_dialog: {
@@ -359,7 +415,7 @@ export const zh_TW: LanguageTranslation = {
             error: {
                 title: 'Error exporting diagram',
                 description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
             },
         },
 
@@ -371,7 +427,7 @@ export const zh_TW: LanguageTranslation = {
             error: {
                 title: '匯入圖表時發生錯誤',
                 description:
-                    '圖表的 JSON 無效。請檢查 JSON 並再試一次。如需幫助，請聯繫 chartdb.io@gmail.com',
+                    '圖表的 JSON 無效。請檢查 JSON 並再試一次。如需幫助，請聯繫 support@chartdb.io',
             },
         },
         // TODO: Translate
@@ -398,6 +454,8 @@ export const zh_TW: LanguageTranslation = {
         canvas_context_menu: {
             new_table: '新建表格',
             new_relationship: '新建關聯',
+            // TODO: Translate
+            new_area: 'New Area',
         },
 
         table_node_context_menu: {

src/lib/clone.ts

@@ -1,3 +1,4 @@
+import type { Area } from './domain/area';
 import type { DBDependency } from './domain/db-dependency';
 import type { DBField } from './domain/db-field';
 import type { DBIndex } from './domain/db-index';
@@ -43,6 +44,10 @@ const generateIdsMapFromDiagram = (
         idsMap.set(dependency.id, generateId());
     });
 
+    diagram.areas?.forEach((area) => {
+        idsMap.set(area.id, generateId());
+    });
+
     return idsMap;
 };
 
@@ -119,7 +124,7 @@ export const cloneDiagram = (
     } = {
         generateId: defaultGenerateId,
     }
-): Diagram => {
+): { diagram: Diagram; idsMap: Map<string, string> } => {
     const { generateId } = options;
     const diagramId = generateId();
 
@@ -193,13 +198,36 @@ export const cloneDiagram = (
                 (dependency): dependency is DBDependency => dependency !== null
             ) ?? [];
 
+    const areas: Area[] =
+        diagram.areas
+            ?.map((area) => {
+                const id = getNewId(area.id);
+                if (!id) {
+                    return null;
+                }
+
+                return {
+                    ...area,
+                    id,
+                } satisfies Area;
+            })
+            .filter((area): area is Area => area !== null) ?? [];
+
     return {
-        ...diagram,
-        id: diagramId,
-        dependencies,
-        relationships,
-        tables,
-        createdAt: new Date(),
-        updatedAt: new Date(),
+        diagram: {
+            ...diagram,
+            id: diagramId,
+            dependencies,
+            relationships,
+            tables,
+            areas,
+            createdAt: diagram.createdAt
+                ? new Date(diagram.createdAt)
+                : new Date(),
+            updatedAt: diagram.updatedAt
+                ? new Date(diagram.updatedAt)
+                : new Date(),
+        },
+        idsMap,
     };
 };

src/lib/data/data-types/data-types.ts

@@ -7,6 +7,7 @@ import { mysqlDataTypes } from './mysql-data-types';
 import { postgresDataTypes } from './postgres-data-types';
 import { sqlServerDataTypes } from './sql-server-data-types';
 import { sqliteDataTypes } from './sqlite-data-types';
+import { oracleDataTypes } from './oracle-data-types';
 
 export interface DataType {
     id: string;
@@ -15,6 +16,7 @@ export interface DataType {
 
 export interface DataTypeData extends DataType {
     hasCharMaxLength?: boolean;
+    usageLevel?: 1 | 2; // Level 1 is most common, Level 2 is second most common
 }
 
 export const dataTypeSchema: z.ZodType<DataType> = z.object({
@@ -31,8 +33,51 @@ export const dataTypeMap: Record<DatabaseType, readonly DataTypeData[]> = {
     [DatabaseType.SQLITE]: sqliteDataTypes,
     [DatabaseType.CLICKHOUSE]: clickhouseDataTypes,
     [DatabaseType.COCKROACHDB]: postgresDataTypes,
+    [DatabaseType.ORACLE]: oracleDataTypes,
 } as const;
 
+export const sortDataTypes = (dataTypes: DataTypeData[]): DataTypeData[] => {
+    const types = [...dataTypes];
+    return types.sort((a, b) => {
+        // First sort by usage level (lower numbers first)
+        if ((a.usageLevel || 3) < (b.usageLevel || 3)) return -1;
+        if ((a.usageLevel || 3) > (b.usageLevel || 3)) return 1;
+        // Then sort alphabetically by name
+        return a.name.localeCompare(b.name);
+    });
+};
+
+export const sortedDataTypeMap: Record<DatabaseType, readonly DataTypeData[]> =
+    {
+        [DatabaseType.GENERIC]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.GENERIC],
+        ]),
+        [DatabaseType.POSTGRESQL]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.POSTGRESQL],
+        ]),
+        [DatabaseType.MYSQL]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.MYSQL],
+        ]),
+        [DatabaseType.SQL_SERVER]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.SQL_SERVER],
+        ]),
+        [DatabaseType.MARIADB]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.MARIADB],
+        ]),
+        [DatabaseType.SQLITE]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.SQLITE],
+        ]),
+        [DatabaseType.CLICKHOUSE]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.CLICKHOUSE],
+        ]),
+        [DatabaseType.COCKROACHDB]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.COCKROACHDB],
+        ]),
+        [DatabaseType.ORACLE]: sortDataTypes([
+            ...dataTypeMap[DatabaseType.ORACLE],
+        ]),
+    } as const;
+
 const compatibleTypes: Record<DatabaseType, Record<string, string[]>> = {
     [DatabaseType.POSTGRESQL]: {
         serial: ['integer'],
@@ -48,6 +93,7 @@ const compatibleTypes: Record<DatabaseType, Record<string, string[]>> = {
     [DatabaseType.SQLITE]: {},
     [DatabaseType.CLICKHOUSE]: {},
     [DatabaseType.COCKROACHDB]: {},
+    [DatabaseType.ORACLE]: {},
     [DatabaseType.GENERIC]: {},
 };
 

src/lib/data/data-types/generic-data-types.ts

@@ -1,27 +1,32 @@
 import type { DataTypeData } from './data-types';
 
 export const genericDataTypes: readonly DataTypeData[] = [
+    // Level 1 - Most commonly used types
+    { name: 'varchar', id: 'varchar', hasCharMaxLength: true, usageLevel: 1 },
+    { name: 'int', id: 'int', usageLevel: 1 },
+    { name: 'text', id: 'text', usageLevel: 1 },
+    { name: 'boolean', id: 'boolean', usageLevel: 1 },
+    { name: 'date', id: 'date', usageLevel: 1 },
+    { name: 'timestamp', id: 'timestamp', usageLevel: 1 },
+
+    // Level 2 - Second most common types
+    { name: 'decimal', id: 'decimal', usageLevel: 2 },
+    { name: 'datetime', id: 'datetime', usageLevel: 2 },
+    { name: 'json', id: 'json', usageLevel: 2 },
+    { name: 'uuid', id: 'uuid', usageLevel: 2 },
+
+    // Less common types
     { name: 'bigint', id: 'bigint' },
     { name: 'binary', id: 'binary', hasCharMaxLength: true },
     { name: 'blob', id: 'blob' },
-    { name: 'boolean', id: 'boolean' },
     { name: 'char', id: 'char', hasCharMaxLength: true },
-    { name: 'date', id: 'date' },
-    { name: 'datetime', id: 'datetime' },
-    { name: 'decimal', id: 'decimal' },
     { name: 'double', id: 'double' },
     { name: 'enum', id: 'enum' },
     { name: 'float', id: 'float' },
-    { name: 'int', id: 'int' },
-    { name: 'json', id: 'json' },
     { name: 'numeric', id: 'numeric' },
     { name: 'real', id: 'real' },
     { name: 'set', id: 'set' },
     { name: 'smallint', id: 'smallint' },
-    { name: 'text', id: 'text' },
     { name: 'time', id: 'time' },
-    { name: 'timestamp', id: 'timestamp' },
-    { name: 'uuid', id: 'uuid' },
     { name: 'varbinary', id: 'varbinary', hasCharMaxLength: true },
-    { name: 'varchar', id: 'varchar', hasCharMaxLength: true },
 ] as const;