chore(main): release 1.17.0

* fix: preserve multi-word types in DBML export/import

* fix

.github/workflows/cla.yaml

@@ -7,7 +7,7 @@ on:
 
 permissions:
   actions: write
-  contents: write # this can be 'read' if the signatures are in remote repository
+  contents: read
   pull-requests: write
   statuses: write
 

.nvmrc

@@ -1 +1 @@
-v22.5.1
+v22.18.0

CHANGELOG.md

@@ -1,5 +1,120 @@
 # Changelog
 
+## [1.17.0](https://github.com/chartdb/chartdb/compare/v1.16.0...v1.17.0) (2025-10-21)
+
+
+### Features
+
+* create relationships on canvas modal ([#946](https://github.com/chartdb/chartdb/issues/946)) ([34475ad](https://github.com/chartdb/chartdb/commit/34475add32f11323589ef092ccf2a8e9152ff272))
+
+
+### Bug Fixes
+
+* add auto-increment field detection in smart-query import ([#935](https://github.com/chartdb/chartdb/issues/935)) ([57b3b87](https://github.com/chartdb/chartdb/commit/57b3b8777fd0a445abf0ba6603faab612d469d5c))
+* add open table in editor from canvas edit ([#952](https://github.com/chartdb/chartdb/issues/952)) ([7d811de](https://github.com/chartdb/chartdb/commit/7d811de097eb11e51012772fa6bf586fd0b16c62))
+* add rels export dbml ([#937](https://github.com/chartdb/chartdb/issues/937)) ([c3c646b](https://github.com/chartdb/chartdb/commit/c3c646bf7cbb1328f4b2eb85c9a7e929f0fcd3b9))
+* add support for arrays ([#949](https://github.com/chartdb/chartdb/issues/949)) ([49328d8](https://github.com/chartdb/chartdb/commit/49328d8fbd7786f6c0c04cd5605d43a24cbf10ea))
+* add support for parsing default values in DBML ([#948](https://github.com/chartdb/chartdb/issues/948)) ([459698b](https://github.com/chartdb/chartdb/commit/459698b5d0a1ff23a3719c2e55e4ab2e2384c4fe))
+* add timestampz and int as datatypes to postgres ([#940](https://github.com/chartdb/chartdb/issues/940)) ([b15bc94](https://github.com/chartdb/chartdb/commit/b15bc945acb96d7cb3832b3b1b607dfcaef9e5ca))
+* auto-enter edit mode when creating new tables from canvas ([#943](https://github.com/chartdb/chartdb/issues/943)) ([bcd8aa9](https://github.com/chartdb/chartdb/commit/bcd8aa9378aa563f40a2b6802cc503be4c882356))
+* dbml diff fields types preview ([#934](https://github.com/chartdb/chartdb/issues/934)) ([bb03309](https://github.com/chartdb/chartdb/commit/bb033091b1f64b888822be1423a80f16f5314f6b))
+* exit table edit on area click ([#945](https://github.com/chartdb/chartdb/issues/945)) ([38fedce](https://github.com/chartdb/chartdb/commit/38fedcec0c10ea2b3f0b7fc92ca1f5ac9e540389))
+* manipulate schema directly from the canvas ([#947](https://github.com/chartdb/chartdb/issues/947)) ([7ad0e77](https://github.com/chartdb/chartdb/commit/7ad0e7712de975a23b2a337dc0a4a7fb4b122bd1))
+* preserve multi-word types in DBML export/import ([#956](https://github.com/chartdb/chartdb/issues/956)) ([9ed27cf](https://github.com/chartdb/chartdb/commit/9ed27cf30cca1312713e80e525138f0c27154936))
+* prevent text input glitch when editing table field names ([#944](https://github.com/chartdb/chartdb/issues/944)) ([498655e](https://github.com/chartdb/chartdb/commit/498655e7b77e57eaf641ba86263ce1ef60b93e16))
+* resolve canvas filter tree state issues ([#953](https://github.com/chartdb/chartdb/issues/953)) ([ccb29e0](https://github.com/chartdb/chartdb/commit/ccb29e0a574dfa4cfdf0ebf242a4c4aaa48cc37b))
+* resolve dbml increment & nullable attributes issue ([#954](https://github.com/chartdb/chartdb/issues/954)) ([2c4b344](https://github.com/chartdb/chartdb/commit/2c4b344efb24041e7f607fc6124e109b69aaa457))
+* use flag for custom types ([#951](https://github.com/chartdb/chartdb/issues/951)) ([62dec48](https://github.com/chartdb/chartdb/commit/62dec4857211b705a8039691da1772263ea986fe))
+
+## [1.16.0](https://github.com/chartdb/chartdb/compare/v1.15.1...v1.16.0) (2025-09-24)
+
+
+### Features
+
+* add area context menu and UI improvements ([#918](https://github.com/chartdb/chartdb/issues/918)) ([d09379e](https://github.com/chartdb/chartdb/commit/d09379e8be0fa3c83ca77ff62ae815fe4db9869b))
+* add quick table mode on canvas ([#915](https://github.com/chartdb/chartdb/issues/915)) ([8954d89](https://github.com/chartdb/chartdb/commit/8954d893bbfee45bb311380115fb14ebbf3a3133))
+* add zoom navigation buttons to canvas filter for tables and areas ([#903](https://github.com/chartdb/chartdb/issues/903)) ([a0fb1ed](https://github.com/chartdb/chartdb/commit/a0fb1ed08ba18b66354fa3498d610097a83d4afc))
+* **import-db:** add DBML syntax to import database dialog ([#768](https://github.com/chartdb/chartdb/issues/768)) ([af3638d](https://github.com/chartdb/chartdb/commit/af3638da7a9b70f281ceaddbc2f712a713d90cda))
+
+
+### Bug Fixes
+
+* add areas width and height + table width to diff check ([#931](https://github.com/chartdb/chartdb/issues/931)) ([98f6edd](https://github.com/chartdb/chartdb/commit/98f6edd5c8a8e9130e892b2d841744e0cf63a7bf))
+* add diff x,y ([#928](https://github.com/chartdb/chartdb/issues/928)) ([e4c4a3b](https://github.com/chartdb/chartdb/commit/e4c4a3b35484d9ece955a5aec577603dde73d634))
+* add support for ALTER TABLE ADD COLUMN in PostgreSQL importer ([#892](https://github.com/chartdb/chartdb/issues/892)) ([ec6e46f](https://github.com/chartdb/chartdb/commit/ec6e46fe81ea1806c179c50a4c5779d8596008aa))
+* add tests for diff ([#930](https://github.com/chartdb/chartdb/issues/930)) ([47a7a73](https://github.com/chartdb/chartdb/commit/47a7a73a137b87dfa6e67aff5f939cf64ccf4601))
+* dbml edit mode glitch ([#925](https://github.com/chartdb/chartdb/issues/925)) ([93d72a8](https://github.com/chartdb/chartdb/commit/93d72a896bab9aa79d8ea2f876126887e432214c))
+* dbml export default time bug ([#922](https://github.com/chartdb/chartdb/issues/922)) ([bc82f9d](https://github.com/chartdb/chartdb/commit/bc82f9d6a8fe4de2f7e0fc465e0a20c5dbf8f41d))
+* dbml export renaming fields bug ([#921](https://github.com/chartdb/chartdb/issues/921)) ([26dc299](https://github.com/chartdb/chartdb/commit/26dc299cd28e9890d191c13f84a15ac38ae48b11))
+* **dbml:** export array fields without quotes ([#911](https://github.com/chartdb/chartdb/issues/911)) ([5e81c18](https://github.com/chartdb/chartdb/commit/5e81c1848aaa911990e1e881d62525f5254d6d34))
+* diff logic ([#927](https://github.com/chartdb/chartdb/issues/927)) ([1b8d51b](https://github.com/chartdb/chartdb/commit/1b8d51b73c4ed4b7c5929adcb17a44927c7defca))
+* export dbml issues after upgrade version ([#883](https://github.com/chartdb/chartdb/issues/883)) ([07937a2](https://github.com/chartdb/chartdb/commit/07937a2f51708b1c10b45c2bd1f9a9acf5c3f708))
+* export sql + import metadata lib ([#902](https://github.com/chartdb/chartdb/issues/902)) ([ffddcdc](https://github.com/chartdb/chartdb/commit/ffddcdcc987bacb0e0d7e8dea27d08d3a8c5a8c8))
+* handle bidirectional relationships in DBML export ([#924](https://github.com/chartdb/chartdb/issues/924)) ([9991077](https://github.com/chartdb/chartdb/commit/99910779789a9c6ef113d06bc3de31e35b9b04d1))
+* import dbml set pk field unique ([#920](https://github.com/chartdb/chartdb/issues/920)) ([d6ba4a4](https://github.com/chartdb/chartdb/commit/d6ba4a40749d85d2703f120600df4345dab3c561))
+* improve SQL default value parsing for PostgreSQL, MySQL, and SQL Server with proper type handling and casting support ([#900](https://github.com/chartdb/chartdb/issues/900)) ([fe9ef27](https://github.com/chartdb/chartdb/commit/fe9ef275b8619dcfd7e57541a62a6237a16d29a8))
+* move area utils ([#932](https://github.com/chartdb/chartdb/issues/932)) ([2dc1a6f](https://github.com/chartdb/chartdb/commit/2dc1a6fc7519e0a455b0e1306601195deb156c96))
+* move auto arrange to toolbar ([#904](https://github.com/chartdb/chartdb/issues/904)) ([b016a70](https://github.com/chartdb/chartdb/commit/b016a70691bc22af5720b4de683e8c9353994fcc))
+* remove general db creation ([#901](https://github.com/chartdb/chartdb/issues/901)) ([df89f0b](https://github.com/chartdb/chartdb/commit/df89f0b6b9ba3fcc8b05bae4f60c0dc4ad1d2215))
+* remove many to many rel option ([#933](https://github.com/chartdb/chartdb/issues/933)) ([c567c0a](https://github.com/chartdb/chartdb/commit/c567c0a5f39157b2c430e92192b6750304d7a834))
+* reset increment and default when change field ([#896](https://github.com/chartdb/chartdb/issues/896)) ([e5e1d59](https://github.com/chartdb/chartdb/commit/e5e1d5932762422ea63acfd6cf9fe4f03aa822f7))
+* **sql-import:** handle SQL Server DDL with multiple tables, inline foreign keys, and case-insensitive field matching ([#897](https://github.com/chartdb/chartdb/issues/897)) ([2a64dee](https://github.com/chartdb/chartdb/commit/2a64deebb87a11ee3892024c3273d682bb86f7ef))
+* **sql-import:** support ALTER TABLE ALTER COLUMN TYPE in PostgreSQL importer ([#895](https://github.com/chartdb/chartdb/issues/895)) ([aa29061](https://github.com/chartdb/chartdb/commit/aa290615caf806d7d0374c848d50b4636fde7e96))
+* **sqlite:** improve parser to handle tables without column types and fix column detection ([#914](https://github.com/chartdb/chartdb/issues/914)) ([d3dbf41](https://github.com/chartdb/chartdb/commit/d3dbf41894d74f0ffce9afe3bd810f065aa53017))
+* trigger edit table on canvas from context menu ([#919](https://github.com/chartdb/chartdb/issues/919)) ([bdc41c0](https://github.com/chartdb/chartdb/commit/bdc41c0b74d9d9918e7b6cd2152fa07c0c58ce60))
+* update deps vulns ([#909](https://github.com/chartdb/chartdb/issues/909)) ([2bd9ca2](https://github.com/chartdb/chartdb/commit/2bd9ca25b2c7b1f053ff4fdc8c5cfc1b0e65901d))
+* upgrade dbml lib ([#880](https://github.com/chartdb/chartdb/issues/880)) ([d8e0bc7](https://github.com/chartdb/chartdb/commit/d8e0bc7db8881971ddaea7177bcebee13cc865f6))
+
+## [1.15.1](https://github.com/chartdb/chartdb/compare/v1.15.0...v1.15.1) (2025-08-27)
+
+
+### Bug Fixes
+
+* add actions menu to diagram list + add duplicate diagram ([#876](https://github.com/chartdb/chartdb/issues/876)) ([abd2a6c](https://github.com/chartdb/chartdb/commit/abd2a6ccbe1aa63db44ec28b3eff525cc5d3f8b0))
+* **custom-types:** Make schema optional ([#866](https://github.com/chartdb/chartdb/issues/866)) ([60c5675](https://github.com/chartdb/chartdb/commit/60c5675cbfe205859d2d0c9848d8345a0a854671))
+* handle quoted identifiers with special characters in SQL import/export and DBML generation ([#877](https://github.com/chartdb/chartdb/issues/877)) ([66b0863](https://github.com/chartdb/chartdb/commit/66b086378cd63347acab5fc7f13db7db4feaa872))
+
+## [1.15.0](https://github.com/chartdb/chartdb/compare/v1.14.0...v1.15.0) (2025-08-26)
+
+
+### Features
+
+* add auto increment support for fields with database-specific export ([#851](https://github.com/chartdb/chartdb/issues/851)) ([c77c983](https://github.com/chartdb/chartdb/commit/c77c983989ae38a6b1139dd9015f4f3178d4e103))
+* **filter:** filter tables by areas ([#836](https://github.com/chartdb/chartdb/issues/836)) ([e9c5442](https://github.com/chartdb/chartdb/commit/e9c5442d9df2beadad78187da3363bb6406636c4))
+* include foreign keys inline in SQLite CREATE TABLE statements ([#833](https://github.com/chartdb/chartdb/issues/833)) ([43fc1d7](https://github.com/chartdb/chartdb/commit/43fc1d7fc26876b22c61405f6c3df89fc66b7992))
+* **postgres:** add support hash index types ([#812](https://github.com/chartdb/chartdb/issues/812)) ([0d623a8](https://github.com/chartdb/chartdb/commit/0d623a86b1cb7cbd223e10ad23d09fc0e106c006))
+* support create views ([#868](https://github.com/chartdb/chartdb/issues/868)) ([0a5874a](https://github.com/chartdb/chartdb/commit/0a5874a69b6323145430c1fb4e3482ac7da4916c))
+
+
+### Bug Fixes
+
+* area filter logic ([#861](https://github.com/chartdb/chartdb/issues/861)) ([73daf0d](https://github.com/chartdb/chartdb/commit/73daf0df2142a29c2eeebe60b43198bcca869026))
+* **area filter:** fix dragging tables over filtered areas ([#842](https://github.com/chartdb/chartdb/issues/842)) ([19fd94c](https://github.com/chartdb/chartdb/commit/19fd94c6bde3a9ec749cd1ccacbedb6abc96d037))
+* **canvas:** delete table + area together bug ([#859](https://github.com/chartdb/chartdb/issues/859)) ([b697e26](https://github.com/chartdb/chartdb/commit/b697e26170da95dcb427ff6907b6f663c98ba59f))
+* **cla:** Harden action ([#867](https://github.com/chartdb/chartdb/issues/867)) ([ad8e344](https://github.com/chartdb/chartdb/commit/ad8e34483fdf4226de76c9e7768bc2ba9bf154de))
+* DBML export error with multi-line table comments for SQL Server ([#852](https://github.com/chartdb/chartdb/issues/852)) ([0545b41](https://github.com/chartdb/chartdb/commit/0545b411407b2449220d10981a04c3e368a90ca3))
+* filter to default schema on load new diagram ([#849](https://github.com/chartdb/chartdb/issues/849)) ([712bdf5](https://github.com/chartdb/chartdb/commit/712bdf5b958919d940c4f2a1c3b7c7e969990f02))
+* **filter:** filter toggle issues with no schemas dbs ([#856](https://github.com/chartdb/chartdb/issues/856)) ([d0dee84](https://github.com/chartdb/chartdb/commit/d0dee849702161d979b4f589a7e6579fbaade22d))
+* **filters:** refactor diagram filters - remove schema filter ([#832](https://github.com/chartdb/chartdb/issues/832)) ([4f1d329](https://github.com/chartdb/chartdb/commit/4f1d3295c09782ab46d82ce21b662032aa094f22))
+* for sqlite import - add more types & include type parameters ([#834](https://github.com/chartdb/chartdb/issues/834)) ([5936500](https://github.com/chartdb/chartdb/commit/5936500ca00a57b3f161616264c26152a13c36d2))
+* improve creating view to table dependency ([#874](https://github.com/chartdb/chartdb/issues/874)) ([44be48f](https://github.com/chartdb/chartdb/commit/44be48ff3ad1361279331c17364090b13af471a1))
+* initially show filter when filter active ([#853](https://github.com/chartdb/chartdb/issues/853)) ([ab4845c](https://github.com/chartdb/chartdb/commit/ab4845c7728e6e0b2d852f8005921fd90630eef9))
+* **menu:** clear file menu ([#843](https://github.com/chartdb/chartdb/issues/843)) ([eaebe34](https://github.com/chartdb/chartdb/commit/eaebe3476824af779214a354b3e991923a22f195))
+* merge relationship & dependency sections to ref section ([#870](https://github.com/chartdb/chartdb/issues/870)) ([ec3719e](https://github.com/chartdb/chartdb/commit/ec3719ebce4664b2aa6e3322fb3337e72bc21015))
+* move dbml into sections menu ([#862](https://github.com/chartdb/chartdb/issues/862)) ([2531a70](https://github.com/chartdb/chartdb/commit/2531a7023f36ef29e67c0da6bca4fd0346b18a51))
+* open filter by default ([#863](https://github.com/chartdb/chartdb/issues/863)) ([7e0fdd1](https://github.com/chartdb/chartdb/commit/7e0fdd1595bffe29e769d29602d04f42edfe417e))
+* preserve composite primary key constraint names across import/export workflows ([#869](https://github.com/chartdb/chartdb/issues/869)) ([215d579](https://github.com/chartdb/chartdb/commit/215d57979df2e91fa61988acff590daad2f4e771))
+* prevent false change detection in DBML editor by stripping public schema on import ([#858](https://github.com/chartdb/chartdb/issues/858)) ([0aaa451](https://github.com/chartdb/chartdb/commit/0aaa451479911d047e4cc83f063afa68a122ba9b))
+* remove unnecessary space ([#845](https://github.com/chartdb/chartdb/issues/845)) ([f1a4298](https://github.com/chartdb/chartdb/commit/f1a429836221aacdda73b91665bf33ffb011164c))
+* reorder with areas ([#846](https://github.com/chartdb/chartdb/issues/846)) ([d7c9536](https://github.com/chartdb/chartdb/commit/d7c9536272cf1d42104b7064ea448d128d091a20))
+* **select-box:** fix select box issue in dialog ([#840](https://github.com/chartdb/chartdb/issues/840)) ([cb2ba66](https://github.com/chartdb/chartdb/commit/cb2ba66233c8c04e2d963cf2d210499d8512a268))
+* set default filter only if has more than 1 schemas ([#855](https://github.com/chartdb/chartdb/issues/855)) ([b4ccfcd](https://github.com/chartdb/chartdb/commit/b4ccfcdcde2f3565b0d3bbc46fa1715feb6cd925))
+* show default schema first ([#854](https://github.com/chartdb/chartdb/issues/854)) ([1759b0b](https://github.com/chartdb/chartdb/commit/1759b0b9f271ed25f7c71f26c344e3f1d97bc5fb))
+* **sidebar:** add titles to sidebar ([#844](https://github.com/chartdb/chartdb/issues/844)) ([b8f2141](https://github.com/chartdb/chartdb/commit/b8f2141bd2e67272030896fb4009a7925f9f09e4))
+* **sql-import:** fix SQL Server foreign key parsing for tables without schema prefix ([#857](https://github.com/chartdb/chartdb/issues/857)) ([04d91c6](https://github.com/chartdb/chartdb/commit/04d91c67b1075e94948f75186878e633df7abbca))
+* **table colors:** switch to default table color ([#841](https://github.com/chartdb/chartdb/issues/841)) ([0da3cae](https://github.com/chartdb/chartdb/commit/0da3caeeac37926dd22f38d98423611f39c0412a))
+* update filter on adding table ([#838](https://github.com/chartdb/chartdb/issues/838)) ([41ba251](https://github.com/chartdb/chartdb/commit/41ba25137789dda25266178cd7c96ecbb37e62a4))
+
 ## [1.14.0](https://github.com/chartdb/chartdb/compare/v1.13.2...v1.14.0) (2025-08-04)
 
 

index.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="robots" content="max-image-preview:large" />
+        <meta name="robots" content="noindex, max-image-preview:large" />
         <title>ChartDB - Create & Visualize Database Schema Diagrams</title>
         <link rel="canonical" href="https://chartdb.io" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -16,14 +16,19 @@
         <script src="/config.js"></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');
+            (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.setAttribute('data-canonical', 'false');
+                    script.setAttribute('data-spa', 'auto');
                     script.defer = true;
                     document.head.appendChild(script);
                 }

package.json

@@ -1,7 +1,7 @@
 {
     "name": "chartdb",
     "private": true,
-    "version": "1.14.0",
+    "version": "1.17.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -17,7 +17,7 @@
     },
     "dependencies": {
         "@ai-sdk/openai": "^0.0.51",
-        "@dbml/core": "^3.9.5",
+        "@dbml/core": "^3.13.9",
         "@dnd-kit/sortable": "^8.0.0",
         "@monaco-editor/react": "^4.6.0",
         "@radix-ui/react-accordion": "^1.2.0",
@@ -26,22 +26,22 @@
         "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-collapsible": "^1.1.0",
         "@radix-ui/react-context-menu": "^2.2.1",
-        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-hover-card": "^1.1.1",
-        "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-menubar": "^1.1.1",
         "@radix-ui/react-popover": "^1.1.1",
         "@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-separator": "^1.1.7",
         "@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",
         "@radix-ui/react-toggle-group": "^1.1.0",
-        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-tooltip": "^1.2.7",
         "@uidotdev/usehooks": "^2.4.1",
         "@xyflow/react": "^12.8.2",
         "ahooks": "^3.8.1",

public/robots.txt

@@ -1,4 +1,4 @@
 User-agent: *
-Allow: /
+Disallow: /
 
 Sitemap: https://app.chartdb.io/sitemap.xml

src/components/button/button-variants.tsx

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
         variants: {
             variant: {

src/components/button/button-with-alternatives.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from './button-variants';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/dropdown-menu/dropdown-menu';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from '@/components/tooltip/tooltip';
+
+export interface ButtonAlternative {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    className?: string;
+    tooltip?: string;
+}
+
+export interface ButtonWithAlternativesProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    alternatives: Array<ButtonAlternative>;
+    dropdownTriggerClassName?: string;
+    chevronDownIconClassName?: string;
+}
+
+const ButtonWithAlternatives = React.forwardRef<
+    HTMLButtonElement,
+    ButtonWithAlternativesProps
+>(
+    (
+        {
+            className,
+            variant,
+            size,
+            asChild = false,
+            alternatives,
+            children,
+            onClick,
+            dropdownTriggerClassName,
+            chevronDownIconClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const Comp = asChild ? Slot : 'button';
+        const hasAlternatives = (alternatives?.length ?? 0) > 0;
+
+        return (
+            <div className="inline-flex items-stretch">
+                <Comp
+                    className={cn(
+                        buttonVariants({ variant, size }),
+                        { 'rounded-r-none': hasAlternatives },
+                        className
+                    )}
+                    ref={ref}
+                    onClick={onClick}
+                    {...props}
+                >
+                    {children}
+                </Comp>
+                {hasAlternatives ? (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <button
+                                className={cn(
+                                    buttonVariants({ variant, size }),
+                                    'rounded-l-none border-l border-l-primary/5 px-2 min-w-0',
+                                    className?.includes('h-') &&
+                                        className.match(/h-\d+/)?.[0],
+                                    className?.includes('text-') &&
+                                        className.match(/text-\w+/)?.[0],
+                                    dropdownTriggerClassName
+                                )}
+                                type="button"
+                            >
+                                <ChevronDownIcon
+                                    className={cn(
+                                        'size-4 shrink-0',
+                                        chevronDownIconClassName
+                                    )}
+                                />
+                            </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            {alternatives.map((alternative, index) => {
+                                const menuItem = (
+                                    <DropdownMenuItem
+                                        key={index}
+                                        onClick={alternative.onClick}
+                                        disabled={alternative.disabled}
+                                        className={cn(alternative.className)}
+                                    >
+                                        <span className="flex w-full items-center justify-between gap-2">
+                                            {alternative.label}
+                                            {alternative.icon}
+                                        </span>
+                                    </DropdownMenuItem>
+                                );
+
+                                if (alternative.tooltip) {
+                                    return (
+                                        <Tooltip key={index}>
+                                            <TooltipTrigger asChild>
+                                                {menuItem}
+                                            </TooltipTrigger>
+                                            <TooltipContent side="left">
+                                                {alternative.tooltip}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    );
+                                }
+
+                                return menuItem;
+                            })}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                ) : null}
+            </div>
+        );
+    }
+);
+ButtonWithAlternatives.displayName = 'ButtonWithAlternatives';
+
+export { ButtonWithAlternatives };

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

@@ -38,7 +38,7 @@ export interface CodeSnippetProps {
     className?: string;
     code: string;
     codeToCopy?: string;
-    language?: 'sql' | 'shell';
+    language?: 'sql' | 'shell' | 'dbml';
     loading?: boolean;
     autoScroll?: boolean;
     isComplete?: boolean;

src/components/code-snippet/languages/dbml-language.ts

@@ -9,12 +9,14 @@ export const setupDBMLLanguage = (monaco: Monaco) => {
         base: 'vs-dark',
         inherit: true,
         rules: [
+            { token: 'comment', foreground: '6A9955' }, // Comments
             { token: 'keyword', foreground: '569CD6' }, // Table, Ref keywords
             { token: 'string', foreground: 'CE9178' }, // Strings
             { token: 'annotation', foreground: '9CDCFE' }, // [annotations]
             { token: 'delimiter', foreground: 'D4D4D4' }, // Braces {}
             { token: 'operator', foreground: 'D4D4D4' }, // Operators
-            { token: 'datatype', foreground: '4EC9B0' }, // Data types
+            { token: 'type', foreground: '4EC9B0' }, // Data types
+            { token: 'identifier', foreground: '9CDCFE' }, // Field names
         ],
         colors: {},
     });
@@ -23,12 +25,14 @@ export const setupDBMLLanguage = (monaco: Monaco) => {
         base: 'vs',
         inherit: true,
         rules: [
+            { token: 'comment', foreground: '008000' }, // Comments
             { token: 'keyword', foreground: '0000FF' }, // Table, Ref keywords
             { token: 'string', foreground: 'A31515' }, // Strings
             { token: 'annotation', foreground: '001080' }, // [annotations]
             { token: 'delimiter', foreground: '000000' }, // Braces {}
             { token: 'operator', foreground: '000000' }, // Operators
             { token: 'type', foreground: '267F99' }, // Data types
+            { token: 'identifier', foreground: '001080' }, // Field names
         ],
         colors: {},
     });
@@ -37,23 +41,59 @@ export const setupDBMLLanguage = (monaco: Monaco) => {
     const datatypePattern = dataTypesNames.join('|');
 
     monaco.languages.setMonarchTokensProvider('dbml', {
-        keywords: ['Table', 'Ref', 'Indexes', 'Note', 'Enum'],
+        keywords: ['Table', 'Ref', 'Indexes', 'Note', 'Enum', 'enum'],
         datatypes: dataTypesNames,
+        operators: ['>', '<', '-'],
+
         tokenizer: {
             root: [
+                // Comments
+                [/\/\/.*$/, 'comment'],
+
+                // Keywords - case insensitive
                 [
                     /\b([Tt][Aa][Bb][Ll][Ee]|[Ee][Nn][Uu][Mm]|[Rr][Ee][Ff]|[Ii][Nn][Dd][Ee][Xx][Ee][Ss]|[Nn][Oo][Tt][Ee])\b/,
                     'keyword',
                 ],
+
+                // Annotations in brackets
                 [/\[.*?\]/, 'annotation'],
+
+                // Strings
                 [/'''/, 'string', '@tripleQuoteString'],
-                [/".*?"/, 'string'],
-                [/'.*?'/, 'string'],
+                [/"([^"\\]|\\.)*$/, 'string.invalid'], // non-terminated string
+                [/'([^'\\]|\\.)*$/, 'string.invalid'], // non-terminated string
+                [/"/, 'string', '@string_double'],
+                [/'/, 'string', '@string_single'],
                 [/`.*?`/, 'string'],
-                [/[{}]/, 'delimiter'],
-                [/[<>]/, 'operator'],
-                [new RegExp(`\\b(${datatypePattern})\\b`, 'i'), 'type'], // Added 'i' flag for case-insensitive matching
+
+                // Delimiters and operators
+                [/[{}()]/, 'delimiter'],
+                [/[<>-]/, 'operator'],
+                [/:/, 'delimiter'],
+
+                // Data types
+                [new RegExp(`\\b(${datatypePattern})\\b`, 'i'), 'type'],
+
+                // Numbers
+                [/\d+/, 'number'],
+
+                // Identifiers
+                [/[a-zA-Z_]\w*/, 'identifier'],
             ],
+
+            string_double: [
+                [/[^\\"]+/, 'string'],
+                [/\\./, 'string.escape'],
+                [/"/, 'string', '@pop'],
+            ],
+
+            string_single: [
+                [/[^\\']+/, 'string'],
+                [/\\./, 'string.escape'],
+                [/'/, 'string', '@pop'],
+            ],
+
             tripleQuoteString: [
                 [/[^']+/, 'string'],
                 [/'''/, 'string', '@pop'],

src/components/color-picker/color-picker.tsx

@@ -5,27 +5,45 @@ import {
     PopoverTrigger,
 } from '@/components/popover/popover';
 import { colorOptions } from '@/lib/colors';
+import { cn } from '@/lib/utils';
 
 export interface ColorPickerProps {
     color: string;
     onChange: (color: string) => void;
+    disabled?: boolean;
+    popoverOnMouseDown?: (e: React.MouseEvent) => void;
+    popoverOnClick?: (e: React.MouseEvent) => void;
 }
 
 export const ColorPicker = React.forwardRef<
     React.ElementRef<typeof PopoverTrigger>,
     ColorPickerProps
->(({ color, onChange }, ref) => {
+>(({ color, onChange, disabled, popoverOnMouseDown, popoverOnClick }, ref) => {
     return (
         <Popover>
-            <PopoverTrigger asChild ref={ref}>
+            <PopoverTrigger
+                asChild
+                ref={ref}
+                disabled={disabled}
+                {...(disabled ? { onClick: (e) => e.preventDefault() } : {})}
+            >
                 <div
-                    className="h-6 w-8 cursor-pointer rounded-md border-2 border-muted transition-shadow hover:shadow-md"
+                    className={cn(
+                        'h-6 w-8 cursor-pointer rounded-md border-2 border-muted transition-shadow hover:shadow-md',
+                        {
+                            'hover:shadow-none cursor-default': disabled,
+                        }
+                    )}
                     style={{
                         backgroundColor: color,
                     }}
                 />
             </PopoverTrigger>
-            <PopoverContent className="w-fit">
+            <PopoverContent
+                className="w-fit"
+                onMouseDown={popoverOnMouseDown}
+                onClick={popoverOnClick}
+            >
                 <div className="grid grid-cols-4 gap-2">
                     {colorOptions.map((option) => (
                         <div

src/components/dialog/dialog.tsx

@@ -4,6 +4,7 @@ import { Cross2Icon } from '@radix-ui/react-icons';
 
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../scroll-area/scroll-area';
+import { ChevronLeft } from 'lucide-react';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -32,28 +33,75 @@ const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
         showClose?: boolean;
+        showBack?: boolean;
+        backButtonClassName?: string;
+        blurBackground?: boolean;
+        forceOverlay?: boolean;
+        onBackClick?: () => void;
     }
->(({ className, children, showClose, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-                className
-            )}
-            {...props}
-        >
-            {children}
-            {showClose && (
-                <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                    <Cross2Icon className="size-4" />
-                    <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-            )}
-        </DialogPrimitive.Content>
-    </DialogPortal>
-));
+>(
+    (
+        {
+            className,
+            children,
+            showClose,
+            showBack,
+            onBackClick,
+            backButtonClassName,
+            blurBackground,
+            forceOverlay,
+            ...props
+        },
+        ref
+    ) => (
+        <DialogPortal>
+            {forceOverlay ? (
+                <div
+                    className={cn(
+                        'fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+                        {
+                            'bg-black/80': !blurBackground,
+                            'bg-black/30 backdrop-blur-sm': blurBackground,
+                        }
+                    )}
+                    data-state="open"
+                />
+            ) : null}
+            <DialogOverlay
+                className={cn({
+                    'bg-black/30 backdrop-blur-sm': blurBackground,
+                })}
+            />
+            <DialogPrimitive.Content
+                ref={ref}
+                className={cn(
+                    'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {showBack && (
+                    <button
+                        onClick={() => onBackClick?.()}
+                        className={cn(
+                            'absolute left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+                            backButtonClassName
+                        )}
+                    >
+                        <ChevronLeft className="size-4" />
+                    </button>
+                )}
+                {showClose && (
+                    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                        <Cross2Icon className="size-4" />
+                        <span className="sr-only">Close</span>
+                    </DialogPrimitive.Close>
+                )}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

src/components/input/input.tsx

@@ -2,16 +2,13 @@ import React from 'react';
 
 import { cn } from '@/lib/utils';
 
-export interface InputProps
-    extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
     ({ className, type, ...props }, ref) => {
         return (
             <input
                 type={type}
                 className={cn(
-                    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
                     className
                 )}
                 ref={ref}

src/components/popover/popover.tsx

@@ -11,40 +11,21 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
     React.ElementRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-        container?: HTMLElement | null;
-    }
->(
-    (
-        { className, align = 'center', sideOffset = 4, container, ...props },
-        ref
-    ) => {
-        const Content = (
-            <PopoverPrimitive.Content
-                ref={ref}
-                align={align}
-                sideOffset={sideOffset}
-                className={cn(
-                    'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                    className
-                )}
-                {...props}
-            />
-        );
-
-        // If container is explicitly null, don't use Portal
-        if (container === null) {
-            return Content;
-        }
-
-        // Otherwise, use Portal (default behavior)
-        return (
-            <PopoverPrimitive.Portal container={container}>
-                {Content}
-            </PopoverPrimitive.Portal>
-        );
-    }
-);
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+                'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className
+            )}
+            {...props}
+        />
+    </PopoverPrimitive.Portal>
+));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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

@@ -27,6 +27,7 @@ export interface SelectBoxOption {
     regex?: string;
     extractRegex?: RegExp;
     group?: string;
+    icon?: React.ReactNode;
 }
 
 export interface SelectBoxProps {
@@ -53,6 +54,11 @@ export interface SelectBoxProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     popoverClassName?: string;
+    readonly?: boolean;
+    footerButtons?: React.ReactNode;
+    commandOnMouseDown?: (e: React.MouseEvent) => void;
+    commandOnClick?: (e: React.MouseEvent) => void;
+    onSearchChange?: (search: string) => void;
 }
 
 export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
@@ -78,6 +84,11 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
             open,
             onOpenChange: setOpen,
             popoverClassName,
+            readonly,
+            footerButtons,
+            commandOnMouseDown,
+            commandOnClick,
+            onSearchChange,
         },
         ref
     ) => {
@@ -152,18 +163,20 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                             className={`inline-flex min-w-0 shrink-0 items-center gap-1 rounded-md border py-0.5 pl-2 pr-1 text-xs font-medium text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${oneLine ? 'mx-0.5' : ''}`}
                         >
                             <span>{option.label}</span>
-                            <span
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    handleSelect(option.value);
-                                }}
-                                className="flex items-center rounded-sm px-px text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground"
-                            >
-                                <Cross2Icon />
-                            </span>
+                            {!readonly ? (
+                                <span
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        handleSelect(option.value);
+                                    }}
+                                    className="flex items-center rounded-sm px-px text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground"
+                                >
+                                    <Cross2Icon />
+                                </span>
+                            ) : null}
                         </span>
                     )),
-            [options, value, handleSelect, oneLine, keepOrder]
+            [options, value, handleSelect, oneLine, keepOrder, readonly]
         );
 
         const isAllSelected = React.useMemo(
@@ -237,6 +250,8 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                                 matches?.map((match) => match?.toString())
                             )
                         }
+                        onMouseDown={commandOnMouseDown}
+                        onClick={commandOnClick}
                     >
                         {multiple && (
                             <div
@@ -251,6 +266,11 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                             </div>
                         )}
                         <div className="flex flex-1 items-center truncate">
+                            {option.icon ? (
+                                <span className="mr-2 shrink-0">
+                                    {option.icon}
+                                </span>
+                            ) : null}
                             <span>
                                 {isRegexMatch ? searchTerm : option.label}
                                 {!isRegexMatch && optionSuffix
@@ -277,15 +297,23 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                     </CommandItem>
                 );
             },
-            [value, multiple, searchTerm, handleSelect, optionSuffix]
+            [
+                value,
+                multiple,
+                searchTerm,
+                handleSelect,
+                optionSuffix,
+                commandOnClick,
+                commandOnMouseDown,
+            ]
         );
 
         return (
-            <Popover open={isOpen} onOpenChange={onOpenChange}>
+            <Popover open={isOpen} onOpenChange={onOpenChange} modal={true}>
                 <PopoverTrigger asChild tabIndex={0} onKeyDown={handleKeyDown}>
                     <div
                         className={cn(
-                            `flex min-h-[36px] cursor-pointer items-center justify-between rounded-md border px-3 py-1 data-[state=open]:border-ring ${disabled ? 'bg-muted pointer-events-none' : ''}`,
+                            `flex min-h-[36px] cursor-pointer items-center justify-between rounded-md border px-3 py-1 data-[state=open]:border-ring ${disabled ? 'bg-muted pointer-events-none' : ''} ${readonly ? 'pointer-events-none' : ''}`,
                             className
                         )}
                     >
@@ -355,7 +383,8 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                         popoverClassName
                     )}
                     align="center"
-                    container={null}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={(e) => e.stopPropagation()}
                 >
                     <Command
                         filter={(value, search, keywords) => {
@@ -378,7 +407,10 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                         <div className="relative">
                             <CommandInput
                                 value={searchTerm}
-                                onValueChange={(e) => setSearchTerm(e)}
+                                onValueChange={(e) => {
+                                    setSearchTerm(e);
+                                    onSearchChange?.(e);
+                                }}
                                 ref={ref}
                                 placeholder={inputPlaceholder ?? 'Search...'}
                                 className="h-9"
@@ -423,33 +455,31 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                         <CommandEmpty>
                             {emptyPlaceholder ?? 'No results found.'}
                         </CommandEmpty>
+
                         <ScrollArea>
-                            <div className="max-h-64">
-                                {hasGroups ? (
-                                    Object.entries(groups).map(
-                                        ([groupName, groupOptions]) => (
-                                            <CommandGroup
-                                                key={groupName}
-                                                heading={groupName}
-                                            >
-                                                <CommandList>
-                                                    {groupOptions.map(
-                                                        renderOption
-                                                    )}
-                                                </CommandList>
-                                            </CommandGroup>
-                                        )
-                                    )
-                                ) : (
-                                    <CommandGroup>
-                                        <CommandList>
-                                            {options.map(renderOption)}
-                                        </CommandList>
-                                    </CommandGroup>
-                                )}
+                            <div className="max-h-64 w-full">
+                                <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>
+                    {footerButtons ? (
+                        <div className="border-t">{footerButtons}</div>
+                    ) : null}
                 </PopoverContent>
             </Popover>
         );

src/components/sidebar/sidebar.tsx

@@ -29,6 +29,7 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_ICON_EXTENDED = '4rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 type SidebarContext = {
@@ -142,6 +143,8 @@ const SidebarProvider = React.forwardRef<
                             {
                                 '--sidebar-width': SIDEBAR_WIDTH,
                                 '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                                '--sidebar-width-icon-extended':
+                                    SIDEBAR_WIDTH_ICON_EXTENDED,
                                 ...style,
                             } as React.CSSProperties
                         }
@@ -166,7 +169,7 @@ const Sidebar = React.forwardRef<
     React.ComponentProps<'div'> & {
         side?: 'left' | 'right';
         variant?: 'sidebar' | 'floating' | 'inset';
-        collapsible?: 'offcanvas' | 'icon' | 'none';
+        collapsible?: 'offcanvas' | 'icon' | 'icon-extended' | 'none';
     }
 >(
     (
@@ -245,8 +248,8 @@ const Sidebar = React.forwardRef<
                         'group-data-[collapsible=offcanvas]:w-0',
                         'group-data-[side=right]:rotate-180',
                         variant === 'floating' || variant === 'inset'
-                            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-                            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+                            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))] group-data-[collapsible=icon-extended]:w-[calc(var(--sidebar-width-icon-extended)_+_theme(spacing.4))]'
+                            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[collapsible=icon-extended]:w-[--sidebar-width-icon-extended]'
                     )}
                 />
                 <div
@@ -257,8 +260,8 @@ const Sidebar = React.forwardRef<
                             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
                         // Adjust the padding for floating and inset variants.
                         variant === 'floating' || variant === 'inset'
-                            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)] group-data-[collapsible=icon-extended]:w-[calc(var(--sidebar-width-icon-extended)_+_theme(spacing.4)_+2px)]'
+                            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[collapsible=icon-extended]:w-[--sidebar-width-icon-extended] group-data-[side=left]:border-r group-data-[side=right]:border-l',
                         className
                     )}
                     {...props}
@@ -421,7 +424,7 @@ const SidebarContent = React.forwardRef<
             ref={ref}
             data-sidebar="content"
             className={cn(
-                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon-extended]:overflow-hidden',
                 className
             )}
             {...props}
@@ -461,6 +464,7 @@ const SidebarGroupLabel = React.forwardRef<
             className={cn(
                 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
                 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+                'group-data-[collapsible=icon-extended]:-mt-8 group-data-[collapsible=icon-extended]:opacity-0',
                 className
             )}
             {...props}
@@ -483,7 +487,7 @@ const SidebarGroupAction = React.forwardRef<
                 'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
                 // Increases the hit area of the button on mobile.
                 'after:absolute after:-inset-2 after:md:hidden',
-                'group-data-[collapsible=icon]:hidden',
+                'group-data-[collapsible=icon]:hidden group-data-[collapsible=icon-extended]:hidden',
                 className
             )}
             {...props}
@@ -532,7 +536,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon-extended]:h-auto group-data-[collapsible=icon-extended]:flex-col group-data-[collapsible=icon-extended]:gap-1 group-data-[collapsible=icon-extended]:p-2 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate group-data-[collapsible=icon-extended]:[&>span]:w-full group-data-[collapsible=icon-extended]:[&>span]:text-center group-data-[collapsible=icon-extended]:[&>span]:text-[10px] group-data-[collapsible=icon-extended]:[&>span]:leading-tight [&>svg]:size-4 [&>svg]:shrink-0',
     {
         variants: {
             variant: {
@@ -636,7 +640,7 @@ const SidebarMenuAction = React.forwardRef<
                 'peer-data-[size=sm]/menu-button:top-1',
                 'peer-data-[size=default]/menu-button:top-1.5',
                 'peer-data-[size=lg]/menu-button:top-2.5',
-                'group-data-[collapsible=icon]:hidden',
+                'group-data-[collapsible=icon]:hidden group-data-[collapsible=icon-extended]:hidden',
                 showOnHover &&
                     'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
                 className
@@ -753,7 +757,7 @@ const SidebarMenuSubButton = React.forwardRef<
                 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
                 size === 'sm' && 'text-xs',
                 size === 'md' && 'text-sm',
-                'group-data-[collapsible=icon]:hidden',
+                'group-data-[collapsible=icon]:hidden group-data-[collapsible=icon-extended]:hidden',
                 className
             )}
             {...props}

src/components/tooltip/tooltip.tsx

@@ -13,15 +13,17 @@ const TooltipContent = React.forwardRef<
     React.ElementRef<typeof TooltipPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
+    // <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-            'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
             className
         )}
         {...props}
     />
+    // </TooltipPrimitive.Portal>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 

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

@@ -42,6 +42,7 @@ interface TreeViewProps<
     renderHoverComponent?: (node: TreeNode<Type, Context>) => ReactNode;
     renderActionsComponent?: (node: TreeNode<Type, Context>) => ReactNode;
     loadingNodeIds?: string[];
+    disableCache?: boolean;
 }
 
 export function TreeView<
@@ -62,12 +63,14 @@ export function TreeView<
     renderHoverComponent,
     renderActionsComponent,
     loadingNodeIds,
+    disableCache = false,
 }: TreeViewProps<Type, Context>) {
     const { expanded, loading, loadedChildren, hasMoreChildren, toggleNode } =
         useTree({
             fetchChildren,
             expanded: expandedProp,
             setExpanded: setExpandedProp,
+            disableCache,
         });
     const [selectedIdInternal, setSelectedIdInternal] = React.useState<
         string | undefined
@@ -145,6 +148,7 @@ export function TreeView<
                     renderHoverComponent={renderHoverComponent}
                     renderActionsComponent={renderActionsComponent}
                     loadingNodeIds={loadingNodeIds}
+                    disableCache={disableCache}
                 />
             ))}
         </div>
@@ -179,6 +183,7 @@ interface TreeNodeProps<
     renderHoverComponent?: (node: TreeNode<Type, Context>) => ReactNode;
     renderActionsComponent?: (node: TreeNode<Type, Context>) => ReactNode;
     loadingNodeIds?: string[];
+    disableCache?: boolean;
 }
 
 function TreeNode<Type extends string, Context extends Record<Type, unknown>>({
@@ -201,11 +206,16 @@ function TreeNode<Type extends string, Context extends Record<Type, unknown>>({
     renderHoverComponent,
     renderActionsComponent,
     loadingNodeIds,
+    disableCache = false,
 }: 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;
+    // If cache is disabled, always use fresh node.children
+    // Otherwise, use cached loadedChildren if available (for async fetched data)
+    const children = disableCache
+        ? node.children
+        : node.children || loadedChildren[node.id];
     const isSelected = selectedId === node.id;
 
     const IconComponent =
@@ -423,6 +433,7 @@ function TreeNode<Type extends string, Context extends Record<Type, unknown>>({
                                 renderHoverComponent={renderHoverComponent}
                                 renderActionsComponent={renderActionsComponent}
                                 loadingNodeIds={loadingNodeIds}
+                                disableCache={disableCache}
                             />
                         ))}
                         {isLoading ? (

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

@@ -28,10 +28,12 @@ export function useTree<
     fetchChildren,
     expanded: expandedProp,
     setExpanded: setExpandedProp,
+    disableCache = false,
 }: {
     fetchChildren?: FetchChildrenFunction<Type, Context>;
     expanded?: ExpandedState;
     setExpanded?: Dispatch<SetStateAction<ExpandedState>>;
+    disableCache?: boolean;
 }) {
     const [expandedInternal, setExpandedInternal] = useState<ExpandedState>({});
 
@@ -89,8 +91,8 @@ export function useTree<
             // Get any previously fetched children
             const previouslyFetchedChildren = loadedChildren[nodeId] || [];
 
-            // If we have static children, merge them with any previously fetched children
-            if (staticChildren?.length) {
+            // Only cache if caching is enabled
+            if (!disableCache && staticChildren?.length) {
                 const mergedChildren = mergeChildren(
                     staticChildren,
                     previouslyFetchedChildren
@@ -110,8 +112,8 @@ export function useTree<
             // 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) {
+            // If we haven't loaded dynamic children yet and cache is enabled
+            if (!disableCache && !previouslyFetchedChildren.length) {
                 setLoading((prev) => ({ ...prev, [nodeId]: true }));
                 try {
                     const fetchedChildren = await fetchChildren?.(
@@ -140,7 +142,14 @@ export function useTree<
                 }
             }
         },
-        [expanded, loadedChildren, fetchChildren, mergeChildren, setExpanded]
+        [
+            expanded,
+            loadedChildren,
+            fetchChildren,
+            mergeChildren,
+            setExpanded,
+            disableCache,
+        ]
     );
 
     return {

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

@@ -14,6 +14,41 @@ export interface CanvasContext {
     overlapGraph: Graph<string>;
     setShowFilter: React.Dispatch<React.SetStateAction<boolean>>;
     showFilter: boolean;
+    editTableModeTable: {
+        tableId: string;
+        fieldId?: string;
+    } | null;
+    setEditTableModeTable: React.Dispatch<
+        React.SetStateAction<{
+            tableId: string;
+            fieldId?: string;
+        } | null>
+    >;
+    tempFloatingEdge: {
+        sourceNodeId: string;
+        targetNodeId?: string;
+    } | null;
+    setTempFloatingEdge: React.Dispatch<
+        React.SetStateAction<{
+            sourceNodeId: string;
+            targetNodeId?: string;
+        } | null>
+    >;
+    startFloatingEdgeCreation: ({
+        sourceNodeId,
+    }: {
+        sourceNodeId: string;
+    }) => void;
+    endFloatingEdgeCreation: () => void;
+    hoveringTableId: string | null;
+    setHoveringTableId: React.Dispatch<React.SetStateAction<string | null>>;
+    showCreateRelationshipNode: (params: {
+        sourceTableId: string;
+        targetTableId: string;
+        x: number;
+        y: number;
+    }) => void;
+    hideCreateRelationshipNode: () => void;
 }
 
 export const canvasContext = createContext<CanvasContext>({
@@ -23,4 +58,14 @@ export const canvasContext = createContext<CanvasContext>({
     overlapGraph: createGraph(),
     setShowFilter: emptyFn,
     showFilter: false,
+    editTableModeTable: null,
+    setEditTableModeTable: emptyFn,
+    tempFloatingEdge: null,
+    setTempFloatingEdge: emptyFn,
+    startFloatingEdgeCreation: emptyFn,
+    endFloatingEdgeCreation: emptyFn,
+    hoveringTableId: null,
+    setHoveringTableId: emptyFn,
+    showCreateRelationshipNode: emptyFn,
+    hideCreateRelationshipNode: emptyFn,
 });

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

@@ -1,4 +1,11 @@
-import React, { type ReactNode, useCallback, useState } from 'react';
+import React, {
+    type ReactNode,
+    useCallback,
+    useState,
+    useEffect,
+    useRef,
+} from 'react';
+import type { CanvasContext } from './canvas-context';
 import { canvasContext } from './canvas-context';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { adjustTablePositions } from '@/lib/domain/db-table';
@@ -9,21 +16,56 @@ import { createGraph } from '@/lib/graph';
 import { useDiagramFilter } from '../diagram-filter-context/use-diagram-filter';
 import { filterTable } from '@/lib/domain/diagram-filter/filter';
 import { defaultSchemas } from '@/lib/data/default-schemas';
+import {
+    CREATE_RELATIONSHIP_NODE_ID,
+    type CreateRelationshipNodeType,
+} from '@/pages/editor-page/canvas/create-relationship-node/create-relationship-node';
 
 interface CanvasProviderProps {
     children: ReactNode;
 }
 
 export const CanvasProvider = ({ children }: CanvasProviderProps) => {
-    const { tables, relationships, updateTablesState, databaseType } =
-        useChartDB();
-    const { filter } = useDiagramFilter();
-    const { fitView } = useReactFlow();
+    const {
+        tables,
+        relationships,
+        updateTablesState,
+        databaseType,
+        areas,
+        diagramId,
+    } = useChartDB();
+    const { filter, loading: filterLoading } = useDiagramFilter();
+    const { fitView, screenToFlowPosition, setNodes } = useReactFlow();
     const [overlapGraph, setOverlapGraph] =
         useState<Graph<string>>(createGraph());
+    const [editTableModeTable, setEditTableModeTable] = useState<{
+        tableId: string;
+        fieldId?: string;
+    } | null>(null);
 
     const [showFilter, setShowFilter] = useState(false);
 
+    const [tempFloatingEdge, setTempFloatingEdge] =
+        useState<CanvasContext['tempFloatingEdge']>(null);
+
+    const [hoveringTableId, setHoveringTableId] = useState<string | null>(null);
+
+    const diagramIdActiveFilterRef = useRef<string>();
+
+    useEffect(() => {
+        if (filterLoading) {
+            return;
+        }
+
+        if (diagramIdActiveFilterRef.current === diagramId) {
+            return;
+        }
+
+        diagramIdActiveFilterRef.current = diagramId;
+
+        setShowFilter(true);
+    }, [filterLoading, diagramId]);
+
     const reorderTables = useCallback(
         (
             options: { updateHistory?: boolean } = {
@@ -44,6 +86,7 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
                         },
                     })
                 ),
+                areas,
                 mode: 'all',
             });
 
@@ -86,9 +129,70 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
             updateTablesState,
             fitView,
             databaseType,
+            areas,
         ]
     );
 
+    const startFloatingEdgeCreation: CanvasContext['startFloatingEdgeCreation'] =
+        useCallback(({ sourceNodeId }) => {
+            setShowFilter(false);
+            setTempFloatingEdge({
+                sourceNodeId,
+            });
+        }, []);
+
+    const endFloatingEdgeCreation: CanvasContext['endFloatingEdgeCreation'] =
+        useCallback(() => {
+            setTempFloatingEdge(null);
+        }, []);
+
+    const hideCreateRelationshipNode: CanvasContext['hideCreateRelationshipNode'] =
+        useCallback(() => {
+            setNodes((nds) =>
+                nds.filter((n) => n.id !== CREATE_RELATIONSHIP_NODE_ID)
+            );
+            endFloatingEdgeCreation();
+        }, [setNodes, endFloatingEdgeCreation]);
+
+    const showCreateRelationshipNode: CanvasContext['showCreateRelationshipNode'] =
+        useCallback(
+            ({ sourceTableId, targetTableId, x, y }) => {
+                setTempFloatingEdge((edge) =>
+                    edge
+                        ? {
+                              ...edge,
+                              targetNodeId: targetTableId,
+                          }
+                        : null
+                );
+                const cursorPos = screenToFlowPosition({
+                    x,
+                    y,
+                });
+
+                const newNode: CreateRelationshipNodeType = {
+                    id: CREATE_RELATIONSHIP_NODE_ID,
+                    type: 'create-relationship',
+                    position: cursorPos,
+                    data: {
+                        sourceTableId,
+                        targetTableId,
+                    },
+                    draggable: true,
+                    selectable: false,
+                    zIndex: 1000,
+                };
+
+                setNodes((nds) => {
+                    const nodesWithoutOldCreateRelationshipNode = nds.filter(
+                        (n) => n.id !== CREATE_RELATIONSHIP_NODE_ID
+                    );
+                    return [...nodesWithoutOldCreateRelationshipNode, newNode];
+                });
+            },
+            [screenToFlowPosition, setNodes]
+        );
+
     return (
         <canvasContext.Provider
             value={{
@@ -98,6 +202,16 @@ export const CanvasProvider = ({ children }: CanvasProviderProps) => {
                 overlapGraph,
                 setShowFilter,
                 showFilter,
+                editTableModeTable,
+                setEditTableModeTable,
+                tempFloatingEdge: tempFloatingEdge,
+                setTempFloatingEdge: setTempFloatingEdge,
+                startFloatingEdgeCreation: startFloatingEdgeCreation,
+                endFloatingEdgeCreation: endFloatingEdgeCreation,
+                hoveringTableId,
+                setHoveringTableId,
+                showCreateRelationshipNode,
+                hideCreateRelationshipNode,
             }}
         >
             {children}

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

@@ -1,12 +1,15 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import type { DBTable } from '@/lib/domain/db-table';
 import { deepCopy, generateId } from '@/lib/utils';
-import { randomColor } from '@/lib/colors';
+import { defaultTableColor, defaultAreaColor, viewColor } from '@/lib/colors';
 import type { ChartDBContext, ChartDBEvent } from './chartdb-context';
 import { chartDBContext } from './chartdb-context';
 import { DatabaseType } from '@/lib/domain/database-type';
 import type { DBField } from '@/lib/domain/db-field';
-import type { DBIndex } from '@/lib/domain/db-index';
+import {
+    getTableIndexesWithPrimaryKey,
+    type DBIndex,
+} from '@/lib/domain/db-index';
 import type { DBRelationship } from '@/lib/domain/db-relationship';
 import { useStorage } from '@/hooks/use-storage';
 import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
@@ -38,8 +41,7 @@ export const ChartDBProvider: React.FC<
     React.PropsWithChildren<ChartDBProviderProps>
 > = ({ children, diagram, readonly: readonlyProp }) => {
     const { hasDiff } = useDiff();
-    const dbStorage = useStorage();
-    let db = dbStorage;
+    const storageDB = useStorage();
     const events = useEventEmitter<ChartDBEvent>();
     const { addUndoAction, resetRedoStack, resetUndoStack } =
         useRedoUndoStack();
@@ -72,10 +74,10 @@ export const ChartDBProvider: React.FC<
         useState<string>();
 
     const diffCalculatedHandler = useCallback((event: DiffCalculatedEvent) => {
-        const { tablesAdded, fieldsAdded, relationshipsAdded } = event.data;
+        const { tablesToAdd, fieldsToAdd, relationshipsToAdd } = event.data;
         setTables((tables) =>
-            [...tables, ...(tablesAdded ?? [])].map((table) => {
-                const fields = fieldsAdded.get(table.id);
+            [...tables, ...(tablesToAdd ?? [])].map((table) => {
+                const fields = fieldsToAdd.get(table.id);
                 return fields
                     ? { ...table, fields: [...table.fields, ...fields] }
                     : table;
@@ -83,23 +85,22 @@ export const ChartDBProvider: React.FC<
         );
         setRelationships((relationships) => [
             ...relationships,
-            ...(relationshipsAdded ?? []),
+            ...(relationshipsToAdd ?? []),
         ]);
     }, []);
 
     diffEvents.useSubscription(diffCalculatedHandler);
 
-    const defaultSchemaName = defaultSchemas[databaseType];
+    const defaultSchemaName = useMemo(
+        () => defaultSchemas[databaseType],
+        [databaseType]
+    );
 
     const readonly = useMemo(
         () => readonlyProp ?? hasDiff ?? false,
         [readonlyProp, hasDiff]
     );
 
-    if (readonly) {
-        db = storageInitialValue;
-    }
-
     const schemas = useMemo(
         () =>
             databasesWithSchemas.includes(databaseType)
@@ -110,9 +111,11 @@ export const ChartDBProvider: React.FC<
                               .filter((schema) => !!schema) as string[]
                       ),
                   ]
-                      .sort((a, b) =>
-                          a === defaultSchemaName ? -1 : a.localeCompare(b)
-                      )
+                      .sort((a, b) => {
+                          if (a === defaultSchemaName) return -1;
+                          if (b === defaultSchemaName) return 1;
+                          return a.localeCompare(b);
+                      })
                       .map(
                           (schema): DBSchema => ({
                               id: schemaNameToSchemaId(schema),
@@ -126,6 +129,11 @@ export const ChartDBProvider: React.FC<
         [tables, defaultSchemaName, databaseType]
     );
 
+    const db = useMemo(
+        () => (readonly ? storageInitialValue : storageDB),
+        [storageDB, readonly]
+    );
+
     const currentDiagram: Diagram = useMemo(
         () => ({
             id: diagramId,
@@ -337,12 +345,18 @@ export const ChartDBProvider: React.FC<
                     },
                 ],
                 indexes: [],
-                color: randomColor(),
+                color: attributes?.isView ? viewColor : defaultTableColor,
                 createdAt: Date.now(),
                 isView: false,
                 order: tables.length,
                 ...attributes,
+                schema: attributes?.schema ?? defaultSchemas[databaseType],
             };
+
+            table.indexes = getTableIndexesWithPrimaryKey({
+                table,
+            });
+
             await addTable(table);
 
             return table;
@@ -634,17 +648,30 @@ export const ChartDBProvider: React.FC<
             options = { updateHistory: true }
         ) => {
             const prevField = getField(tableId, fieldId);
+
+            const updateTableFn = (table: DBTable) => {
+                const updatedTable: DBTable = {
+                    ...table,
+                    fields: table.fields.map((f) =>
+                        f.id === fieldId ? { ...f, ...field } : f
+                    ),
+                } satisfies DBTable;
+
+                updatedTable.indexes = getTableIndexesWithPrimaryKey({
+                    table: updatedTable,
+                });
+
+                return updatedTable;
+            };
+
             setTables((tables) =>
-                tables.map((table) =>
-                    table.id === tableId
-                        ? {
-                              ...table,
-                              fields: table.fields.map((f) =>
-                                  f.id === fieldId ? { ...f, ...field } : f
-                              ),
-                          }
-                        : table
-                )
+                tables.map((table) => {
+                    if (table.id === tableId) {
+                        return updateTableFn(table);
+                    }
+
+                    return table;
+                })
             );
 
             const table = await db.getTable({ diagramId, id: tableId });
@@ -659,10 +686,7 @@ export const ChartDBProvider: React.FC<
                 db.updateTable({
                     id: tableId,
                     attributes: {
-                        ...table,
-                        fields: table.fields.map((f) =>
-                            f.id === fieldId ? { ...f, ...field } : f
-                        ),
+                        ...updateTableFn(table),
                     },
                 }),
             ]);
@@ -689,19 +713,29 @@ export const ChartDBProvider: React.FC<
             fieldId: string,
             options = { updateHistory: true }
         ) => {
+            const updateTableFn = (table: DBTable) => {
+                const updatedTable: DBTable = {
+                    ...table,
+                    fields: table.fields.filter((f) => f.id !== fieldId),
+                } satisfies DBTable;
+
+                updatedTable.indexes = getTableIndexesWithPrimaryKey({
+                    table: updatedTable,
+                });
+
+                return updatedTable;
+            };
+
             const fields = getTable(tableId)?.fields ?? [];
             const prevField = getField(tableId, fieldId);
             setTables((tables) =>
-                tables.map((table) =>
-                    table.id === tableId
-                        ? {
-                              ...table,
-                              fields: table.fields.filter(
-                                  (f) => f.id !== fieldId
-                              ),
-                          }
-                        : table
-                )
+                tables.map((table) => {
+                    if (table.id === tableId) {
+                        return updateTableFn(table);
+                    }
+
+                    return table;
+                })
             );
 
             events.emit({
@@ -725,8 +759,7 @@ export const ChartDBProvider: React.FC<
                 db.updateTable({
                     id: tableId,
                     attributes: {
-                        ...table,
-                        fields: table.fields.filter((f) => f.id !== fieldId),
+                        ...updateTableFn(table),
                     },
                 }),
             ]);
@@ -1412,7 +1445,7 @@ export const ChartDBProvider: React.FC<
                 y: 0,
                 width: 300,
                 height: 200,
-                color: randomColor(),
+                color: defaultAreaColor,
                 ...attributes,
             };
 
@@ -1548,17 +1581,17 @@ export const ChartDBProvider: React.FC<
 
     const updateDiagramData: ChartDBContext['updateDiagramData'] = useCallback(
         async (diagram, options) => {
-            const st = options?.forceUpdateStorage ? dbStorage : db;
+            const st = options?.forceUpdateStorage ? storageDB : db;
             await st.deleteDiagram(diagram.id);
             await st.addDiagram({ diagram });
             loadDiagramFromData(diagram);
         },
-        [db, dbStorage, loadDiagramFromData]
+        [db, storageDB, loadDiagramFromData]
     );
 
     const loadDiagram: ChartDBContext['loadDiagram'] = useCallback(
         async (diagramId: string) => {
-            const diagram = await db.getDiagram(diagramId, {
+            const diagram = await storageDB.getDiagram(diagramId, {
                 includeRelationships: true,
                 includeTables: true,
                 includeDependencies: true,
@@ -1572,7 +1605,7 @@ export const ChartDBProvider: React.FC<
 
             return diagram;
         },
-        [db, loadDiagramFromData]
+        [storageDB, loadDiagramFromData]
     );
 
     // Custom type operations

src/context/diagram-filter-context/diagram-filter-context.tsx

@@ -8,6 +8,7 @@ import { createContext } from 'react';
 
 export interface DiagramFilterContext {
     filter?: DiagramFilter;
+    loading: boolean;
 
     hasActiveFilter: boolean;
     schemasDisplayed: DBSchema[];
@@ -45,4 +46,5 @@ export const diagramFilterContext = createContext<DiagramFilterContext>({
     schemasDisplayed: [],
     addTablesToFilter: emptyFn,
     removeTablesFromFilter: emptyFn,
+    loading: false,
 });

src/context/diagram-filter-context/diagram-filter-provider.tsx

@@ -18,7 +18,7 @@ import {
 import { useStorage } from '@/hooks/use-storage';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { filterTable } from '@/lib/domain/diagram-filter/filter';
-import { schemaNameToSchemaId } from '@/lib/domain';
+import { databasesWithSchemas, schemaNameToSchemaId } from '@/lib/domain';
 import { defaultSchemas } from '@/lib/data/default-schemas';
 import type { ChartDBEvent } from '../chartdb-context/chartdb-context';
 
@@ -28,6 +28,7 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
     const { diagramId, tables, schemas, databaseType, events } = useChartDB();
     const { getDiagramFilter, updateDiagramFilter } = useStorage();
     const [filter, setFilter] = useState<DiagramFilter>({});
+    const [loading, setLoading] = useState<boolean>(true);
 
     const allSchemasIds = useMemo(() => {
         return schemas.map((schema) => schema.id);
@@ -62,11 +63,26 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
             return;
         }
 
+        setLoading(true);
+
         const loadFilterFromStorage = async (diagramId: string) => {
             if (diagramId) {
                 const storedFilter = await getDiagramFilter(diagramId);
-                setFilter(storedFilter ?? {});
+
+                let filterToSet = storedFilter;
+
+                if (!filterToSet) {
+                    // If no filter is stored, set default based on database type
+                    filterToSet =
+                        schemas.length > 1
+                            ? { schemaIds: [schemas[0].id] }
+                            : {};
+                }
+
+                setFilter(filterToSet);
             }
+
+            setLoading(false);
         };
 
         setFilter({});
@@ -75,7 +91,7 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
             loadFilterFromStorage(diagramId);
             diagramIdOfLoadedFilter.current = diagramId;
         }
-    }, [diagramId, getDiagramFilter]);
+    }, [diagramId, getDiagramFilter, schemas]);
 
     const clearSchemaIds: DiagramFilterContext['clearSchemaIdsFilter'] =
         useCallback(() => {
@@ -189,7 +205,11 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
                             schemaIds: newSchemaIds,
                             tableIds: newTableIds,
                         },
-                        allTables satisfies FilterTableInfo[]
+                        allTables satisfies FilterTableInfo[],
+                        {
+                            databaseWithSchemas:
+                                databasesWithSchemas.includes(databaseType),
+                        }
                     );
                 });
             },
@@ -236,17 +256,21 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
                         schemaIds: undefined,
                         tableIds: newTableIds,
                     },
-                    allTables satisfies FilterTableInfo[]
+                    allTables satisfies FilterTableInfo[],
+                    {
+                        databaseWithSchemas:
+                            databasesWithSchemas.includes(databaseType),
+                    }
                 );
             });
         },
-        [allTables]
+        [allTables, databaseType]
     );
 
     const toggleTableFilter: DiagramFilterContext['toggleTableFilter'] =
         useCallback(
             (tableId: string) => {
-                if (!defaultSchemas[databaseType]) {
+                if (!databasesWithSchemas.includes(databaseType)) {
                     // No schemas, toggle table filter without schema context
                     toggleTableFilterForNoSchema(tableId);
                     return;
@@ -324,7 +348,11 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
                             schemaIds: newSchemaIds,
                             tableIds: newTableIds,
                         },
-                        allTables satisfies FilterTableInfo[]
+                        allTables satisfies FilterTableInfo[],
+                        {
+                            databaseWithSchemas:
+                                databasesWithSchemas.includes(databaseType),
+                        }
                     );
                 });
             },
@@ -434,11 +462,15 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
                             ...filterByTableIds,
                             tableIds: newTableIds,
                         },
-                        allTables satisfies FilterTableInfo[]
+                        allTables satisfies FilterTableInfo[],
+                        {
+                            databaseWithSchemas:
+                                databasesWithSchemas.includes(databaseType),
+                        }
                     );
                 });
             },
-            [allTables]
+            [allTables, databaseType]
         );
 
     const removeTablesFromFilter: DiagramFilterContext['removeTablesFromFilter'] =
@@ -475,11 +507,15 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
                             ...filterByTableIds,
                             tableIds: newTableIds,
                         },
-                        allTables satisfies FilterTableInfo[]
+                        allTables satisfies FilterTableInfo[],
+                        {
+                            databaseWithSchemas:
+                                databasesWithSchemas.includes(databaseType),
+                        }
                     );
                 });
             },
-            [allTables]
+            [allTables, databaseType]
         );
 
     const eventConsumer = useCallback(
@@ -500,6 +536,7 @@ export const DiagramFilterProvider: React.FC<React.PropsWithChildren> = ({
     events.useSubscription(eventConsumer);
 
     const value: DiagramFilterContext = {
+        loading,
         filter,
         clearSchemaIdsFilter: clearSchemaIds,
         setTableIdsFilterEmpty: setTableIdsEmpty,

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

@@ -7,7 +7,6 @@ import type { ExportImageDialogProps } from '@/dialogs/export-image-dialog/expor
 import type { ExportDiagramDialogProps } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
 import type { ImportDiagramDialogProps } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
 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';
 
@@ -67,12 +66,6 @@ export interface DialogContext {
         params: Omit<ImportDiagramDialogProps, 'dialog'>
     ) => void;
     closeImportDiagramDialog: () => void;
-
-    // Import DBML dialog
-    openImportDBMLDialog: (
-        params?: Omit<ImportDBMLDialogProps, 'dialog'>
-    ) => void;
-    closeImportDBMLDialog: () => void;
 }
 
 export const dialogContext = createContext<DialogContext>({
@@ -96,6 +89,4 @@ export const dialogContext = createContext<DialogContext>({
     closeExportDiagramDialog: emptyFn,
     openImportDiagramDialog: emptyFn,
     closeImportDiagramDialog: emptyFn,
-    openImportDBMLDialog: emptyFn,
-    closeImportDBMLDialog: emptyFn,
 });

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

@@ -20,8 +20,6 @@ import type { ExportImageDialogProps } from '@/dialogs/export-image-dialog/expor
 import { ExportImageDialog } from '@/dialogs/export-image-dialog/export-image-dialog';
 import { ExportDiagramDialog } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
 import { ImportDiagramDialog } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
-import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
-import { ImportDBMLDialog } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
 
 export const DialogProvider: React.FC<React.PropsWithChildren> = ({
     children,
@@ -132,11 +130,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
     const [openImportDiagramDialog, setOpenImportDiagramDialog] =
         useState(false);
 
-    // Import DBML dialog
-    const [openImportDBMLDialog, setOpenImportDBMLDialog] = useState(false);
-    const [importDBMLDialogParams, setImportDBMLDialogParams] =
-        useState<Omit<ImportDBMLDialogProps, 'dialog'>>();
-
     return (
         <dialogContext.Provider
             value={{
@@ -165,11 +158,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
                 openImportDiagramDialog: () => setOpenImportDiagramDialog(true),
                 closeImportDiagramDialog: () =>
                     setOpenImportDiagramDialog(false),
-                openImportDBMLDialog: (params) => {
-                    setImportDBMLDialogParams(params);
-                    setOpenImportDBMLDialog(true);
-                },
-                closeImportDBMLDialog: () => setOpenImportDBMLDialog(false),
             }}
         >
             {children}
@@ -204,10 +192,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
             />
             <ExportDiagramDialog dialog={{ open: openExportDiagramDialog }} />
             <ImportDiagramDialog dialog={{ open: openImportDiagramDialog }} />
-            <ImportDBMLDialog
-                dialog={{ open: openImportDBMLDialog }}
-                {...importDBMLDialogParams}
-            />
         </dialogContext.Provider>
     );
 };

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

@@ -15,9 +15,9 @@ export type DiffEventBase<T extends DiffEventType, D> = {
 };
 
 export type DiffCalculatedData = {
-    tablesAdded: DBTable[];
-    fieldsAdded: Map<string, DBField[]>;
-    relationshipsAdded: DBRelationship[];
+    tablesToAdd: DBTable[];
+    fieldsToAdd: Map<string, DBField[]>;
+    relationshipsToAdd: DBRelationship[];
 };
 
 export type DiffCalculatedEvent = DiffEventBase<
@@ -44,15 +44,21 @@ export interface DiffContext {
         options?: {
             summaryOnly?: boolean;
         };
-    }) => void;
+    }) => { foundDiff: boolean };
     resetDiff: () => void;
 
     // table diff
     checkIfTableHasChange: ({ tableId }: { tableId: string }) => boolean;
     checkIfNewTable: ({ tableId }: { tableId: string }) => boolean;
     checkIfTableRemoved: ({ tableId }: { tableId: string }) => boolean;
-    getTableNewName: ({ tableId }: { tableId: string }) => string | null;
-    getTableNewColor: ({ tableId }: { tableId: string }) => string | null;
+    getTableNewName: ({ tableId }: { tableId: string }) => {
+        old: string;
+        new: string;
+    } | null;
+    getTableNewColor: ({ tableId }: { tableId: string }) => {
+        old: string;
+        new: string;
+    } | null;
 
     // field diff
     checkIfFieldHasChange: ({
@@ -64,17 +70,46 @@ export interface DiffContext {
     }) => boolean;
     checkIfFieldRemoved: ({ fieldId }: { fieldId: string }) => boolean;
     checkIfNewField: ({ fieldId }: { fieldId: string }) => boolean;
-    getFieldNewName: ({ fieldId }: { fieldId: string }) => string | null;
-    getFieldNewType: ({ fieldId }: { fieldId: string }) => DataType | null;
-    getFieldNewPrimaryKey: ({ fieldId }: { fieldId: string }) => boolean | null;
-    getFieldNewNullable: ({ fieldId }: { fieldId: string }) => boolean | null;
+    getFieldNewName: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: string; new: string } | null;
+    getFieldNewType: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: DataType; new: DataType } | null;
+    getFieldNewPrimaryKey: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: boolean; new: boolean } | null;
+    getFieldNewNullable: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: boolean; new: boolean } | null;
     getFieldNewCharacterMaximumLength: ({
         fieldId,
     }: {
         fieldId: string;
-    }) => string | null;
-    getFieldNewScale: ({ fieldId }: { fieldId: string }) => number | null;
-    getFieldNewPrecision: ({ fieldId }: { fieldId: string }) => number | null;
+    }) => { old: string; new: string } | null;
+    getFieldNewScale: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: number; new: number } | null;
+    getFieldNewPrecision: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: number; new: number } | null;
+    getFieldNewIsArray: ({
+        fieldId,
+    }: {
+        fieldId: string;
+    }) => { old: boolean; new: boolean } | null;
 
     // relationship diff
     checkIfNewRelationship: ({

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

@@ -36,7 +36,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
 
     const events = useEventEmitter<DiffEvent>();
 
-    const generateNewFieldsMap = useCallback(
+    const generateFieldsToAddMap = useCallback(
         ({
             diffMap,
             newDiagram,
@@ -66,7 +66,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         []
     );
 
-    const findNewRelationships = useCallback(
+    const findRelationshipsToAdd = useCallback(
         ({
             diffMap,
             newDiagram,
@@ -101,7 +101,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
             diffMap: DiffMap;
         }): DiffCalculatedData => {
             return {
-                tablesAdded:
+                tablesToAdd:
                     newDiagram?.tables?.filter((table) => {
                         const tableKey = getDiffMapKey({
                             diffObject: 'table',
@@ -114,17 +114,17 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                         );
                     }) ?? [],
 
-                fieldsAdded: generateNewFieldsMap({
+                fieldsToAdd: generateFieldsToAddMap({
                     diffMap: diffMap,
                     newDiagram: newDiagram,
                 }),
-                relationshipsAdded: findNewRelationships({
+                relationshipsToAdd: findRelationshipsToAdd({
                     diffMap: diffMap,
                     newDiagram: newDiagram,
                 }),
             };
         },
-        [findNewRelationships, generateNewFieldsMap]
+        [findRelationshipsToAdd, generateFieldsToAddMap]
     );
 
     const calculateDiff: DiffContext['calculateDiff'] = useCallback(
@@ -149,6 +149,8 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                     newDiagram: newDiagramArg,
                 }),
             });
+
+            return { foundDiff: !!newDiffs.size };
         },
         [setDiffMap, events, generateDiffCalculatedData]
     );
@@ -165,7 +167,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(tableNameKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as string;
+                    return {
+                        new: diff.newValue as string,
+                        old: diff.oldValue as string,
+                    };
                 }
             }
 
@@ -186,7 +191,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(tableColorKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as string;
+                    return {
+                        new: diff.newValue as string,
+                        old: diff.oldValue as string,
+                    };
                 }
             }
             return null;
@@ -277,7 +285,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as string;
+                    return {
+                        old: diff.oldValue as string,
+                        new: diff.newValue as string,
+                    };
                 }
             }
 
@@ -298,7 +309,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as DataType;
+                    return {
+                        old: diff.oldValue as DataType,
+                        new: diff.newValue as DataType,
+                    };
                 }
             }
 
@@ -321,7 +335,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as boolean;
+                    return {
+                        old: diff.oldValue as boolean,
+                        new: diff.newValue as boolean,
+                    };
                 }
             }
 
@@ -342,7 +359,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as boolean;
+                    return {
+                        old: diff.oldValue as boolean,
+                        new: diff.newValue as boolean,
+                    };
                 }
             }
 
@@ -365,7 +385,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as string;
+                    return {
+                        old: diff.oldValue as string,
+                        new: diff.newValue as string,
+                    };
                 }
             }
 
@@ -386,7 +409,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as number;
+                    return {
+                        old: diff.oldValue as number,
+                        new: diff.newValue as number,
+                    };
                 }
             }
 
@@ -409,7 +435,34 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 const diff = diffMap.get(fieldKey);
 
                 if (diff?.type === 'changed') {
-                    return diff.newValue as number;
+                    return {
+                        old: diff.oldValue as number,
+                        new: diff.newValue as number,
+                    };
+                }
+            }
+
+            return null;
+        },
+        [diffMap]
+    );
+
+    const getFieldNewIsArray = useCallback<DiffContext['getFieldNewIsArray']>(
+        ({ fieldId }) => {
+            const fieldKey = getDiffMapKey({
+                diffObject: 'field',
+                objectId: fieldId,
+                attribute: 'isArray',
+            });
+
+            if (diffMap.has(fieldKey)) {
+                const diff = diffMap.get(fieldKey);
+
+                if (diff?.type === 'changed') {
+                    return {
+                        old: diff.oldValue as boolean,
+                        new: diff.newValue as boolean,
+                    };
                 }
             }
 
@@ -491,6 +544,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 getFieldNewCharacterMaximumLength,
                 getFieldNewScale,
                 getFieldNewPrecision,
+                getFieldNewIsArray,
 
                 // relationship diff
                 checkIfNewRelationship,

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

@@ -2,9 +2,9 @@ import { emptyFn } from '@/lib/utils';
 import { createContext } from 'react';
 
 export type SidebarSection =
+    | 'dbml'
     | 'tables'
-    | 'relationships'
-    | 'dependencies'
+    | 'refs'
     | 'areas'
     | 'customTypes';
 
@@ -13,14 +13,16 @@ export interface LayoutContext {
     openTableFromSidebar: (tableId: string) => void;
     closeAllTablesInSidebar: () => void;
 
-    openedRelationshipInSidebar: string | undefined;
     openRelationshipFromSidebar: (relationshipId: string) => void;
     closeAllRelationshipsInSidebar: () => void;
 
-    openedDependencyInSidebar: string | undefined;
     openDependencyFromSidebar: (dependencyId: string) => void;
     closeAllDependenciesInSidebar: () => void;
 
+    openedRefInSidebar: string | undefined;
+    openRefFromSidebar: (refId: string) => void;
+    closeAllRefsInSidebar: () => void;
+
     openedAreaInSidebar: string | undefined;
     openAreaFromSidebar: (areaId: string) => void;
     closeAllAreasInSidebar: () => void;
@@ -42,14 +44,16 @@ export const layoutContext = createContext<LayoutContext>({
     openedTableInSidebar: undefined,
     selectedSidebarSection: 'tables',
 
-    openedRelationshipInSidebar: undefined,
     openRelationshipFromSidebar: emptyFn,
     closeAllRelationshipsInSidebar: emptyFn,
 
-    openedDependencyInSidebar: undefined,
     openDependencyFromSidebar: emptyFn,
     closeAllDependenciesInSidebar: emptyFn,
 
+    openedRefInSidebar: undefined,
+    openRefFromSidebar: emptyFn,
+    closeAllRefsInSidebar: emptyFn,
+
     openedAreaInSidebar: undefined,
     openAreaFromSidebar: emptyFn,
     closeAllAreasInSidebar: emptyFn,

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

@@ -10,10 +10,9 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     const [openedTableInSidebar, setOpenedTableInSidebar] = React.useState<
         string | undefined
     >();
-    const [openedRelationshipInSidebar, setOpenedRelationshipInSidebar] =
-        React.useState<string | undefined>();
-    const [openedDependencyInSidebar, setOpenedDependencyInSidebar] =
-        React.useState<string | undefined>();
+    const [openedRefInSidebar, setOpenedRefInSidebar] = React.useState<
+        string | undefined
+    >();
     const [openedAreaInSidebar, setOpenedAreaInSidebar] = React.useState<
         string | undefined
     >();
@@ -28,10 +27,13 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
         () => setOpenedTableInSidebar('');
 
     const closeAllRelationshipsInSidebar: LayoutContext['closeAllRelationshipsInSidebar'] =
-        () => setOpenedRelationshipInSidebar('');
+        () => setOpenedRefInSidebar('');
 
     const closeAllDependenciesInSidebar: LayoutContext['closeAllDependenciesInSidebar'] =
-        () => setOpenedDependencyInSidebar('');
+        () => setOpenedRefInSidebar('');
+
+    const closeAllRefsInSidebar: LayoutContext['closeAllRefsInSidebar'] = () =>
+        setOpenedRefInSidebar('');
 
     const closeAllAreasInSidebar: LayoutContext['closeAllAreasInSidebar'] =
         () => setOpenedAreaInSidebar('');
@@ -60,17 +62,23 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     const openRelationshipFromSidebar: LayoutContext['openRelationshipFromSidebar'] =
         (relationshipId) => {
             showSidePanel();
-            setSelectedSidebarSection('relationships');
-            setOpenedRelationshipInSidebar(relationshipId);
+            setSelectedSidebarSection('refs');
+            setOpenedRefInSidebar(relationshipId);
         };
 
     const openDependencyFromSidebar: LayoutContext['openDependencyFromSidebar'] =
         (dependencyId) => {
             showSidePanel();
-            setSelectedSidebarSection('dependencies');
-            setOpenedDependencyInSidebar(dependencyId);
+            setSelectedSidebarSection('refs');
+            setOpenedRefInSidebar(dependencyId);
         };
 
+    const openRefFromSidebar: LayoutContext['openRefFromSidebar'] = (refId) => {
+        showSidePanel();
+        setSelectedSidebarSection('refs');
+        setOpenedRefInSidebar(refId);
+    };
+
     const openAreaFromSidebar: LayoutContext['openAreaFromSidebar'] = (
         areaId
     ) => {
@@ -93,7 +101,6 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 selectedSidebarSection,
                 openTableFromSidebar,
                 selectSidebarSection: setSelectedSidebarSection,
-                openedRelationshipInSidebar,
                 openRelationshipFromSidebar,
                 closeAllTablesInSidebar,
                 closeAllRelationshipsInSidebar,
@@ -101,9 +108,11 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 hideSidePanel,
                 showSidePanel,
                 toggleSidePanel,
-                openedDependencyInSidebar,
                 openDependencyFromSidebar,
                 closeAllDependenciesInSidebar,
+                openedRefInSidebar,
+                openRefFromSidebar,
+                closeAllRefsInSidebar,
                 openedAreaInSidebar,
                 openAreaFromSidebar,
                 closeAllAreasInSidebar,

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

@@ -11,6 +11,9 @@ export interface LocalConfigContext {
     scrollAction: ScrollAction;
     setScrollAction: (action: ScrollAction) => void;
 
+    showDBViews: boolean;
+    setShowDBViews: (showViews: boolean) => void;
+
     showCardinality: boolean;
     setShowCardinality: (showCardinality: boolean) => void;
 
@@ -23,9 +26,6 @@ export interface LocalConfigContext {
     starUsDialogLastOpen: number;
     setStarUsDialogLastOpen: (lastOpen: number) => void;
 
-    showDependenciesOnCanvas: boolean;
-    setShowDependenciesOnCanvas: (showDependenciesOnCanvas: boolean) => void;
-
     showMiniMapOnCanvas: boolean;
     setShowMiniMapOnCanvas: (showMiniMapOnCanvas: boolean) => void;
 }
@@ -37,6 +37,9 @@ export const LocalConfigContext = createContext<LocalConfigContext>({
     scrollAction: 'pan',
     setScrollAction: emptyFn,
 
+    showDBViews: false,
+    setShowDBViews: emptyFn,
+
     showCardinality: true,
     setShowCardinality: emptyFn,
 
@@ -49,9 +52,6 @@ export const LocalConfigContext = createContext<LocalConfigContext>({
     starUsDialogLastOpen: 0,
     setStarUsDialogLastOpen: emptyFn,
 
-    showDependenciesOnCanvas: false,
-    setShowDependenciesOnCanvas: emptyFn,
-
     showMiniMapOnCanvas: false,
     setShowMiniMapOnCanvas: emptyFn,
 });

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

@@ -9,8 +9,8 @@ const showCardinalityKey = 'show_cardinality';
 const showFieldAttributesKey = 'show_field_attributes';
 const githubRepoOpenedKey = 'github_repo_opened';
 const starUsDialogLastOpenKey = 'star_us_dialog_last_open';
-const showDependenciesOnCanvasKey = 'show_dependencies_on_canvas';
 const showMiniMapOnCanvasKey = 'show_minimap_on_canvas';
+const showDBViewsKey = 'show_db_views';
 
 export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
     children,
@@ -23,6 +23,10 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
         (localStorage.getItem(scrollActionKey) as ScrollAction) || 'pan'
     );
 
+    const [showDBViews, setShowDBViews] = React.useState<boolean>(
+        (localStorage.getItem(showDBViewsKey) || 'false') === 'true'
+    );
+
     const [showCardinality, setShowCardinality] = React.useState<boolean>(
         (localStorage.getItem(showCardinalityKey) || 'true') === 'true'
     );
@@ -41,12 +45,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
             parseInt(localStorage.getItem(starUsDialogLastOpenKey) || '0')
         );
 
-    const [showDependenciesOnCanvas, setShowDependenciesOnCanvas] =
-        React.useState<boolean>(
-            (localStorage.getItem(showDependenciesOnCanvasKey) || 'false') ===
-                'true'
-        );
-
     const [showMiniMapOnCanvas, setShowMiniMapOnCanvas] =
         React.useState<boolean>(
             (localStorage.getItem(showMiniMapOnCanvasKey) || 'true') === 'true'
@@ -72,15 +70,12 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
     }, [scrollAction]);
 
     useEffect(() => {
-        localStorage.setItem(showCardinalityKey, showCardinality.toString());
-    }, [showCardinality]);
+        localStorage.setItem(showDBViewsKey, showDBViews.toString());
+    }, [showDBViews]);
 
     useEffect(() => {
-        localStorage.setItem(
-            showDependenciesOnCanvasKey,
-            showDependenciesOnCanvas.toString()
-        );
-    }, [showDependenciesOnCanvas]);
+        localStorage.setItem(showCardinalityKey, showCardinality.toString());
+    }, [showCardinality]);
 
     useEffect(() => {
         localStorage.setItem(
@@ -96,6 +91,8 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
                 setTheme,
                 scrollAction,
                 setScrollAction,
+                showDBViews,
+                setShowDBViews,
                 showCardinality,
                 setShowCardinality,
                 showFieldAttributes,
@@ -104,8 +101,6 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
                 githubRepoOpened,
                 starUsDialogLastOpen,
                 setStarUsDialogLastOpen,
-                showDependenciesOnCanvas,
-                setShowDependenciesOnCanvas,
                 showMiniMapOnCanvas,
                 setShowMiniMapOnCanvas,
             }}

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

@@ -245,7 +245,9 @@ export const StorageProvider: React.FC<React.PropsWithChildren> = ({
 
     const getDiagramFilter: StorageContext['getDiagramFilter'] = useCallback(
         async (diagramId: string): Promise<DiagramFilter | undefined> => {
-            return await db.diagram_filters.get({ diagramId });
+            const filter = await db.diagram_filters.get({ diagramId });
+
+            return filter;
         },
         [db]
     );

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

@@ -42,6 +42,14 @@ import {
     type ValidationResult,
 } from '@/lib/data/sql-import/sql-validator';
 import { SQLValidationStatus } from './sql-validation-status';
+import { setupDBMLLanguage } from '@/components/code-snippet/languages/dbml-language';
+import type { ImportMethod } from '@/lib/import-method/import-method';
+import { detectImportMethod } from '@/lib/import-method/detect-import-method';
+import { verifyDBML } from '@/lib/dbml/dbml-import/verify-dbml';
+import {
+    clearErrorHighlight,
+    highlightErrorLine,
+} from '@/components/code-snippet/dbml/utils';
 
 const calculateContentSizeMB = (content: string): number => {
     return content.length / (1024 * 1024); // Convert to MB
@@ -55,49 +63,6 @@ const calculateIsLargeFile = (content: string): boolean => {
 const errorScriptOutputMessage =
     '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;
     onImport: () => void;
@@ -111,8 +76,8 @@ export interface ImportDatabaseProps {
     >;
     keepDialogAfterImport?: boolean;
     title: string;
-    importMethod: 'query' | 'ddl';
-    setImportMethod: (method: 'query' | 'ddl') => void;
+    importMethod: ImportMethod;
+    setImportMethod: (method: ImportMethod) => void;
 }
 
 export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
@@ -132,6 +97,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
     const { effectiveTheme } = useTheme();
     const [errorMessage, setErrorMessage] = useState('');
     const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+    const decorationsCollection = useRef<editor.IEditorDecorationsCollection>();
     const pasteDisposableRef = useRef<IDisposable | null>(null);
 
     const { t } = useTranslation();
@@ -146,15 +112,20 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
     const [isAutoFixing, setIsAutoFixing] = useState(false);
     const [showAutoFixButton, setShowAutoFixButton] = useState(false);
 
+    const clearDecorations = useCallback(() => {
+        clearErrorHighlight(decorationsCollection.current);
+    }, []);
+
     useEffect(() => {
         setScriptResult('');
         setErrorMessage('');
         setShowCheckJsonButton(false);
     }, [importMethod, setScriptResult]);
 
-    // Check if the ddl is valid
+    // Check if the ddl or dbml is valid
     useEffect(() => {
-        if (importMethod !== 'ddl') {
+        clearDecorations();
+        if (importMethod === 'query') {
             setSqlValidation(null);
             setShowAutoFixButton(false);
             return;
@@ -163,9 +134,54 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
         if (!scriptResult.trim()) {
             setSqlValidation(null);
             setShowAutoFixButton(false);
+            setErrorMessage('');
             return;
         }
 
+        if (importMethod === 'dbml') {
+            // Validate DBML by parsing it
+            const validateResponse = verifyDBML(scriptResult, { databaseType });
+            if (!validateResponse.hasError) {
+                setErrorMessage('');
+                setSqlValidation({
+                    isValid: true,
+                    errors: [],
+                    warnings: [],
+                });
+            } else {
+                let errorMsg = 'Invalid DBML syntax';
+                let line: number = 1;
+
+                if (validateResponse.parsedError) {
+                    errorMsg = validateResponse.parsedError.message;
+                    line = validateResponse.parsedError.line;
+                    highlightErrorLine({
+                        error: validateResponse.parsedError,
+                        model: editorRef.current?.getModel(),
+                        editorDecorationsCollection:
+                            decorationsCollection.current,
+                    });
+                }
+
+                setSqlValidation({
+                    isValid: false,
+                    errors: [
+                        {
+                            message: errorMsg,
+                            line: line,
+                            type: 'syntax' as const,
+                        },
+                    ],
+                    warnings: [],
+                });
+                setErrorMessage(errorMsg);
+            }
+
+            setShowAutoFixButton(false);
+            return;
+        }
+
+        // SQL validation
         // First run our validation based on database type
         const validation = validateSQL(scriptResult, databaseType);
         setSqlValidation(validation);
@@ -192,7 +208,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                 setErrorMessage(result.error);
             }
         });
-    }, [importMethod, scriptResult, databaseType]);
+    }, [importMethod, scriptResult, databaseType, clearDecorations]);
 
     // Check if the script result is a valid JSON
     useEffect(() => {
@@ -320,6 +336,8 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
     const handleEditorDidMount = useCallback(
         (editor: editor.IStandaloneCodeEditor) => {
             editorRef.current = editor;
+            decorationsCollection.current =
+                editor.createDecorationsCollection();
 
             // Cleanup previous disposable if it exists
             if (pasteDisposableRef.current) {
@@ -338,7 +356,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                 const isLargeFile = calculateIsLargeFile(content);
 
                 // First, detect content type to determine if we should switch modes
-                const detectedType = detectContentType(content);
+                const detectedType = detectImportMethod(content);
                 if (detectedType && detectedType !== importMethod) {
                     // Switch to the detected mode immediately
                     setImportMethod(detectedType);
@@ -352,7 +370,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                                 ?.run();
                         }, 100);
                     }
-                    // For DDL mode, do NOT format as it can break the SQL
+                    // For DDL and DBML modes, do NOT format as it can break the syntax
                 } else {
                     // Content type didn't change, apply formatting based on current mode
                     if (importMethod === 'query' && !isLargeFile) {
@@ -363,7 +381,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                                 ?.run();
                         }, 100);
                     }
-                    // For DDL mode or large files, do NOT format
+                    // For DDL and DBML modes or large files, do NOT format
                 }
             });
 
@@ -410,16 +428,25 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                 <div className="w-full text-center text-xs text-muted-foreground">
                     {importMethod === 'query'
                         ? 'Smart Query Output'
-                        : 'SQL Script'}
+                        : importMethod === 'dbml'
+                          ? 'DBML Script'
+                          : 'SQL Script'}
                 </div>
                 <div className="flex-1 overflow-hidden">
                     <Suspense fallback={<Spinner />}>
                         <Editor
                             value={scriptResult}
                             onChange={debouncedHandleInputChange}
-                            language={importMethod === 'query' ? 'json' : 'sql'}
+                            language={
+                                importMethod === 'query'
+                                    ? 'json'
+                                    : importMethod === 'dbml'
+                                      ? 'dbml'
+                                      : 'sql'
+                            }
                             loading={<Spinner />}
                             onMount={handleEditorDidMount}
+                            beforeMount={setupDBMLLanguage}
                             theme={
                                 effectiveTheme === 'dark'
                                     ? 'dbml-dark'
@@ -430,7 +457,6 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                                 minimap: { enabled: false },
                                 scrollBeyondLastLine: false,
                                 automaticLayout: true,
-                                glyphMargin: false,
                                 lineNumbers: 'on',
                                 guides: {
                                     indentation: false,
@@ -455,7 +481,9 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                     </Suspense>
                 </div>
 
-                {errorMessage || (importMethod === 'ddl' && sqlValidation) ? (
+                {errorMessage ||
+                ((importMethod === 'ddl' || importMethod === 'dbml') &&
+                    sqlValidation) ? (
                     <SQLValidationStatus
                         validation={sqlValidation}
                         errorMessage={errorMessage}

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

@@ -15,9 +15,11 @@ import {
     AvatarImage,
 } from '@/components/avatar/avatar';
 import { useTranslation } from 'react-i18next';
-import { Code } from 'lucide-react';
+import { Code, FileCode } from 'lucide-react';
 import { SmartQueryInstructions } from './instructions/smart-query-instructions';
 import { DDLInstructions } from './instructions/ddl-instructions';
+import { DBMLInstructions } from './instructions/dbml-instructions';
+import type { ImportMethod } from '@/lib/import-method/import-method';
 
 const DatabasesWithoutDDLInstructions: DatabaseType[] = [
     DatabaseType.CLICKHOUSE,
@@ -30,8 +32,8 @@ export interface InstructionsSectionProps {
     setDatabaseEdition: React.Dispatch<
         React.SetStateAction<DatabaseEdition | undefined>
     >;
-    importMethod: 'query' | 'ddl';
-    setImportMethod: (method: 'query' | 'ddl') => void;
+    importMethod: ImportMethod;
+    setImportMethod: (method: ImportMethod) => void;
     showSSMSInfoDialog: boolean;
     setShowSSMSInfoDialog: (show: boolean) => void;
 }
@@ -125,9 +127,9 @@ export const InstructionsSection: React.FC<InstructionsSectionProps> = ({
                         className="ml-1 flex-wrap justify-start gap-2"
                         value={importMethod}
                         onValueChange={(value) => {
-                            let selectedImportMethod: 'query' | 'ddl' = 'query';
+                            let selectedImportMethod: ImportMethod = 'query';
                             if (value) {
-                                selectedImportMethod = value as 'query' | 'ddl';
+                                selectedImportMethod = value as ImportMethod;
                             }
 
                             setImportMethod(selectedImportMethod);
@@ -150,10 +152,20 @@ export const InstructionsSection: React.FC<InstructionsSectionProps> = ({
                             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} />
+                                <FileCode size={16} />
                             </Avatar>
                             SQL Script
                         </ToggleGroupItem>
+                        <ToggleGroupItem
+                            value="dbml"
+                            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>
+                            DBML
+                        </ToggleGroupItem>
                     </ToggleGroup>
                 </div>
             )}
@@ -167,11 +179,16 @@ export const InstructionsSection: React.FC<InstructionsSectionProps> = ({
                         showSSMSInfoDialog={showSSMSInfoDialog}
                         setShowSSMSInfoDialog={setShowSSMSInfoDialog}
                     />
-                ) : (
+                ) : importMethod === 'ddl' ? (
                     <DDLInstructions
                         databaseType={databaseType}
                         databaseEdition={databaseEdition}
                     />
+                ) : (
+                    <DBMLInstructions
+                        databaseType={databaseType}
+                        databaseEdition={databaseEdition}
+                    />
                 )}
             </div>
         </div>

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { DatabaseType } from '@/lib/domain/database-type';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import { CodeSnippet } from '@/components/code-snippet/code-snippet';
+import { setupDBMLLanguage } from '@/components/code-snippet/languages/dbml-language';
+
+export interface DBMLInstructionsProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+}
+
+export const DBMLInstructions: React.FC<DBMLInstructionsProps> = () => {
+    return (
+        <>
+            <div className="flex flex-col gap-1 text-sm text-primary">
+                <div>
+                    Paste your DBML (Database Markup Language) schema definition
+                    here →
+                </div>
+            </div>
+
+            <div className="flex h-64 flex-col gap-1 text-sm text-primary">
+                <h4 className="text-xs font-medium">Example:</h4>
+                <CodeSnippet
+                    className="h-full"
+                    allowCopy={false}
+                    editorProps={{
+                        beforeMount: setupDBMLLanguage,
+                    }}
+                    code={`Table users {
+  id int [pk]
+  username varchar
+  email varchar
+}
+
+Table posts {
+  id int [pk]
+  user_id int [ref: > users.id]
+  title varchar
+  content text
+}`}
+                    language={'dbml'}
+                />
+            </div>
+        </>
+    );
+};

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

@@ -43,8 +43,8 @@ const DDLInstructionsMap: Record<DatabaseType, DDLInstruction[]> = {
         },
         {
             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`,
+            code: `sqlite3 <database_file_path>\n".schema" > <output_file_path>`,
+            example: `sqlite3 my_db.db\n".schema" > schema_export.sql`,
         },
         {
             text: 'Open the exported SQL file, copy its contents, and paste them here.',

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

@@ -73,7 +73,7 @@ export const SQLValidationStatus: React.FC<SQLValidationStatusProps> = ({
 
             {hasErrors ? (
                 <div className="rounded-md border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
-                    <ScrollArea className="h-24">
+                    <ScrollArea className="h-fit max-h-24">
                         <div className="space-y-3 p-3 pt-2 text-red-700 dark:text-red-300">
                             {validation?.errors
                                 .slice(0, 3)
@@ -137,7 +137,7 @@ export const SQLValidationStatus: React.FC<SQLValidationStatusProps> = ({
 
             {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">
+                    <ScrollArea className="h-fit max-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" />

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

@@ -3,7 +3,7 @@ import { Dialog, DialogContent } from '@/components/dialog/dialog';
 import { DatabaseType } from '@/lib/domain/database-type';
 import { useStorage } from '@/hooks/use-storage';
 import type { Diagram } from '@/lib/domain/diagram';
-import { loadFromDatabaseMetadata } from '@/lib/domain/diagram';
+import { loadFromDatabaseMetadata } from '@/lib/data/import-metadata/import';
 import { useNavigate } from 'react-router-dom';
 import { useConfig } from '@/hooks/use-config';
 import type { DatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
@@ -22,6 +22,11 @@ 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';
+import {
+    defaultDBMLDiagramName,
+    importDBMLToDiagram,
+} from '@/lib/dbml/dbml-import/dbml-import';
+import type { ImportMethod } from '@/lib/import-method/import-method';
 
 export interface CreateDiagramDialogProps extends BaseDialogProps {}
 
@@ -30,11 +35,11 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
 }) => {
     const { diagramId } = useChartDB();
     const { t } = useTranslation();
-    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
+    const [importMethod, setImportMethod] = useState<ImportMethod>('query');
     const [databaseType, setDatabaseType] = useState<DatabaseType>(
         DatabaseType.GENERIC
     );
-    const { closeCreateDiagramDialog, openImportDBMLDialog } = useDialog();
+    const { closeCreateDiagramDialog } = useDialog();
     const { updateConfig } = useConfig();
     const [scriptResult, setScriptResult] = useState('');
     const [databaseEdition, setDatabaseEdition] = useState<
@@ -89,6 +94,14 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
                     sourceDatabaseType: databaseType,
                     targetDatabaseType: databaseType,
                 });
+            } else if (importMethod === 'dbml') {
+                diagram = await importDBMLToDiagram(scriptResult, {
+                    databaseType,
+                });
+                // Update the diagram name if it's the default
+                if (diagram.name === defaultDBMLDiagramName) {
+                    diagram.name = `Diagram ${diagramNumber}`;
+                }
             } else {
                 let metadata: DatabaseMetadata | undefined = databaseMetadata;
 
@@ -152,10 +165,6 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         await updateConfig({ config: { defaultDiagramId: diagram.id } });
         closeCreateDiagramDialog();
         navigate(`/diagrams/${diagram.id}`);
-        setTimeout(
-            () => openImportDBMLDialog({ withCreateEmptyDiagram: true }),
-            700
-        );
     }, [
         databaseType,
         addDiagram,
@@ -164,14 +173,13 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         navigate,
         updateConfig,
         diagramNumber,
-        openImportDBMLDialog,
     ]);
 
     const importNewDiagramOrFilterTables = useCallback(async () => {
         try {
             setIsParsingMetadata(true);
 
-            if (importMethod === 'ddl') {
+            if (importMethod === 'ddl' || importMethod === 'dbml') {
                 await importNewDiagram();
             } else {
                 // Parse metadata asynchronously to avoid blocking the UI

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

@@ -69,6 +69,7 @@ export const SelectDatabase: React.FC<SelectDatabaseProps> = ({
                         type="button"
                         variant="outline"
                         onClick={createNewDiagram}
+                        disabled={databaseType === DatabaseType.GENERIC}
                     >
                         {t('new_diagram_dialog.empty_diagram')}
                     </Button>

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

@@ -218,8 +218,14 @@ export const CreateRelationshipDialog: React.FC<
                     closeCreateRelationshipDialog();
                 }
             }}
+            modal={false}
         >
-            <DialogContent className="flex flex-col overflow-y-auto" showClose>
+            <DialogContent
+                className="flex flex-col overflow-y-auto"
+                showClose
+                forceOverlay
+                onInteractOutside={(e) => e.preventDefault()}
+            >
                 <DialogHeader>
                     <DialogTitle>
                         {t('create_relationship_dialog.title')}

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

@@ -17,7 +17,7 @@ import { useDialog } from '@/hooks/use-dialog';
 import {
     exportBaseSQL,
     exportSQL,
-} from '@/lib/data/export-metadata/export-sql-script';
+} from '@/lib/data/sql-export/export-sql-script';
 import { databaseTypeToLabelMap } from '@/lib/databases';
 import { DatabaseType } from '@/lib/domain/database-type';
 import { Annoyed, Sparkles } from 'lucide-react';

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

@@ -7,7 +7,7 @@ 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 { loadFromDatabaseMetadata } from '@/lib/data/import-metadata/import';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
 import { Trans, useTranslation } from 'react-i18next';
@@ -15,6 +15,8 @@ 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';
+import { importDBMLToDiagram } from '@/lib/dbml/dbml-import/dbml-import';
+import type { ImportMethod } from '@/lib/import-method/import-method';
 
 export interface ImportDatabaseDialogProps extends BaseDialogProps {
     databaseType: DatabaseType;
@@ -24,7 +26,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
     dialog,
     databaseType,
 }) => {
-    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
+    const [importMethod, setImportMethod] = useState<ImportMethod>('query');
     const { closeImportDatabaseDialog } = useDialog();
     const { showAlert } = useAlert();
     const {
@@ -65,6 +67,10 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
                 sourceDatabaseType: databaseType,
                 targetDatabaseType: databaseType,
             });
+        } else if (importMethod === 'dbml') {
+            diagram = await importDBMLToDiagram(scriptResult, {
+                databaseType,
+            });
         } else {
             const databaseMetadata: DatabaseMetadata =
                 loadDatabaseMetadata(scriptResult);

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

@@ -1,359 +0,0 @@
-import React, {
-    useCallback,
-    useEffect,
-    useState,
-    Suspense,
-    useRef,
-} from 'react';
-import type * as monaco from 'monaco-editor';
-import { useDialog } from '@/hooks/use-dialog';
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogInternalContent,
-    DialogTitle,
-} from '@/components/dialog/dialog';
-import { Button } from '@/components/button/button';
-import type { BaseDialogProps } from '../common/base-dialog-props';
-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,
-    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';
-import { parseDBMLError } from '@/lib/dbml/dbml-import/dbml-import-error';
-import {
-    clearErrorHighlight,
-    highlightErrorLine,
-} from '@/components/code-snippet/dbml/utils';
-
-export interface ImportDBMLDialogProps extends BaseDialogProps {
-    withCreateEmptyDiagram?: boolean;
-}
-
-export const ImportDBMLDialog: React.FC<ImportDBMLDialogProps> = ({
-    dialog,
-    withCreateEmptyDiagram,
-}) => {
-    const { t } = useTranslation();
-    const initialDBML = `// Use DBML to define your database structure
-// Simple Blog System with Comments Example
-
-Table users {
-  id integer [primary key]
-  name varchar
-  email varchar
-}
-
-Table posts {
-  id integer [primary key]
-  title varchar
-  content text
-  user_id integer
-  created_at timestamp
-}
-
-Table comments {
-  id integer [primary key]
-  content text
-  post_id integer
-  user_id integer
-  created_at timestamp
-}
-
-// Relationships
-Ref: posts.user_id > users.id // Each post belongs to one user
-Ref: comments.post_id > posts.id // Each comment belongs to one post
-Ref: comments.user_id > users.id // Each comment is written by one user`;
-
-    const [dbmlContent, setDBMLContent] = useState<string>(initialDBML);
-    const { closeImportDBMLDialog } = useDialog();
-    const [errorMessage, setErrorMessage] = useState<string | undefined>();
-    const { effectiveTheme } = useTheme();
-    const { toast } = useToast();
-    const {
-        addTables,
-        addRelationships,
-        tables,
-        relationships,
-        removeTables,
-        removeRelationships,
-    } = useChartDB();
-    const { reorderTables } = useCanvas();
-    const [reorder, setReorder] = useState(false);
-    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
-    const decorationsCollection =
-        useRef<monaco.editor.IEditorDecorationsCollection>();
-
-    const handleEditorDidMount = (
-        editor: monaco.editor.IStandaloneCodeEditor
-    ) => {
-        editorRef.current = editor;
-        decorationsCollection.current = editor.createDecorationsCollection();
-    };
-
-    useEffect(() => {
-        if (reorder) {
-            reorderTables({
-                updateHistory: false,
-            });
-            setReorder(false);
-        }
-    }, [reorder, reorderTables]);
-
-    const clearDecorations = useCallback(() => {
-        clearErrorHighlight(decorationsCollection.current);
-    }, []);
-
-    const validateDBML = useCallback(
-        async (content: string) => {
-            // Clear previous errors
-            setErrorMessage(undefined);
-            clearDecorations();
-
-            if (!content.trim()) return;
-
-            try {
-                const preprocessedContent = preprocessDBML(content);
-                const sanitizedContent = sanitizeDBML(preprocessedContent);
-                const parser = new Parser();
-                parser.parse(sanitizedContent, 'dbml');
-            } catch (e) {
-                const parsedError = parseDBMLError(e);
-                if (parsedError) {
-                    setErrorMessage(
-                        t('import_dbml_dialog.error.description') +
-                            ` (1 error found - in line ${parsedError.line})`
-                    );
-                    highlightErrorLine({
-                        error: parsedError,
-                        model: editorRef.current?.getModel(),
-                        editorDecorationsCollection:
-                            decorationsCollection.current,
-                    });
-                } else {
-                    setErrorMessage(
-                        e instanceof Error ? e.message : JSON.stringify(e)
-                    );
-                }
-            }
-        },
-        [clearDecorations, t]
-    );
-
-    const debouncedValidateRef = useRef<((value: string) => void) | null>(null);
-
-    // Set up debounced validation
-    useEffect(() => {
-        debouncedValidateRef.current = debounce((value: string) => {
-            validateDBML(value);
-        }, 500);
-
-        return () => {
-            debouncedValidateRef.current = null;
-        };
-    }, [validateDBML]);
-
-    // Trigger validation when content changes
-    useEffect(() => {
-        if (debouncedValidateRef.current) {
-            debouncedValidateRef.current(dbmlContent);
-        }
-    }, [dbmlContent]);
-
-    useEffect(() => {
-        if (!dialog.open) {
-            setErrorMessage(undefined);
-            clearDecorations();
-            setDBMLContent(initialDBML);
-        }
-    }, [dialog.open, initialDBML, clearDecorations]);
-
-    const handleImport = useCallback(async () => {
-        if (!dbmlContent.trim() || errorMessage) return;
-
-        try {
-            const importedDiagram = await importDBMLToDiagram(dbmlContent);
-            const tableIdsToRemove = tables
-                .filter((table) =>
-                    importedDiagram.tables?.some(
-                        (t: DBTable) =>
-                            t.name === table.name && t.schema === table.schema
-                    )
-                )
-                .map((table) => table.id);
-            // Find relationships that need to be removed
-            const relationshipIdsToRemove = relationships
-                .filter((relationship) => {
-                    const sourceTable = tables.find(
-                        (table: DBTable) =>
-                            table.id === relationship.sourceTableId
-                    );
-                    const targetTable = tables.find(
-                        (table: DBTable) =>
-                            table.id === relationship.targetTableId
-                    );
-                    if (!sourceTable || !targetTable) return true;
-                    const replacementSourceTable = importedDiagram.tables?.find(
-                        (table: DBTable) =>
-                            table.name === sourceTable.name &&
-                            table.schema === sourceTable.schema
-                    );
-                    const replacementTargetTable = importedDiagram.tables?.find(
-                        (table: DBTable) =>
-                            table.name === targetTable.name &&
-                            table.schema === targetTable.schema
-                    );
-                    return replacementSourceTable || replacementTargetTable;
-                })
-                .map((relationship) => relationship.id);
-
-            // Remove existing items
-            await Promise.all([
-                removeTables(tableIdsToRemove, { updateHistory: false }),
-                removeRelationships(relationshipIdsToRemove, {
-                    updateHistory: false,
-                }),
-            ]);
-
-            // Add new items
-            await Promise.all([
-                addTables(importedDiagram.tables ?? [], {
-                    updateHistory: false,
-                }),
-                addRelationships(importedDiagram.relationships ?? [], {
-                    updateHistory: false,
-                }),
-            ]);
-            setReorder(true);
-            closeImportDBMLDialog();
-        } catch (e) {
-            toast({
-                title: t('import_dbml_dialog.error.title'),
-                variant: 'destructive',
-                description: (
-                    <>
-                        <div>{t('import_dbml_dialog.error.description')}</div>
-                        {e instanceof Error ? e.message : JSON.stringify(e)}
-                    </>
-                ),
-            });
-        }
-    }, [
-        dbmlContent,
-        closeImportDBMLDialog,
-        tables,
-        relationships,
-        removeTables,
-        removeRelationships,
-        addTables,
-        addRelationships,
-        errorMessage,
-        toast,
-        setReorder,
-        t,
-    ]);
-
-    return (
-        <Dialog
-            {...dialog}
-            onOpenChange={(open) => {
-                if (!open) {
-                    closeImportDBMLDialog();
-                }
-            }}
-        >
-            <DialogContent
-                className="flex h-[80vh] max-h-screen w-full flex-col md:max-w-[900px]"
-                showClose
-            >
-                <DialogHeader>
-                    <DialogTitle>
-                        {withCreateEmptyDiagram
-                            ? t('import_dbml_dialog.example_title')
-                            : t('import_dbml_dialog.title')}
-                    </DialogTitle>
-                    <DialogDescription>
-                        {t('import_dbml_dialog.description')}
-                    </DialogDescription>
-                </DialogHeader>
-                <DialogInternalContent>
-                    <Suspense fallback={<Spinner />}>
-                        <Editor
-                            value={dbmlContent}
-                            onChange={(value) => setDBMLContent(value || '')}
-                            language="dbml"
-                            onMount={handleEditorDidMount}
-                            theme={
-                                effectiveTheme === 'dark'
-                                    ? 'dbml-dark'
-                                    : 'dbml-light'
-                            }
-                            beforeMount={setupDBMLLanguage}
-                            options={{
-                                minimap: { enabled: false },
-                                scrollBeyondLastLine: false,
-                                automaticLayout: true,
-                                glyphMargin: true,
-                                lineNumbers: 'on',
-                                scrollbar: {
-                                    vertical: 'visible',
-                                    horizontal: 'visible',
-                                },
-                            }}
-                            className="size-full"
-                        />
-                    </Suspense>
-                </DialogInternalContent>
-                <DialogFooter>
-                    <div className="flex w-full items-center justify-between">
-                        <div className="flex items-center gap-4">
-                            <DialogClose asChild>
-                                <Button variant="secondary">
-                                    {withCreateEmptyDiagram
-                                        ? t('import_dbml_dialog.skip_and_empty')
-                                        : t('import_dbml_dialog.cancel')}
-                                </Button>
-                            </DialogClose>
-                            {errorMessage ? (
-                                <div className="flex items-center gap-1">
-                                    <AlertCircle className="size-4 text-destructive" />
-
-                                    <span className="text-xs text-destructive">
-                                        {errorMessage ||
-                                            t(
-                                                'import_dbml_dialog.error.description'
-                                            )}
-                                    </span>
-                                </div>
-                            ) : null}
-                        </div>
-                        <Button
-                            onClick={handleImport}
-                            disabled={!dbmlContent.trim() || !!errorMessage}
-                        >
-                            {withCreateEmptyDiagram
-                                ? t('import_dbml_dialog.show_example')
-                                : t('import_dbml_dialog.import')}
-                        </Button>
-                    </div>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-};

src/dialogs/open-diagram-dialog/diagram-row-actions-menu/diagram-row-actions-menu.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback } from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/dropdown-menu/dropdown-menu';
+import { Button } from '@/components/button/button';
+import { Ellipsis, Layers2, SquareArrowOutUpRight, Trash2 } from 'lucide-react';
+import { useChartDB } from '@/hooks/use-chartdb';
+import type { Diagram } from '@/lib/domain';
+import { useStorage } from '@/hooks/use-storage';
+import { cloneDiagram } from '@/lib/clone';
+import { useTranslation } from 'react-i18next';
+
+interface DiagramRowActionsMenuProps {
+    diagram: Diagram;
+    onOpen: () => void;
+    refetch: () => void;
+    numberOfDiagrams: number;
+}
+
+export const DiagramRowActionsMenu: React.FC<DiagramRowActionsMenuProps> = ({
+    diagram,
+    onOpen,
+    refetch,
+    numberOfDiagrams,
+}) => {
+    const { diagramId } = useChartDB();
+    const { deleteDiagram, addDiagram } = useStorage();
+    const { t } = useTranslation();
+
+    const onDelete = useCallback(async () => {
+        deleteDiagram(diagram.id);
+        refetch();
+
+        if (diagram.id === diagramId || numberOfDiagrams <= 1) {
+            window.location.href = '/';
+        }
+    }, [deleteDiagram, diagram.id, diagramId, refetch, numberOfDiagrams]);
+
+    const onDuplicate = useCallback(async () => {
+        const duplicatedDiagram = cloneDiagram(diagram);
+
+        const diagramToAdd = duplicatedDiagram.diagram;
+
+        if (!diagramToAdd) {
+            return;
+        }
+
+        diagramToAdd.name = `${diagram.name} (Copy)`;
+
+        addDiagram({ diagram: diagramToAdd });
+        refetch();
+    }, [addDiagram, refetch, diagram]);
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8 p-0"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Ellipsis className="size-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                    onClick={onOpen}
+                    className="flex justify-between gap-4"
+                >
+                    {t('open_diagram_dialog.diagram_actions.open')}
+                    <SquareArrowOutUpRight className="size-3.5" />
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                    onClick={onDuplicate}
+                    className="flex justify-between gap-4"
+                >
+                    {t('open_diagram_dialog.diagram_actions.duplicate')}
+                    <Layers2 className="size-3.5" />
+                </DropdownMenuItem>
+
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                    onClick={onDelete}
+                    className="flex justify-between gap-4 text-red-700"
+                >
+                    {t('open_diagram_dialog.diagram_actions.delete')}
+                    <Trash2 className="size-3.5 text-red-700" />
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

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

@@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import type { BaseDialogProps } from '../common/base-dialog-props';
 import { useDebounce } from '@/hooks/use-debounce';
+import { DiagramRowActionsMenu } from './diagram-row-actions-menu/diagram-row-actions-menu';
 
 export interface OpenDiagramDialogProps extends BaseDialogProps {
     canClose?: boolean;
@@ -46,21 +47,22 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
         string | undefined
     >();
 
-    useEffect(() => {
-        setSelectedDiagramId(undefined);
-    }, [dialog.open]);
+    const fetchDiagrams = useCallback(async () => {
+        const diagrams = await listDiagrams({ includeTables: true });
+        setDiagrams(
+            diagrams.sort(
+                (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()
+            )
+        );
+    }, [listDiagrams]);
 
     useEffect(() => {
-        const fetchDiagrams = async () => {
-            const diagrams = await listDiagrams({ includeTables: true });
-            setDiagrams(
-                diagrams.sort(
-                    (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()
-                )
-            );
-        };
+        if (!dialog.open) {
+            return;
+        }
+        setSelectedDiagramId(undefined);
         fetchDiagrams();
-    }, [listDiagrams, setDiagrams, dialog.open]);
+    }, [dialog.open, fetchDiagrams]);
 
     const openDiagram = useCallback(
         (diagramId: string) => {
@@ -166,6 +168,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                                             'open_diagram_dialog.table_columns.tables_count'
                                         )}
                                     </TableHead>
+                                    <TableHead />
                                 </TableRow>
                             </TableHeader>
                             <TableBody>
@@ -221,6 +224,19 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                                         <TableCell className="text-center">
                                             {diagram.tables?.length}
                                         </TableCell>
+                                        <TableCell className="items-center p-0 pr-1 text-right">
+                                            <DiagramRowActionsMenu
+                                                diagram={diagram}
+                                                onOpen={() => {
+                                                    openDiagram(diagram.id);
+                                                    closeOpenDiagramDialog();
+                                                }}
+                                                numberOfDiagrams={
+                                                    diagrams.length
+                                                }
+                                                refetch={fetchDiagrams}
+                                            />
+                                        </TableCell>
                                     </TableRow>
                                 ))}
                             </TableBody>

src/hooks/use-focus-on.ts

@@ -0,0 +1,142 @@
+import { useCallback } from 'react';
+import { useReactFlow } from '@xyflow/react';
+import { useLayout } from '@/hooks/use-layout';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
+
+interface FocusOptions {
+    select?: boolean;
+}
+
+export const useFocusOn = () => {
+    const { fitView, setNodes, setEdges } = useReactFlow();
+    const { hideSidePanel } = useLayout();
+    const { isMd: isDesktop } = useBreakpoint('md');
+
+    const focusOnArea = useCallback(
+        (areaId: string, options: FocusOptions = {}) => {
+            const { select = true } = options;
+
+            if (select) {
+                setNodes((nodes) =>
+                    nodes.map((node) =>
+                        node.id === areaId
+                            ? {
+                                  ...node,
+                                  selected: true,
+                              }
+                            : {
+                                  ...node,
+                                  selected: false,
+                              }
+                    )
+                );
+            }
+
+            fitView({
+                duration: 500,
+                maxZoom: 1,
+                minZoom: 1,
+                nodes: [
+                    {
+                        id: areaId,
+                    },
+                ],
+            });
+
+            if (!isDesktop) {
+                hideSidePanel();
+            }
+        },
+        [fitView, setNodes, hideSidePanel, isDesktop]
+    );
+
+    const focusOnTable = useCallback(
+        (tableId: string, options: FocusOptions = {}) => {
+            const { select = true } = options;
+
+            if (select) {
+                setNodes((nodes) =>
+                    nodes.map((node) =>
+                        node.id === tableId
+                            ? {
+                                  ...node,
+                                  selected: true,
+                              }
+                            : {
+                                  ...node,
+                                  selected: false,
+                              }
+                    )
+                );
+            }
+
+            fitView({
+                duration: 500,
+                maxZoom: 1,
+                minZoom: 1,
+                nodes: [
+                    {
+                        id: tableId,
+                    },
+                ],
+            });
+
+            if (!isDesktop) {
+                hideSidePanel();
+            }
+        },
+        [fitView, setNodes, hideSidePanel, isDesktop]
+    );
+
+    const focusOnRelationship = useCallback(
+        (
+            relationshipId: string,
+            sourceTableId: string,
+            targetTableId: string,
+            options: FocusOptions = {}
+        ) => {
+            const { select = true } = options;
+
+            if (select) {
+                setEdges((edges) =>
+                    edges.map((edge) =>
+                        edge.id === relationshipId
+                            ? {
+                                  ...edge,
+                                  selected: true,
+                              }
+                            : {
+                                  ...edge,
+                                  selected: false,
+                              }
+                    )
+                );
+            }
+
+            fitView({
+                duration: 500,
+                maxZoom: 1,
+                minZoom: 1,
+                nodes: [
+                    {
+                        id: sourceTableId,
+                    },
+                    {
+                        id: targetTableId,
+                    },
+                ],
+            });
+
+            if (!isDesktop) {
+                hideSidePanel();
+            }
+        },
+        [fitView, setEdges, hideSidePanel, isDesktop]
+    );
+
+    return {
+        focusOnArea,
+        focusOnTable,
+        focusOnRelationship,
+    };
+};

src/hooks/use-update-table-field.ts

@@ -0,0 +1,379 @@
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import { useChartDB } from './use-chartdb';
+import { useDebounce } from './use-debounce-v2';
+import type { DatabaseType, DBField, DBTable } from '@/lib/domain';
+import type {
+    SelectBoxOption,
+    SelectBoxProps,
+} from '@/components/select-box/select-box';
+import {
+    dataTypeDataToDataType,
+    sortedDataTypeMap,
+    supportsArrayDataType,
+    autoIncrementAlwaysOn,
+    requiresNotNull,
+} from '@/lib/data/data-types/data-types';
+import { generateDBFieldSuffix } from '@/lib/domain/db-field';
+import type { DataTypeData } from '@/lib/data/data-types/data-types';
+
+const generateFieldRegexPatterns = (
+    dataType: DataTypeData,
+    databaseType: DatabaseType
+): {
+    regex?: string;
+    extractRegex?: RegExp;
+} => {
+    const typeName = dataType.name;
+    const supportsArrays = supportsArrayDataType(dataType.id, databaseType);
+    const arrayPattern = supportsArrays ? '(\\[\\])?' : '';
+
+    if (!dataType.fieldAttributes) {
+        // For types without field attributes, support plain type + optional array notation
+        return {
+            regex: `^${typeName}${arrayPattern}$`,
+            extractRegex: new RegExp(`^${typeName}${arrayPattern}$`),
+        };
+    }
+
+    const fieldAttributes = dataType.fieldAttributes;
+
+    if (fieldAttributes.hasCharMaxLength) {
+        if (fieldAttributes.hasCharMaxLengthOption) {
+            return {
+                regex: `^${typeName}\\((\\d+|[mM][aA][xX])\\)${arrayPattern}$`,
+                extractRegex: supportsArrays
+                    ? /\((\d+|max)\)(\[\])?/i
+                    : /\((\d+|max)\)/i,
+            };
+        }
+        return {
+            regex: `^${typeName}\\(\\d+\\)${arrayPattern}$`,
+            extractRegex: supportsArrays ? /\((\d+)\)(\[\])?/ : /\((\d+)\)/,
+        };
+    }
+
+    if (fieldAttributes.precision && fieldAttributes.scale) {
+        return {
+            regex: `^${typeName}\\s*\\(\\s*\\d+\\s*(?:,\\s*\\d+\\s*)?\\)${arrayPattern}$`,
+            extractRegex: new RegExp(
+                `${typeName}\\s*\\(\\s*(\\d+)\\s*(?:,\\s*(\\d+)\\s*)?\\)${arrayPattern}`
+            ),
+        };
+    }
+
+    if (fieldAttributes.precision) {
+        return {
+            regex: `^${typeName}\\s*\\(\\s*\\d+\\s*\\)${arrayPattern}$`,
+            extractRegex: supportsArrays ? /\((\d+)\)(\[\])?/ : /\((\d+)\)/,
+        };
+    }
+
+    return { regex: undefined, extractRegex: undefined };
+};
+
+export const useUpdateTableField = (
+    table: DBTable,
+    field: DBField,
+    customUpdateField?: (attrs: Partial<DBField>) => void
+) => {
+    const {
+        databaseType,
+        customTypes,
+        updateField: chartDBUpdateField,
+        removeField: chartDBRemoveField,
+    } = useChartDB();
+
+    // Local state for responsive UI
+    const [localFieldName, setLocalFieldName] = useState(field.name);
+    const [localNullable, setLocalNullable] = useState(field.nullable);
+    const [localPrimaryKey, setLocalPrimaryKey] = useState(field.primaryKey);
+
+    const lastFieldNameRef = useRef<string>(field.name);
+
+    useEffect(() => {
+        if (localFieldName === lastFieldNameRef.current) {
+            lastFieldNameRef.current = field.name;
+            setLocalFieldName(field.name);
+        }
+    }, [field.name, localFieldName]);
+
+    // Update local state when field properties change externally
+    useEffect(() => {
+        setLocalNullable(field.nullable);
+        setLocalPrimaryKey(field.primaryKey);
+    }, [field.nullable, field.primaryKey]);
+
+    // Use custom updateField if provided, otherwise use the chartDB one
+    const updateField = useMemo(
+        () =>
+            customUpdateField
+                ? (
+                      _tableId: string,
+                      _fieldId: string,
+                      attrs: Partial<DBField>
+                  ) => customUpdateField(attrs)
+                : chartDBUpdateField,
+        [customUpdateField, chartDBUpdateField]
+    );
+
+    // Calculate primary key fields for validation
+    const primaryKeyFields = useMemo(() => {
+        return table.fields.filter((f) => f.primaryKey);
+    }, [table.fields]);
+
+    const primaryKeyCount = useMemo(
+        () => primaryKeyFields.length,
+        [primaryKeyFields.length]
+    );
+
+    // Generate data type options for select box
+    const dataFieldOptions = useMemo(() => {
+        const standardTypes: SelectBoxOption[] = sortedDataTypeMap[
+            databaseType
+        ].map((type) => {
+            const regexPatterns = generateFieldRegexPatterns(
+                type,
+                databaseType
+            );
+
+            return {
+                label: type.name,
+                value: type.id,
+                regex: regexPatterns.regex,
+                extractRegex: regexPatterns.extractRegex,
+                group: customTypes?.length ? 'Standard Types' : undefined,
+            };
+        });
+
+        if (!customTypes?.length) {
+            return standardTypes;
+        }
+
+        // Add custom types as options
+        const customTypeOptions: SelectBoxOption[] = customTypes.map(
+            (type) => ({
+                label: type.name,
+                value: type.name,
+                description:
+                    type.kind === 'enum' ? `${type.values?.join(' | ')}` : '',
+                group: 'Custom Types',
+            })
+        );
+
+        return [...standardTypes, ...customTypeOptions];
+    }, [databaseType, customTypes]);
+
+    // Handle data type change
+    const handleDataTypeChange = useCallback<
+        NonNullable<SelectBoxProps['onChange']>
+    >(
+        (value, regexMatches) => {
+            const dataType = sortedDataTypeMap[databaseType].find(
+                (v) => v.id === value
+            ) ?? {
+                id: value as string,
+                name: value as string,
+            };
+
+            let characterMaximumLength: string | undefined = undefined;
+            let precision: number | undefined = undefined;
+            let scale: number | undefined = undefined;
+            let isArray: boolean | undefined = undefined;
+
+            if (regexMatches?.length) {
+                // Check if the last captured group is the array indicator []
+                const lastMatch = regexMatches[regexMatches.length - 1];
+                const hasArrayIndicator = lastMatch === '[]';
+
+                if (dataType?.fieldAttributes?.hasCharMaxLength) {
+                    characterMaximumLength = regexMatches[1]?.toLowerCase();
+                } else if (
+                    dataType?.fieldAttributes?.precision &&
+                    dataType?.fieldAttributes?.scale
+                ) {
+                    precision = parseInt(regexMatches[1]);
+                    scale = regexMatches[2]
+                        ? parseInt(regexMatches[2])
+                        : undefined;
+                } else if (dataType?.fieldAttributes?.precision) {
+                    precision = parseInt(regexMatches[1]);
+                }
+
+                // Set isArray if the array indicator was found and the type supports arrays
+                if (hasArrayIndicator) {
+                    const typeId = value as string;
+                    if (supportsArrayDataType(typeId, databaseType)) {
+                        isArray = true;
+                    }
+                } else {
+                    // Explicitly set to false/undefined if no array indicator
+                    isArray = undefined;
+                }
+            } else {
+                if (
+                    dataType?.fieldAttributes?.hasCharMaxLength &&
+                    field.characterMaximumLength
+                ) {
+                    characterMaximumLength = field.characterMaximumLength;
+                }
+
+                if (dataType?.fieldAttributes?.precision && field.precision) {
+                    precision = field.precision;
+                }
+
+                if (dataType?.fieldAttributes?.scale && field.scale) {
+                    scale = field.scale;
+                }
+            }
+
+            const newTypeName = dataType?.name ?? (value as string);
+            const typeRequiresNotNull = requiresNotNull(newTypeName);
+            const shouldForceIncrement = autoIncrementAlwaysOn(newTypeName);
+
+            updateField(table.id, field.id, {
+                characterMaximumLength,
+                precision,
+                scale,
+                isArray,
+                ...(typeRequiresNotNull ? { nullable: false } : {}),
+                increment: shouldForceIncrement ? true : undefined,
+                default: undefined,
+                type: dataTypeDataToDataType(
+                    dataType ?? {
+                        id: value as string,
+                        name: value as string,
+                    }
+                ),
+            });
+        },
+        [
+            updateField,
+            databaseType,
+            field.characterMaximumLength,
+            field.precision,
+            field.scale,
+            field.id,
+            table.id,
+        ]
+    );
+
+    // Debounced update for field name
+    const debouncedNameUpdate = useDebounce(
+        useCallback(
+            (value: string) => {
+                if (value.trim() !== field.name) {
+                    updateField(table.id, field.id, { name: value });
+                }
+            },
+            [updateField, table.id, field.id, field.name]
+        ),
+        300 // 300ms debounce for text input
+    );
+
+    // Debounced update for nullable toggle
+    const debouncedNullableUpdate = useDebounce(
+        useCallback(
+            (value: boolean) => {
+                const updates: Partial<DBField> = { nullable: value };
+
+                // If setting to nullable, clear increment (auto-increment requires NOT NULL)
+                if (value && field.increment) {
+                    updates.increment = undefined;
+                }
+
+                updateField(table.id, field.id, updates);
+            },
+            [updateField, table.id, field.id, field.increment]
+        ),
+        100 // 100ms debounce for toggle
+    );
+
+    // Debounced update for primary key toggle
+    const debouncedPrimaryKeyUpdate = useDebounce(
+        useCallback(
+            (value: boolean, primaryKeyCount: number) => {
+                if (value) {
+                    // When setting as primary key
+                    const updates: Partial<DBField> = {
+                        primaryKey: true,
+                    };
+                    // Only auto-set unique if this will be the only primary key
+                    if (primaryKeyCount === 0) {
+                        updates.unique = true;
+                    }
+                    updateField(table.id, field.id, updates);
+                } else {
+                    // When removing primary key
+                    updateField(table.id, field.id, {
+                        primaryKey: false,
+                    });
+                }
+            },
+            [updateField, table.id, field.id]
+        ),
+        100 // 100ms debounce for toggle
+    );
+
+    // Handle primary key toggle with optimistic update
+    const handlePrimaryKeyToggle = useCallback(
+        (value: boolean) => {
+            setLocalPrimaryKey(value);
+            debouncedPrimaryKeyUpdate(value, primaryKeyCount);
+        },
+        [primaryKeyCount, debouncedPrimaryKeyUpdate]
+    );
+
+    // Handle nullable toggle with optimistic update
+    const handleNullableToggle = useCallback(
+        (value: boolean) => {
+            setLocalNullable(value);
+            debouncedNullableUpdate(value);
+        },
+        [debouncedNullableUpdate]
+    );
+
+    // Handle name change with optimistic update
+    const handleNameChange = useCallback(
+        (value: string) => {
+            setLocalFieldName(value);
+            debouncedNameUpdate(value);
+        },
+        [debouncedNameUpdate]
+    );
+
+    // Utility function to generate field suffix for display
+    const generateFieldSuffix = useCallback(
+        (typeId?: string) => {
+            return generateDBFieldSuffix(
+                {
+                    ...field,
+                    isArray: field.isArray && typeId === field.type.id,
+                },
+                {
+                    databaseType,
+                    forceExtended: true,
+                    typeId,
+                }
+            );
+        },
+        [field, databaseType]
+    );
+
+    const removeField = useCallback(() => {
+        chartDBRemoveField(table.id, field.id);
+    }, [chartDBRemoveField, table.id, field.id]);
+
+    return {
+        dataFieldOptions,
+        handleDataTypeChange,
+        handlePrimaryKeyToggle,
+        handleNullableToggle,
+        handleNameChange,
+        generateFieldSuffix,
+        primaryKeyCount,
+        fieldName: localFieldName,
+        nullable: localNullable,
+        primaryKey: localPrimaryKey,
+        removeField,
+    };
+};

src/hooks/use-update-table.ts

@@ -0,0 +1,42 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useChartDB } from './use-chartdb';
+import { useDebounce } from './use-debounce-v2';
+import type { DBTable } from '@/lib/domain';
+
+// Hook for updating table properties with debouncing for performance
+export const useUpdateTable = (table: DBTable) => {
+    const { updateTable: chartDBUpdateTable } = useChartDB();
+    const [localTableName, setLocalTableName] = useState(table.name);
+
+    // Debounced update function
+    const debouncedUpdate = useDebounce(
+        useCallback(
+            (value: string) => {
+                if (value.trim() && value.trim() !== table.name) {
+                    chartDBUpdateTable(table.id, { name: value.trim() });
+                }
+            },
+            [chartDBUpdateTable, table.id, table.name]
+        ),
+        1000 // 1000ms debounce
+    );
+
+    // Update local state immediately for responsive UI
+    const handleTableNameChange = useCallback(
+        (value: string) => {
+            setLocalTableName(value);
+            debouncedUpdate(value);
+        },
+        [debouncedUpdate]
+    );
+
+    // Update local state when table name changes externally
+    useEffect(() => {
+        setLocalTableName(table.name);
+    }, [table.name]);
+
+    return {
+        tableName: localTableName,
+        handleTableNameChange,
+    };
+};

src/i18n/locales/ar.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const ar: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'جديد',
+            browse: 'تصفح',
+            tables: 'الجداول',
+            refs: 'المراجع',
+            areas: 'المناطق',
+            dependencies: 'التبعيات',
+            custom_types: 'الأنواع المخصصة',
+        },
         menu: {
-            file: {
-                file: 'ملف',
-                new: 'جديد',
-                open: 'فتح',
+            actions: {
+                actions: 'الإجراءات',
+                new: 'جديد...',
+                browse: 'تصفح...',
                 save: 'حفظ',
                 import: 'استيراد قاعدة بيانات',
                 export_sql: 'SQL تصدير',
                 export_as: 'تصدير كـ',
-                delete_diagram: 'حذف الرسم البياني',
-                exit: 'خروج',
+                delete_diagram: 'حذف',
             },
             edit: {
                 edit: 'تحرير',
@@ -29,6 +37,7 @@ export const ar: LanguageTranslation = {
                 hide_field_attributes: 'إخفاء خصائص الحقل',
                 show_field_attributes: 'إظهار خصائص الحقل',
                 zoom_on_scroll: 'تكبير/تصغير عند التمرير',
+                show_views: 'عروض قاعدة البيانات',
                 theme: 'المظهر',
                 show_dependencies: 'إظهار الاعتمادات',
                 hide_dependencies: 'إخفاء الاعتمادات',
@@ -65,10 +74,10 @@ export const ar: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'إعادة ترتيب الرسم البياني',
+            title: 'ترتيب تلقائي للرسم البياني',
             description:
                 'هذا الإجراء سيقوم بإعادة ترتيب الجداول في المخطط بشكل تلقائي. هل تريد المتابعة؟',
-            reorder: 'إعادة ترتيب',
+            reorder: 'ترتيب تلقائي',
             cancel: 'إلغاء',
         },
 
@@ -110,6 +119,7 @@ export const ar: LanguageTranslation = {
             tables_section: {
                 tables: 'الجداول',
                 add_table: 'إضافة جدول',
+                add_view: 'إضافة عرض',
                 filter: 'تصفية',
                 collapse: 'طي الكل',
                 // TODO: Translate
@@ -135,6 +145,7 @@ export const ar: LanguageTranslation = {
                     field_actions: {
                         title: 'خصائص الحقل',
                         unique: 'فريد',
+                        auto_increment: 'زيادة تلقائية',
                         comments: 'تعليقات',
                         no_comments: 'لا يوجد تعليقات',
                         delete_field: 'حذف الحقل',
@@ -149,6 +160,7 @@ export const ar: LanguageTranslation = {
                         title: 'خصائص الفهرس',
                         name: 'الإسم',
                         unique: 'فريد',
+                        index_type: 'نوع الفهرس',
                         delete_index: 'حذف الفهرس',
                     },
                     table_actions: {
@@ -165,12 +177,15 @@ export const ar: LanguageTranslation = {
                     description: 'أنشئ جدولاً للبدء',
                 },
             },
-            relationships_section: {
-                relationships: 'العلاقات',
+            refs_section: {
+                refs: 'المراجع',
                 filter: 'تصفية',
-                add_relationship: 'إضافة علاقة',
                 collapse: 'طي الكل',
+                add_relationship: 'إضافة علاقة',
+                relationships: 'العلاقات',
+                dependencies: 'الاعتمادات',
                 relationship: {
+                    relationship: 'العلاقة',
                     primary: 'الجدول الأساسي',
                     foreign: 'الجدول المرتبط',
                     cardinality: 'الكاردينالية',
@@ -180,16 +195,8 @@ export const ar: LanguageTranslation = {
                         delete_relationship: 'حذف',
                     },
                 },
-                empty_state: {
-                    title: 'لا توجد علاقات',
-                    description: 'إنشئ علاقة لربط الجداول',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'الاعتمادات',
-                filter: 'تصفية',
-                collapse: 'طي الكل',
                 dependency: {
+                    dependency: 'الاعتماد',
                     table: 'الجدول',
                     dependent_table: 'عرض الاعتمادات',
                     delete_dependency: 'حذف',
@@ -199,8 +206,8 @@ export const ar: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'لا توجد اعتمادات',
-                    description: 'إنشاء اعتماد للبدء',
+                    title: 'لا توجد علاقات',
+                    description: 'إنشاء علاقة للبدء',
                 },
             },
 
@@ -241,6 +248,7 @@ export const ar: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'لم يتم تحديد قيم التعداد',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -263,7 +271,7 @@ export const ar: LanguageTranslation = {
             show_all: 'عرض الكل',
             undo: 'تراجع',
             redo: 'إعادة',
-            reorder_diagram: 'إعادة ترتيب الرسم البياني',
+            reorder_diagram: 'ترتيب تلقائي للرسم البياني',
             highlight_overlapping_tables: 'تمييز الجداول المتداخلة',
             // TODO: Translate
             filter: 'Filter Tables',
@@ -306,7 +314,7 @@ export const ar: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'فتح مخطط',
+            title: 'فتح قاعدة بيانات',
             description: 'اختر مخططًا لفتحه من القائمة ادناه',
             table_columns: {
                 name: 'الإسم',
@@ -316,6 +324,12 @@ export const ar: LanguageTranslation = {
             },
             cancel: 'إلغاء',
             open: 'فتح',
+
+            diagram_actions: {
+                open: 'فتح',
+                duplicate: 'تكرار',
+                delete: 'حذف',
+            },
         },
 
         export_sql_dialog: {
@@ -461,6 +475,7 @@ export const ar: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'جدول جديد',
+            new_view: 'عرض جديد',
             new_relationship: 'علاقة جديدة',
             // TODO: Translate
             new_area: 'New Area',
@@ -482,6 +497,8 @@ export const ar: LanguageTranslation = {
         language_select: {
             change_language: 'اللغة',
         },
+        on: 'تشغيل',
+        off: 'إيقاف',
     },
 };
 

src/i18n/locales/bn.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const bn: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'নতুন',
+            browse: 'ব্রাউজ',
+            tables: 'টেবিল',
+            refs: 'রেফস',
+            areas: 'এলাকা',
+            dependencies: 'নির্ভরতা',
+            custom_types: 'কাস্টম টাইপ',
+        },
         menu: {
-            file: {
-                file: 'ফাইল',
-                new: 'নতুন',
-                open: 'খুলুন',
+            actions: {
+                actions: 'কার্য',
+                new: 'নতুন...',
+                browse: 'ব্রাউজ করুন...',
                 save: 'সংরক্ষণ করুন',
                 import: 'ডাটাবেস আমদানি করুন',
                 export_sql: 'SQL রপ্তানি করুন',
                 export_as: 'রূপে রপ্তানি করুন',
-                delete_diagram: 'ডায়াগ্রাম মুছুন',
-                exit: 'প্রস্থান করুন',
+                delete_diagram: 'মুছুন',
             },
             edit: {
                 edit: 'সম্পাদনা',
@@ -29,6 +37,7 @@ export const bn: LanguageTranslation = {
                 hide_field_attributes: 'ফিল্ড অ্যাট্রিবিউট লুকান',
                 show_field_attributes: 'ফিল্ড অ্যাট্রিবিউট দেখান',
                 zoom_on_scroll: 'স্ক্রলে জুম করুন',
+                show_views: 'ডাটাবেস ভিউ',
                 theme: 'থিম',
                 show_dependencies: 'নির্ভরতাগুলি দেখান',
                 hide_dependencies: 'নির্ভরতাগুলি লুকান',
@@ -66,10 +75,10 @@ export const bn: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'ডায়াগ্রাম পুনর্বিন্যাস করুন',
+            title: 'স্বয়ংক্রিয় ডায়াগ্রাম সাজান',
             description:
                 'এই কাজটি ডায়াগ্রামের সমস্ত টেবিল পুনর্বিন্যাস করবে। আপনি কি চালিয়ে যেতে চান?',
-            reorder: 'পুনর্বিন্যাস করুন',
+            reorder: 'স্বয়ংক্রিয় সাজান',
             cancel: 'বাতিল করুন',
         },
 
@@ -111,6 +120,7 @@ export const bn: LanguageTranslation = {
             tables_section: {
                 tables: 'টেবিল',
                 add_table: 'টেবিল যোগ করুন',
+                add_view: 'ভিউ যোগ করুন',
                 filter: 'ফিল্টার',
                 collapse: 'সব ভাঁজ করুন',
                 // TODO: Translate
@@ -136,6 +146,7 @@ export const bn: LanguageTranslation = {
                     field_actions: {
                         title: 'ফিল্ড কর্ম',
                         unique: 'অদ্বিতীয়',
+                        auto_increment: 'স্বয়ংক্রিয় বৃদ্ধি',
                         comments: 'মন্তব্য',
                         no_comments: 'কোনো মন্তব্য নেই',
                         delete_field: 'ফিল্ড মুছুন',
@@ -151,6 +162,7 @@ export const bn: LanguageTranslation = {
                         title: 'ইনডেক্স কর্ম',
                         name: 'নাম',
                         unique: 'অদ্বিতীয়',
+                        index_type: 'ইনডেক্স ধরন',
                         delete_index: 'ইনডেক্স মুছুন',
                     },
                     table_actions: {
@@ -167,14 +179,17 @@ export const bn: LanguageTranslation = {
                     description: 'শুরু করতে একটি টেবিল তৈরি করুন',
                 },
             },
-            relationships_section: {
-                relationships: 'সম্পর্ক',
+            refs_section: {
+                refs: 'রেফস',
                 filter: 'ফিল্টার',
-                add_relationship: 'সম্পর্ক যোগ করুন',
                 collapse: 'সব ভাঁজ করুন',
+                add_relationship: 'সম্পর্ক যোগ করুন',
+                relationships: 'সম্পর্ক',
+                dependencies: 'নির্ভরতাগুলি',
                 relationship: {
+                    relationship: 'সম্পর্ক',
                     primary: 'প্রাথমিক টেবিল',
-                    foreign: 'বিদেশি টেবিল',
+                    foreign: 'রেফারেন্স করা টেবিল',
                     cardinality: 'কার্ডিনালিটি',
                     delete_relationship: 'মুছুন',
                     relationship_actions: {
@@ -182,27 +197,19 @@ export const bn: LanguageTranslation = {
                         delete_relationship: 'মুছুন',
                     },
                 },
-                empty_state: {
-                    title: 'কোনো সম্পর্ক নেই',
-                    description: 'টেবিল সংযোগ করতে একটি সম্পর্ক তৈরি করুন',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'নির্ভরতাগুলি',
-                filter: 'ফিল্টার',
-                collapse: 'ভাঁজ করুন',
                 dependency: {
+                    dependency: 'নির্ভরতা',
                     table: 'টেবিল',
-                    dependent_table: 'নির্ভরশীল টেবিল',
-                    delete_dependency: 'নির্ভরতা মুছুন',
+                    dependent_table: 'নির্ভরশীল ভিউ',
+                    delete_dependency: 'মুছুন',
                     dependency_actions: {
                         title: 'কর্ম',
-                        delete_dependency: 'নির্ভরতা মুছুন',
+                        delete_dependency: 'মুছুন',
                     },
                 },
                 empty_state: {
-                    title: 'কোনো নির্ভরতাগুলি নেই',
-                    description: 'এই অংশে কোনো নির্ভরতা উপলব্ধ নেই।',
+                    title: 'কোনো সম্পর্ক নেই',
+                    description: 'শুরু করতে একটি সম্পর্ক তৈরি করুন',
                 },
             },
 
@@ -242,6 +249,7 @@ export const bn: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'কোন enum মান সংজ্ঞায়িত নেই',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -264,7 +272,7 @@ export const bn: LanguageTranslation = {
             show_all: 'সব দেখান',
             undo: 'পূর্বাবস্থায় ফিরুন',
             redo: 'পুনরায় করুন',
-            reorder_diagram: 'ডায়াগ্রাম পুনর্বিন্যাস করুন',
+            reorder_diagram: 'স্বয়ংক্রিয় ডায়াগ্রাম সাজান',
             highlight_overlapping_tables: 'ওভারল্যাপিং টেবিল হাইলাইট করুন',
 
             // TODO: Translate
@@ -308,7 +316,7 @@ export const bn: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'চিত্র খুলুন',
+            title: 'ডেটাবেস খুলুন',
             description: 'নিচের তালিকা থেকে একটি চিত্র নির্বাচন করুন।',
             table_columns: {
                 name: 'নাম',
@@ -318,6 +326,12 @@ export const bn: LanguageTranslation = {
             },
             cancel: 'বাতিল করুন',
             open: 'খুলুন',
+
+            diagram_actions: {
+                open: 'খুলুন',
+                duplicate: 'ডুপ্লিকেট',
+                delete: 'মুছুন',
+            },
         },
 
         export_sql_dialog: {
@@ -466,6 +480,7 @@ export const bn: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'নতুন টেবিল',
+            new_view: 'নতুন ভিউ',
             new_relationship: 'নতুন সম্পর্ক',
             // TODO: Translate
             new_area: 'New Area',
@@ -487,6 +502,9 @@ export const bn: LanguageTranslation = {
         language_select: {
             change_language: 'ভাষা পরিবর্তন করুন',
         },
+
+        on: 'চালু',
+        off: 'বন্ধ',
     },
 };
 

src/i18n/locales/de.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const de: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Neu',
+            browse: 'Durchsuchen',
+            tables: 'Tabellen',
+            refs: 'Refs',
+            areas: 'Bereiche',
+            dependencies: 'Abhängigkeiten',
+            custom_types: 'Benutzerdefinierte Typen',
+        },
         menu: {
-            file: {
-                file: 'Datei',
-                new: 'Neu',
-                open: 'Öffnen',
+            actions: {
+                actions: 'Aktionen',
+                new: 'Neu...',
+                browse: 'Durchsuchen...',
                 save: 'Speichern',
                 import: 'Datenbank importieren',
                 export_sql: 'SQL exportieren',
                 export_as: 'Exportieren als',
-                delete_diagram: 'Diagramm löschen',
-                exit: 'Beenden',
+                delete_diagram: 'Löschen',
             },
             edit: {
                 edit: 'Bearbeiten',
@@ -29,6 +37,7 @@ export const de: LanguageTranslation = {
                 hide_field_attributes: 'Feldattribute ausblenden',
                 show_field_attributes: 'Feldattribute anzeigen',
                 zoom_on_scroll: 'Zoom beim Scrollen',
+                show_views: 'Datenbankansichten',
                 theme: 'Stil',
                 show_dependencies: 'Abhängigkeiten anzeigen',
                 hide_dependencies: 'Abhängigkeiten ausblenden',
@@ -66,10 +75,10 @@ export const de: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Diagramm neu anordnen',
+            title: 'Diagramm automatisch anordnen',
             description:
                 'Diese Aktion wird alle Tabellen im Diagramm neu anordnen. Möchten Sie fortfahren?',
-            reorder: 'Neu anordnen',
+            reorder: 'Automatisch anordnen',
             cancel: 'Abbrechen',
         },
 
@@ -112,6 +121,7 @@ export const de: LanguageTranslation = {
             tables_section: {
                 tables: 'Tabellen',
                 add_table: 'Tabelle hinzufügen',
+                add_view: 'Ansicht hinzufügen',
                 filter: 'Filter',
                 collapse: 'Alle einklappen',
                 // TODO: Translate
@@ -137,6 +147,7 @@ export const de: LanguageTranslation = {
                     field_actions: {
                         title: 'Feldattribute',
                         unique: 'Eindeutig',
+                        auto_increment: 'Automatisch hochzählen',
                         comments: 'Kommentare',
                         no_comments: 'Keine Kommentare',
                         delete_field: 'Feld löschen',
@@ -152,6 +163,7 @@ export const de: LanguageTranslation = {
                         title: 'Indexattribute',
                         name: 'Name',
                         unique: 'Eindeutig',
+                        index_type: 'Indextyp',
                         delete_index: 'Index löschen',
                     },
                     table_actions: {
@@ -168,32 +180,26 @@ export const de: LanguageTranslation = {
                     description: 'Erstellen Sie eine Tabelle, um zu beginnen',
                 },
             },
-            relationships_section: {
-                relationships: 'Beziehungen',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filter',
-                add_relationship: 'Beziehung hinzufügen',
                 collapse: 'Alle einklappen',
+                add_relationship: 'Beziehung hinzufügen',
+                relationships: 'Beziehungen',
+                dependencies: 'Abhängigkeiten',
                 relationship: {
+                    relationship: 'Beziehung',
                     primary: 'Primäre Tabelle',
                     foreign: 'Referenzierte Tabelle',
                     cardinality: 'Kardinalität',
-                    delete_relationship: 'Beziehung löschen',
+                    delete_relationship: 'Löschen',
                     relationship_actions: {
                         title: 'Aktionen',
-                        delete_relationship: 'Beziehung löschen',
+                        delete_relationship: 'Löschen',
                     },
                 },
-                empty_state: {
-                    title: 'Keine Beziehungen',
-                    description:
-                        'Erstellen Sie eine Beziehung, um Tabellen zu verbinden',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Abhängigkeiten',
-                filter: 'Filter',
-                collapse: 'Alle einklappen',
                 dependency: {
+                    dependency: 'Abhängigkeit',
                     table: 'Tabelle',
                     dependent_table: 'Abhängige Ansicht',
                     delete_dependency: 'Löschen',
@@ -203,8 +209,8 @@ export const de: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Keine Abhängigkeiten',
-                    description: 'Erstellen Sie eine Ansicht, um zu beginnen',
+                    title: 'Keine Beziehungen',
+                    description: 'Erstellen Sie eine Beziehung, um zu beginnen',
                 },
             },
 
@@ -244,6 +250,7 @@ export const de: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Keine Enum-Werte definiert',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -266,7 +273,7 @@ export const de: LanguageTranslation = {
             show_all: 'Alle anzeigen',
             undo: 'Rückgängig',
             redo: 'Wiederholen',
-            reorder_diagram: 'Diagramm neu anordnen',
+            reorder_diagram: 'Diagramm automatisch anordnen',
 
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
@@ -312,7 +319,7 @@ export const de: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Diagramm öffnen',
+            title: 'Datenbank öffnen',
             description: 'Wählen Sie ein Diagramm aus der Liste unten aus.',
             table_columns: {
                 name: 'Name',
@@ -322,6 +329,12 @@ export const de: LanguageTranslation = {
             },
             cancel: 'Abbrechen',
             open: 'Öffnen',
+
+            diagram_actions: {
+                open: 'Öffnen',
+                duplicate: 'Duplizieren',
+                delete: 'Löschen',
+            },
         },
 
         export_sql_dialog: {
@@ -470,6 +483,7 @@ export const de: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Neue Tabelle',
+            new_view: 'Neue Ansicht',
             new_relationship: 'Neue Beziehung',
             // TODO: Translate
             new_area: 'New Area',
@@ -492,6 +506,9 @@ export const de: LanguageTranslation = {
         language_select: {
             change_language: 'Sprache',
         },
+
+        on: 'Ein',
+        off: 'Aus',
     },
 };
 

src/i18n/locales/en.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata } from '../types';
 
 export const en = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'New',
+            browse: 'Browse',
+            tables: 'Tables',
+            refs: 'Refs',
+            areas: 'Areas',
+            dependencies: 'Dependencies',
+            custom_types: 'Custom Types',
+        },
         menu: {
-            file: {
-                file: 'File',
-                new: 'New',
-                open: 'Open',
+            actions: {
+                actions: 'Actions',
+                new: 'New...',
+                browse: 'Browse...',
                 save: 'Save',
                 import: 'Import',
                 export_sql: 'Export SQL',
                 export_as: 'Export as',
-                delete_diagram: 'Delete Diagram',
-                exit: 'Exit',
+                delete_diagram: 'Delete',
             },
             edit: {
                 edit: 'Edit',
@@ -29,6 +37,7 @@ export const en = {
                 hide_field_attributes: 'Hide Field Attributes',
                 show_field_attributes: 'Show Field Attributes',
                 zoom_on_scroll: 'Zoom on Scroll',
+                show_views: 'Database Views',
                 theme: 'Theme',
                 show_dependencies: 'Show Dependencies',
                 hide_dependencies: 'Hide Dependencies',
@@ -64,10 +73,10 @@ export const en = {
         },
 
         reorder_diagram_alert: {
-            title: 'Reorder Diagram',
+            title: 'Auto Arrange Diagram',
             description:
                 'This action will rearrange all tables in the diagram. Do you want to continue?',
-            reorder: 'Reorder',
+            reorder: 'Auto Arrange',
             cancel: 'Cancel',
         },
 
@@ -109,6 +118,7 @@ export const en = {
             tables_section: {
                 tables: 'Tables',
                 add_table: 'Add Table',
+                add_view: 'Add View',
                 filter: 'Filter',
                 collapse: 'Collapse All',
                 clear: 'Clear Filter',
@@ -132,6 +142,7 @@ export const en = {
                     field_actions: {
                         title: 'Field Attributes',
                         unique: 'Unique',
+                        auto_increment: 'Auto Increment',
                         character_length: 'Max Length',
                         precision: 'Precision',
                         scale: 'Scale',
@@ -145,6 +156,7 @@ export const en = {
                         title: 'Index Attributes',
                         name: 'Name',
                         unique: 'Unique',
+                        index_type: 'Index Type',
                         delete_index: 'Delete Index',
                     },
                     table_actions: {
@@ -161,12 +173,15 @@ export const en = {
                     description: 'Create a table to get started',
                 },
             },
-            relationships_section: {
-                relationships: 'Relationships',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filter',
-                add_relationship: 'Add Relationship',
                 collapse: 'Collapse All',
+                add_relationship: 'Add Relationship',
+                relationships: 'Relationships',
+                dependencies: 'Dependencies',
                 relationship: {
+                    relationship: 'Relationship',
                     primary: 'Primary Table',
                     foreign: 'Referenced Table',
                     cardinality: 'Cardinality',
@@ -176,16 +191,8 @@ export const en = {
                         delete_relationship: 'Delete',
                     },
                 },
-                empty_state: {
-                    title: 'No relationships',
-                    description: 'Create a relationship to connect tables',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Dependencies',
-                filter: 'Filter',
-                collapse: 'Collapse All',
                 dependency: {
+                    dependency: 'Dependency',
                     table: 'Table',
                     dependent_table: 'Dependent View',
                     delete_dependency: 'Delete',
@@ -195,8 +202,8 @@ export const en = {
                     },
                 },
                 empty_state: {
-                    title: 'No dependencies',
-                    description: 'Create a view to get started',
+                    title: 'No relationships',
+                    description: 'Create a relationship to get started',
                 },
             },
 
@@ -235,6 +242,7 @@ export const en = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'No enum values defined',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -257,7 +265,7 @@ export const en = {
             show_all: 'Show All',
             undo: 'Undo',
             redo: 'Redo',
-            reorder_diagram: 'Reorder Diagram',
+            reorder_diagram: 'Auto Arrange Diagram',
             highlight_overlapping_tables: 'Highlight Overlapping Tables',
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -299,7 +307,7 @@ export const en = {
         },
 
         open_diagram_dialog: {
-            title: 'Open Diagram',
+            title: 'Open Database',
             description: 'Select a diagram to open from the list below.',
             table_columns: {
                 name: 'Name',
@@ -309,6 +317,12 @@ export const en = {
             },
             cancel: 'Cancel',
             open: 'Open',
+
+            diagram_actions: {
+                open: 'Open',
+                duplicate: 'Duplicate',
+                delete: 'Delete',
+            },
         },
 
         export_sql_dialog: {
@@ -456,6 +470,7 @@ export const en = {
 
         canvas_context_menu: {
             new_table: 'New Table',
+            new_view: 'New View',
             new_relationship: 'New Relationship',
             new_area: 'New Area',
         },
@@ -476,6 +491,9 @@ export const en = {
         language_select: {
             change_language: 'Language',
         },
+
+        on: 'On',
+        off: 'Off',
     },
 };
 

src/i18n/locales/es.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const es: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Nuevo',
+            browse: 'Examinar',
+            tables: 'Tablas',
+            refs: 'Refs',
+            areas: 'Áreas',
+            dependencies: 'Dependencias',
+            custom_types: 'Tipos Personalizados',
+        },
         menu: {
-            file: {
-                file: 'Archivo',
-                new: 'Nuevo',
-                open: 'Abrir',
+            actions: {
+                actions: 'Acciones',
+                new: 'Nuevo...',
+                browse: 'Examinar...',
                 save: 'Guardar',
                 import: 'Importar Base de Datos',
                 export_sql: 'Exportar SQL',
                 export_as: 'Exportar como',
-                delete_diagram: 'Eliminar Diagrama',
-                exit: 'Salir',
+                delete_diagram: 'Eliminar',
             },
             edit: {
                 edit: 'Editar',
@@ -29,6 +37,7 @@ export const es: LanguageTranslation = {
                 show_sidebar: 'Mostrar Barra Lateral',
                 hide_sidebar: 'Ocultar Barra Lateral',
                 zoom_on_scroll: 'Zoom al Desplazarse',
+                show_views: 'Vistas de Base de Datos',
                 theme: 'Tema',
                 show_dependencies: 'Mostrar dependencias',
                 hide_dependencies: 'Ocultar dependencias',
@@ -65,10 +74,10 @@ export const es: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Reordenar Diagrama',
+            title: 'Organizar Diagrama Automáticamente',
             description:
                 'Esta acción reorganizará todas las tablas en el diagrama. ¿Deseas continuar?',
-            reorder: 'Reordenar',
+            reorder: 'Organizar Automáticamente',
             cancel: 'Cancelar',
         },
 
@@ -110,6 +119,7 @@ export const es: LanguageTranslation = {
             tables_section: {
                 tables: 'Tablas',
                 add_table: 'Agregar Tabla',
+                add_view: 'Agregar Vista',
                 filter: 'Filtrar',
                 collapse: 'Colapsar Todo',
                 // TODO: Translate
@@ -135,6 +145,7 @@ export const es: LanguageTranslation = {
                     field_actions: {
                         title: 'Atributos del Campo',
                         unique: 'Único',
+                        auto_increment: 'Autoincremento',
                         comments: 'Comentarios',
                         no_comments: 'Sin comentarios',
                         delete_field: 'Eliminar Campo',
@@ -150,6 +161,7 @@ export const es: LanguageTranslation = {
                         title: 'Atributos del Índice',
                         name: 'Nombre',
                         unique: 'Único',
+                        index_type: 'Tipo de Índice',
                         delete_index: 'Eliminar Índice',
                     },
                     table_actions: {
@@ -166,14 +178,17 @@ export const es: LanguageTranslation = {
                     description: 'Crea una tabla para comenzar',
                 },
             },
-            relationships_section: {
-                relationships: 'Relaciones',
-                add_relationship: 'Agregar Relación',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filtrar',
                 collapse: 'Colapsar Todo',
+                add_relationship: 'Agregar Relación',
+                relationships: 'Relaciones',
+                dependencies: 'Dependencias',
                 relationship: {
-                    primary: 'Primaria',
-                    foreign: 'Foránea',
+                    relationship: 'Relación',
+                    primary: 'Tabla Primaria',
+                    foreign: 'Tabla Referenciada',
                     cardinality: 'Cardinalidad',
                     delete_relationship: 'Eliminar',
                     relationship_actions: {
@@ -181,18 +196,10 @@ export const es: LanguageTranslation = {
                         delete_relationship: 'Eliminar',
                     },
                 },
-                empty_state: {
-                    title: 'No hay relaciones',
-                    description: 'Crea una relación para conectar tablas',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Dependencias',
-                filter: 'Filtro',
-                collapse: 'Colapsar todo',
                 dependency: {
+                    dependency: 'Dependencia',
                     table: 'Tabla',
-                    dependent_table: 'Vista dependiente',
+                    dependent_table: 'Vista Dependiente',
                     delete_dependency: 'Eliminar',
                     dependency_actions: {
                         title: 'Acciones',
@@ -200,8 +207,8 @@ export const es: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Sin dependencias',
-                    description: 'Crea una vista para comenzar',
+                    title: 'Sin relaciones',
+                    description: 'Crea una relación para comenzar',
                 },
             },
 
@@ -241,6 +248,7 @@ export const es: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'No hay valores de enum definidos',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -263,7 +271,7 @@ export const es: LanguageTranslation = {
             show_all: 'Mostrar Todo',
             undo: 'Deshacer',
             redo: 'Rehacer',
-            reorder_diagram: 'Reordenar Diagrama',
+            reorder_diagram: 'Organizar Diagrama Automáticamente',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -308,7 +316,7 @@ export const es: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Abrir Diagrama',
+            title: 'Abrir Base de Datos',
             description:
                 'Selecciona un diagrama para abrir de la lista a continuación.',
             table_columns: {
@@ -319,6 +327,12 @@ export const es: LanguageTranslation = {
             },
             cancel: 'Cancelar',
             open: 'Abrir',
+
+            diagram_actions: {
+                open: 'Abrir',
+                duplicate: 'Duplicar',
+                delete: 'Eliminar',
+            },
         },
 
         export_sql_dialog: {
@@ -468,6 +482,7 @@ export const es: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Nueva Tabla',
+            new_view: 'Nueva Vista',
             new_relationship: 'Nueva Relación',
             // TODO: Translate
             new_area: 'New Area',
@@ -490,6 +505,9 @@ export const es: LanguageTranslation = {
         language_select: {
             change_language: 'Idioma',
         },
+
+        on: 'Encendido',
+        off: 'Apagado',
     },
 };
 

src/i18n/locales/fr.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const fr: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Nouveau',
+            browse: 'Parcourir',
+            tables: 'Tables',
+            refs: 'Refs',
+            areas: 'Zones',
+            dependencies: 'Dépendances',
+            custom_types: 'Types Personnalisés',
+        },
         menu: {
-            file: {
-                file: 'Fichier',
-                new: 'Nouveau',
-                open: 'Ouvrir',
+            actions: {
+                actions: 'Actions',
+                new: 'Nouveau...',
+                browse: 'Parcourir...',
                 save: 'Enregistrer',
                 import: 'Importer Base de Données',
                 export_sql: 'Exporter SQL',
                 export_as: 'Exporter en tant que',
-                delete_diagram: 'Supprimer le Diagramme',
-                exit: 'Quitter',
+                delete_diagram: 'Supprimer',
             },
             edit: {
                 edit: 'Édition',
@@ -29,6 +37,7 @@ export const fr: LanguageTranslation = {
                 hide_field_attributes: 'Masquer les Attributs de Champ',
                 show_field_attributes: 'Afficher les Attributs de Champ',
                 zoom_on_scroll: 'Zoom sur le Défilement',
+                show_views: 'Vues de Base de Données',
                 theme: 'Thème',
                 show_dependencies: 'Afficher les Dépendances',
                 hide_dependencies: 'Masquer les Dépendances',
@@ -64,10 +73,10 @@ export const fr: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Réorganiser le Diagramme',
+            title: 'Organiser Automatiquement le Diagramme',
             description:
                 'Cette action réorganisera toutes les tables dans le diagramme. Voulez-vous continuer ?',
-            reorder: 'Réorganiser',
+            reorder: 'Organiser Automatiquement',
             cancel: 'Annuler',
         },
 
@@ -109,6 +118,7 @@ export const fr: LanguageTranslation = {
             tables_section: {
                 tables: 'Tables',
                 add_table: 'Ajouter une Table',
+                add_view: 'Ajouter une Vue',
                 filter: 'Filtrer',
                 collapse: 'Réduire Tout',
                 clear: 'Effacer le Filtre',
@@ -133,6 +143,7 @@ export const fr: LanguageTranslation = {
                     field_actions: {
                         title: 'Attributs du Champ',
                         unique: 'Unique',
+                        auto_increment: 'Auto-incrément',
                         comments: 'Commentaires',
                         no_comments: 'Pas de commentaires',
                         delete_field: 'Supprimer le Champ',
@@ -148,6 +159,7 @@ export const fr: LanguageTranslation = {
                         title: "Attributs de l'Index",
                         name: 'Nom',
                         unique: 'Unique',
+                        index_type: "Type d'index",
                         delete_index: "Supprimer l'Index",
                     },
                     table_actions: {
@@ -164,12 +176,15 @@ export const fr: LanguageTranslation = {
                     description: 'Créez une table pour commencer',
                 },
             },
-            relationships_section: {
-                relationships: 'Relations',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filtrer',
-                add_relationship: 'Ajouter une Relation',
                 collapse: 'Réduire Tout',
+                add_relationship: 'Ajouter une Relation',
+                relationships: 'Relations',
+                dependencies: 'Dépendances',
                 relationship: {
+                    relationship: 'Relation',
                     primary: 'Table Principale',
                     foreign: 'Table Référencée',
                     cardinality: 'Cardinalité',
@@ -179,16 +194,8 @@ export const fr: LanguageTranslation = {
                         delete_relationship: 'Supprimer',
                     },
                 },
-                empty_state: {
-                    title: 'Aucune relation',
-                    description: 'Créez une relation pour connecter les tables',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Dépendances',
-                filter: 'Filtrer',
-                collapse: 'Réduire Tout',
                 dependency: {
+                    dependency: 'Dépendance',
                     table: 'Table',
                     dependent_table: 'Vue Dépendante',
                     delete_dependency: 'Supprimer',
@@ -198,8 +205,8 @@ export const fr: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Aucune dépendance',
-                    description: 'Créez une vue pour commencer',
+                    title: 'Aucune relation',
+                    description: 'Créez une relation pour commencer',
                 },
             },
 
@@ -239,6 +246,7 @@ export const fr: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: "Aucune valeur d'énumération définie",
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -261,7 +269,7 @@ export const fr: LanguageTranslation = {
             show_all: 'Afficher Tout',
             undo: 'Annuler',
             redo: 'Rétablir',
-            reorder_diagram: 'Réorganiser le Diagramme',
+            reorder_diagram: 'Organiser Automatiquement le Diagramme',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -305,7 +313,7 @@ export const fr: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Ouvrir Diagramme',
+            title: 'Ouvrir Base de Données',
             description:
                 'Sélectionnez un diagramme à ouvrir dans la liste ci-dessous.',
             table_columns: {
@@ -316,6 +324,12 @@ export const fr: LanguageTranslation = {
             },
             cancel: 'Annuler',
             open: 'Ouvrir',
+
+            diagram_actions: {
+                open: 'Ouvrir',
+                duplicate: 'Dupliquer',
+                delete: 'Supprimer',
+            },
         },
 
         export_sql_dialog: {
@@ -464,6 +478,7 @@ export const fr: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Nouvelle Table',
+            new_view: 'Nouvelle Vue',
             new_relationship: 'Nouvelle Relation',
             // TODO: Translate
             new_area: 'New Area',
@@ -486,6 +501,9 @@ export const fr: LanguageTranslation = {
         language_select: {
             change_language: 'Langue',
         },
+
+        on: 'Activé',
+        off: 'Désactivé',
     },
 };
 

src/i18n/locales/gu.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const gu: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'નવું',
+            browse: 'બ્રાઉજ',
+            tables: 'ટેબલો',
+            refs: 'રેફ્સ',
+            areas: 'ક્ષેત્રો',
+            dependencies: 'નિર્ભરતાઓ',
+            custom_types: 'કસ્ટમ ટાઇપ',
+        },
         menu: {
-            file: {
-                file: 'ફાઇલ',
-                new: 'નવું',
-                open: 'ખોલો',
+            actions: {
+                actions: 'ક્રિયાઓ',
+                new: 'નવું...',
+                browse: 'બ્રાઉજ કરો...',
                 save: 'સાચવો',
                 import: 'ડેટાબેસ આયાત કરો',
                 export_sql: 'SQL નિકાસ કરો',
                 export_as: 'રૂપે નિકાસ કરો',
-                delete_diagram: 'ડાયાગ્રામ કાઢી નાખો',
-                exit: 'બહાર જાઓ',
+                delete_diagram: 'કાઢી નાખો',
             },
             edit: {
                 edit: 'ફેરફાર',
@@ -29,6 +37,7 @@ export const gu: LanguageTranslation = {
                 hide_field_attributes: 'ફીલ્ડ અટ્રિબ્યુટ્સ છુપાવો',
                 show_field_attributes: 'ફીલ્ડ અટ્રિબ્યુટ્સ બતાવો',
                 zoom_on_scroll: 'સ્ક્રોલ પર ઝૂમ કરો',
+                show_views: 'ડેટાબેઝ વ્યૂઝ',
                 theme: 'થિમ',
                 show_dependencies: 'નિર્ભરતાઓ બતાવો',
                 hide_dependencies: 'નિર્ભરતાઓ છુપાવો',
@@ -66,10 +75,10 @@ export const gu: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'ડાયાગ્રામ ફરી વ્યવસ્થિત કરો',
+            title: 'ડાયાગ્રામ ઑટોમેટિક ગોઠવો',
             description:
                 'આ ક્રિયા ડાયાગ્રામમાં બધી ટેબલ્સને ફરીથી વ્યવસ્થિત કરશે. શું તમે ચાલુ રાખવા માંગો છો?',
-            reorder: 'ફરી વ્યવસ્થિત કરો',
+            reorder: 'ઑટોમેટિક ગોઠવો',
             cancel: 'રદ કરો',
         },
 
@@ -111,6 +120,7 @@ export const gu: LanguageTranslation = {
             tables_section: {
                 tables: 'ટેબલ્સ',
                 add_table: 'ટેબલ ઉમેરો',
+                add_view: 'વ્યૂ ઉમેરો',
                 filter: 'ફિલ્ટર',
                 collapse: 'બધાને સકુચિત કરો',
                 // TODO: Translate
@@ -137,6 +147,7 @@ export const gu: LanguageTranslation = {
                     field_actions: {
                         title: 'ફીલ્ડ લક્ષણો',
                         unique: 'અદ્વિતીય',
+                        auto_increment: 'ઑટો ઇન્ક્રિમેન્ટ',
                         comments: 'ટિપ્પણીઓ',
                         no_comments: 'કોઈ ટિપ્પણીઓ નથી',
                         delete_field: 'ફીલ્ડ કાઢી નાખો',
@@ -152,6 +163,7 @@ export const gu: LanguageTranslation = {
                         title: 'ઇન્ડેક્સ લક્ષણો',
                         name: 'નામ',
                         unique: 'અદ્વિતીય',
+                        index_type: 'ઇન્ડેક્સ પ્રકાર',
                         delete_index: 'ઇન્ડેક્સ કાઢી નાખો',
                     },
                     table_actions: {
@@ -168,14 +180,17 @@ export const gu: LanguageTranslation = {
                     description: 'શરૂ કરવા માટે એક ટેબલ બનાવો',
                 },
             },
-            relationships_section: {
-                relationships: 'સંબંધો',
+            refs_section: {
+                refs: 'રેફ્સ',
                 filter: 'ફિલ્ટર',
-                add_relationship: 'સંબંધ ઉમેરો',
                 collapse: 'બધાને સકુચિત કરો',
+                add_relationship: 'સંબંધ ઉમેરો',
+                relationships: 'સંબંધો',
+                dependencies: 'નિર્ભરતાઓ',
                 relationship: {
+                    relationship: 'સંબંધ',
                     primary: 'પ્રાથમિક ટેબલ',
-                    foreign: 'સંદર્ભ ટેબલ',
+                    foreign: 'સંદર્ભિત ટેબલ',
                     cardinality: 'કાર્ડિનાલિટી',
                     delete_relationship: 'કાઢી નાખો',
                     relationship_actions: {
@@ -183,27 +198,19 @@ export const gu: LanguageTranslation = {
                         delete_relationship: 'કાઢી નાખો',
                     },
                 },
-                empty_state: {
-                    title: 'કોઈ સંબંધો નથી',
-                    description: 'ટેબલ્સ કનેક્ટ કરવા માટે એક સંબંધ બનાવો',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'નિર્ભરતાઓ',
-                filter: 'ફિલ્ટર',
-                collapse: 'સિકોડો',
                 dependency: {
+                    dependency: 'નિર્ભરતા',
                     table: 'ટેબલ',
-                    dependent_table: 'આધાર રાખેલું ટેબલ',
-                    delete_dependency: 'નિર્ભરતા કાઢી નાખો',
+                    dependent_table: 'નિર્ભરશીલ વ્યૂ',
+                    delete_dependency: 'કાઢી નાખો',
                     dependency_actions: {
                         title: 'ક્રિયાઓ',
-                        delete_dependency: 'નિર્ભરતા કાઢી નાખો',
+                        delete_dependency: 'કાઢી નાખો',
                     },
                 },
                 empty_state: {
-                    title: 'કોઈ નિર્ભરતાઓ નથી',
-                    description: 'આ વિભાગમાં કોઈ નિર્ભરતા ઉપલબ્ધ નથી.',
+                    title: 'કોઈ સંબંધો નથી',
+                    description: 'શરૂ કરવા માટે એક સંબંધ બનાવો',
                 },
             },
 
@@ -243,6 +250,7 @@ export const gu: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'કોઈ enum મૂલ્યો વ્યાખ્યાયિત નથી',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -265,7 +273,7 @@ export const gu: LanguageTranslation = {
             show_all: 'બધું બતાવો',
             undo: 'અનડુ',
             redo: 'રીડુ',
-            reorder_diagram: 'ડાયાગ્રામ ફરીથી વ્યવસ્થિત કરો',
+            reorder_diagram: 'ડાયાગ્રામ ઑટોમેટિક ગોઠવો',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -308,7 +316,7 @@ export const gu: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'ડાયાગ્રામ ખોલો',
+            title: 'ડેટાબેસ ખોલો',
             description: 'નીચેની યાદીમાંથી એક ડાયાગ્રામ પસંદ કરો.',
             table_columns: {
                 name: 'નામ',
@@ -318,6 +326,12 @@ export const gu: LanguageTranslation = {
             },
             cancel: 'રદ કરો',
             open: 'ખોલો',
+
+            diagram_actions: {
+                open: 'ખોલો',
+                duplicate: 'ડુપ્લિકેટ',
+                delete: 'કાઢી નાખો',
+            },
         },
 
         export_sql_dialog: {
@@ -467,6 +481,7 @@ export const gu: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'નવું ટેબલ',
+            new_view: 'નવું વ્યૂ',
             new_relationship: 'નવો સંબંધ',
             // TODO: Translate
             new_area: 'New Area',
@@ -488,6 +503,9 @@ export const gu: LanguageTranslation = {
         language_select: {
             change_language: 'ભાષા બદલો',
         },
+
+        on: 'ચાલુ',
+        off: 'બંધ',
     },
 };
 

src/i18n/locales/hi.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const hi: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'नया',
+            browse: 'ब्राउज़',
+            tables: 'टेबल',
+            refs: 'रेफ्स',
+            areas: 'क्षेत्र',
+            dependencies: 'निर्भरताएं',
+            custom_types: 'कस्टम टाइप',
+        },
         menu: {
-            file: {
-                file: 'फ़ाइल',
-                new: 'नया',
-                open: 'खोलें',
+            actions: {
+                actions: 'कार्य',
+                new: 'नया...',
+                browse: 'ब्राउज़ करें...',
                 save: 'सहेजें',
                 import: 'डेटाबेस आयात करें',
                 export_sql: 'SQL निर्यात करें',
                 export_as: 'के रूप में निर्यात करें',
-                delete_diagram: 'आरेख हटाएँ',
-                exit: 'बाहर जाएँ',
+                delete_diagram: 'हटाएँ',
             },
             edit: {
                 edit: 'संपादित करें',
@@ -29,6 +37,7 @@ export const hi: LanguageTranslation = {
                 hide_field_attributes: 'फ़ील्ड विशेषताएँ छिपाएँ',
                 show_field_attributes: 'फ़ील्ड विशेषताएँ दिखाएँ',
                 zoom_on_scroll: 'स्क्रॉल पर ज़ूम',
+                show_views: 'डेटाबेस व्यू',
                 theme: 'थीम',
                 show_dependencies: 'निर्भरता दिखाएँ',
                 hide_dependencies: 'निर्भरता छिपाएँ',
@@ -65,10 +74,10 @@ export const hi: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'आरेख पुनः व्यवस्थित करें',
+            title: 'आरेख स्वचालित व्यवस्थित करें',
             description:
                 'यह क्रिया आरेख में सभी तालिकाओं को पुनः व्यवस्थित कर देगी। क्या आप जारी रखना चाहते हैं?',
-            reorder: 'पुनः व्यवस्थित करें',
+            reorder: 'स्वचालित व्यवस्थित करें',
             cancel: 'रद्द करें',
         },
 
@@ -111,6 +120,7 @@ export const hi: LanguageTranslation = {
             tables_section: {
                 tables: 'तालिकाएँ',
                 add_table: 'तालिका जोड़ें',
+                add_view: 'व्यू जोड़ें',
                 filter: 'फ़िल्टर',
                 collapse: 'सभी को संक्षिप्त करें',
                 // TODO: Translate
@@ -136,6 +146,7 @@ export const hi: LanguageTranslation = {
                     field_actions: {
                         title: 'फ़ील्ड विशेषताएँ',
                         unique: 'अद्वितीय',
+                        auto_increment: 'ऑटो इंक्रीमेंट',
                         comments: 'टिप्पणियाँ',
                         no_comments: 'कोई टिप्पणी नहीं',
                         delete_field: 'फ़ील्ड हटाएँ',
@@ -151,6 +162,7 @@ export const hi: LanguageTranslation = {
                         title: 'सूचकांक विशेषताएँ',
                         name: 'नाम',
                         unique: 'अद्वितीय',
+                        index_type: 'इंडेक्स प्रकार',
                         delete_index: 'सूचकांक हटाएँ',
                     },
                     table_actions: {
@@ -167,12 +179,15 @@ export const hi: LanguageTranslation = {
                     description: 'शुरू करने के लिए एक तालिका बनाएँ',
                 },
             },
-            relationships_section: {
-                relationships: 'संबंध',
+            refs_section: {
+                refs: 'रेफ्स',
                 filter: 'फ़िल्टर',
-                add_relationship: 'संबंध जोड़ें',
                 collapse: 'सभी को संक्षिप्त करें',
+                add_relationship: 'संबंध जोड़ें',
+                relationships: 'संबंध',
+                dependencies: 'निर्भरताएँ',
                 relationship: {
+                    relationship: 'संबंध',
                     primary: 'प्राथमिक तालिका',
                     foreign: 'संदर्भित तालिका',
                     cardinality: 'कार्डिनैलिटी',
@@ -182,28 +197,19 @@ export const hi: LanguageTranslation = {
                         delete_relationship: 'हटाएँ',
                     },
                 },
-                empty_state: {
-                    title: 'कोई संबंध नहीं',
-                    description:
-                        'तालिकाओं को कनेक्ट करने के लिए एक संबंध बनाएँ',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'निर्भरताएँ',
-                filter: 'फ़िल्टर',
-                collapse: 'सिकोड़ें',
                 dependency: {
+                    dependency: 'निर्भरता',
                     table: 'तालिका',
-                    dependent_table: 'आश्रित तालिका',
-                    delete_dependency: 'निर्भरता हटाएँ',
+                    dependent_table: 'आश्रित दृश्य',
+                    delete_dependency: 'हटाएँ',
                     dependency_actions: {
-                        title: 'कार्रवाइयाँ',
-                        delete_dependency: 'निर्भरता हटाएँ',
+                        title: 'क्रियाएँ',
+                        delete_dependency: 'हटाएँ',
                     },
                 },
                 empty_state: {
-                    title: 'कोई निर्भरता नहीं',
-                    description: 'इस अनुभाग में कोई निर्भरता उपलब्ध नहीं है।',
+                    title: 'कोई संबंध नहीं',
+                    description: 'शुरू करने के लिए एक संबंध बनाएँ',
                 },
             },
 
@@ -243,6 +249,7 @@ export const hi: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'कोई enum मान परिभाषित नहीं',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -265,7 +272,7 @@ export const hi: LanguageTranslation = {
             show_all: 'सभी दिखाएँ',
             undo: 'पूर्ववत करें',
             redo: 'पुनः करें',
-            reorder_diagram: 'आरेख पुनः व्यवस्थित करें',
+            reorder_diagram: 'आरेख स्वचालित व्यवस्थित करें',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -311,7 +318,7 @@ export const hi: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'आरेख खोलें',
+            title: 'डेटाबेस खोलें',
             description: 'नीचे दी गई सूची से एक आरेख चुनें।',
             table_columns: {
                 name: 'नाम',
@@ -321,6 +328,12 @@ export const hi: LanguageTranslation = {
             },
             cancel: 'रद्द करें',
             open: 'खोलें',
+
+            diagram_actions: {
+                open: 'खोलें',
+                duplicate: 'डुप्लिकेट',
+                delete: 'हटाएं',
+            },
         },
 
         export_sql_dialog: {
@@ -470,6 +483,7 @@ export const hi: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'नई तालिका',
+            new_view: 'नया व्यू',
             new_relationship: 'नया संबंध',
             // TODO: Translate
             new_area: 'New Area',
@@ -492,6 +506,9 @@ export const hi: LanguageTranslation = {
         language_select: {
             change_language: 'भाषा बदलें',
         },
+
+        on: 'चालू',
+        off: 'बंद',
     },
 };
 

src/i18n/locales/hr.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const hr: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Novi',
+            browse: 'Pregledaj',
+            tables: 'Tablice',
+            refs: 'Refs',
+            areas: 'Područja',
+            dependencies: 'Ovisnosti',
+            custom_types: 'Prilagođeni Tipovi',
+        },
         menu: {
-            file: {
-                file: 'Datoteka',
-                new: 'Nova',
-                open: 'Otvori',
+            actions: {
+                actions: 'Akcije',
+                new: 'Novi...',
+                browse: 'Pregledaj...',
                 save: 'Spremi',
                 import: 'Uvezi',
                 export_sql: 'Izvezi SQL',
                 export_as: 'Izvezi kao',
-                delete_diagram: 'Izbriši dijagram',
-                exit: 'Izađi',
+                delete_diagram: 'Izbriši',
             },
             edit: {
                 edit: 'Uredi',
@@ -29,6 +37,7 @@ export const hr: LanguageTranslation = {
                 hide_field_attributes: 'Sakrij atribute polja',
                 show_field_attributes: 'Prikaži atribute polja',
                 zoom_on_scroll: 'Zumiranje pri skrolanju',
+                show_views: 'Pogledi Baze Podataka',
                 theme: 'Tema',
                 show_dependencies: 'Prikaži ovisnosti',
                 hide_dependencies: 'Sakrij ovisnosti',
@@ -64,10 +73,10 @@ export const hr: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Preuredi dijagram',
+            title: 'Automatski preuredi dijagram',
             description:
                 'Ova radnja će preurediti sve tablice u dijagramu. Želite li nastaviti?',
-            reorder: 'Preuredi',
+            reorder: 'Automatski preuredi',
             cancel: 'Odustani',
         },
 
@@ -109,6 +118,7 @@ export const hr: LanguageTranslation = {
             tables_section: {
                 tables: 'Tablice',
                 add_table: 'Dodaj tablicu',
+                add_view: 'Dodaj Pogled',
                 filter: 'Filtriraj',
                 collapse: 'Sažmi sve',
                 clear: 'Očisti filter',
@@ -133,6 +143,7 @@ export const hr: LanguageTranslation = {
                     field_actions: {
                         title: 'Atributi polja',
                         unique: 'Jedinstven',
+                        auto_increment: 'Automatsko povećavanje',
                         character_length: 'Maksimalna dužina',
                         precision: 'Preciznost',
                         scale: 'Skala',
@@ -146,6 +157,7 @@ export const hr: LanguageTranslation = {
                         title: 'Atributi indeksa',
                         name: 'Naziv',
                         unique: 'Jedinstven',
+                        index_type: 'Vrsta indeksa',
                         delete_index: 'Izbriši indeks',
                     },
                     table_actions: {
@@ -162,12 +174,15 @@ export const hr: LanguageTranslation = {
                     description: 'Stvorite tablicu za početak',
                 },
             },
-            relationships_section: {
-                relationships: 'Veze',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filtriraj',
-                add_relationship: 'Dodaj vezu',
                 collapse: 'Sažmi sve',
+                add_relationship: 'Dodaj vezu',
+                relationships: 'Veze',
+                dependencies: 'Ovisnosti',
                 relationship: {
+                    relationship: 'Veza',
                     primary: 'Primarna tablica',
                     foreign: 'Referentna tablica',
                     cardinality: 'Kardinalnost',
@@ -177,16 +192,8 @@ export const hr: LanguageTranslation = {
                         delete_relationship: 'Izbriši',
                     },
                 },
-                empty_state: {
-                    title: 'Nema veza',
-                    description: 'Stvorite vezu za povezivanje tablica',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Ovisnosti',
-                filter: 'Filtriraj',
-                collapse: 'Sažmi sve',
                 dependency: {
+                    dependency: 'Ovisnost',
                     table: 'Tablica',
                     dependent_table: 'Ovisni pogled',
                     delete_dependency: 'Izbriši',
@@ -196,8 +203,8 @@ export const hr: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Nema ovisnosti',
-                    description: 'Stvorite pogled za početak',
+                    title: 'Nema veze',
+                    description: 'Stvorite vezu za početak',
                 },
             },
 
@@ -238,6 +245,7 @@ export const hr: LanguageTranslation = {
                     enum_values: 'Enum vrijednosti',
                     composite_fields: 'Polja',
                     no_fields: 'Nema definiranih polja',
+                    no_values: 'Nema definiranih enum vrijednosti',
                     field_name_placeholder: 'Naziv polja',
                     field_type_placeholder: 'Odaberi tip',
                     add_field: 'Dodaj polje',
@@ -261,7 +269,7 @@ export const hr: LanguageTranslation = {
             show_all: 'Prikaži sve',
             undo: 'Poništi',
             redo: 'Ponovi',
-            reorder_diagram: 'Preuredi dijagram',
+            reorder_diagram: 'Automatski preuredi dijagram',
             highlight_overlapping_tables: 'Istakni preklapajuće tablice',
             clear_custom_type_highlight: 'Ukloni isticanje za "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -303,7 +311,7 @@ export const hr: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Otvori dijagram',
+            title: 'Otvori bazu podataka',
             description: 'Odaberite dijagram za otvaranje iz popisa ispod.',
             table_columns: {
                 name: 'Naziv',
@@ -313,6 +321,12 @@ export const hr: LanguageTranslation = {
             },
             cancel: 'Odustani',
             open: 'Otvori',
+
+            diagram_actions: {
+                open: 'Otvori',
+                duplicate: 'Dupliciraj',
+                delete: 'Obriši',
+            },
         },
 
         export_sql_dialog: {
@@ -461,6 +475,7 @@ export const hr: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Nova tablica',
+            new_view: 'Novi Pogled',
             new_relationship: 'Nova veza',
             new_area: 'Novo područje',
         },
@@ -481,6 +496,9 @@ export const hr: LanguageTranslation = {
         language_select: {
             change_language: 'Jezik',
         },
+
+        on: 'Uključeno',
+        off: 'Isključeno',
     },
 };
 

src/i18n/locales/id_ID.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const id_ID: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Baru',
+            browse: 'Jelajahi',
+            tables: 'Tabel',
+            refs: 'Refs',
+            areas: 'Area',
+            dependencies: 'Ketergantungan',
+            custom_types: 'Tipe Kustom',
+        },
         menu: {
-            file: {
-                file: 'Berkas',
-                new: 'Buat Baru',
-                open: 'Buka',
+            actions: {
+                actions: 'Aksi',
+                new: 'Baru...',
+                browse: 'Jelajahi...',
                 save: 'Simpan',
                 import: 'Impor Database',
                 export_sql: 'Ekspor SQL',
                 export_as: 'Ekspor Sebagai',
-                delete_diagram: 'Hapus Diagram',
-                exit: 'Keluar',
+                delete_diagram: 'Hapus',
             },
             edit: {
                 edit: 'Ubah',
@@ -29,6 +37,7 @@ export const id_ID: LanguageTranslation = {
                 hide_field_attributes: 'Sembunyikan Atribut Kolom',
                 show_field_attributes: 'Tampilkan Atribut Kolom',
                 zoom_on_scroll: 'Perbesar saat Scroll',
+                show_views: 'Tampilan Database',
                 theme: 'Tema',
                 show_dependencies: 'Tampilkan Dependensi',
                 hide_dependencies: 'Sembunyikan Dependensi',
@@ -65,10 +74,10 @@ export const id_ID: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Atur Ulang Diagram',
+            title: 'Atur Otomatis Diagram',
             description:
                 'Tindakan ini akan mengatur ulang semua tabel di diagram. Apakah Anda ingin melanjutkan?',
-            reorder: 'Atur Ulang',
+            reorder: 'Atur Otomatis',
             cancel: 'Batal',
         },
 
@@ -110,6 +119,7 @@ export const id_ID: LanguageTranslation = {
             tables_section: {
                 tables: 'Tabel',
                 add_table: 'Tambah Tabel',
+                add_view: 'Tambah Tampilan',
                 filter: 'Saring',
                 collapse: 'Lipat Semua',
                 // TODO: Translate
@@ -135,6 +145,7 @@ export const id_ID: LanguageTranslation = {
                     field_actions: {
                         title: 'Atribut Kolom',
                         unique: 'Unik',
+                        auto_increment: 'Kenaikan Otomatis',
                         comments: 'Komentar',
                         no_comments: 'Tidak ada komentar',
                         delete_field: 'Hapus Kolom',
@@ -150,6 +161,7 @@ export const id_ID: LanguageTranslation = {
                         title: 'Atribut Indeks',
                         name: 'Nama',
                         unique: 'Unik',
+                        index_type: 'Tipe Indeks',
                         delete_index: 'Hapus Indeks',
                     },
                     table_actions: {
@@ -166,12 +178,15 @@ export const id_ID: LanguageTranslation = {
                     description: 'Buat tabel untuk memulai',
                 },
             },
-            relationships_section: {
-                relationships: 'Hubungan',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Saring',
-                add_relationship: 'Tambah Hubungan',
                 collapse: 'Lipat Semua',
+                add_relationship: 'Tambah Hubungan',
+                relationships: 'Hubungan',
+                dependencies: 'Dependensi',
                 relationship: {
+                    relationship: 'Hubungan',
                     primary: 'Tabel Primer',
                     foreign: 'Tabel Referensi',
                     cardinality: 'Kardinalitas',
@@ -181,16 +196,8 @@ export const id_ID: LanguageTranslation = {
                         delete_relationship: 'Hapus',
                     },
                 },
-                empty_state: {
-                    title: 'Tidak ada hubungan',
-                    description: 'Buat hubungan untuk menghubungkan tabel',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Dependensi',
-                filter: 'Saring',
-                collapse: 'Lipat Semua',
                 dependency: {
+                    dependency: 'Dependensi',
                     table: 'Tabel',
                     dependent_table: 'Tampilan Dependen',
                     delete_dependency: 'Hapus',
@@ -200,8 +207,8 @@ export const id_ID: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Tidak ada dependensi',
-                    description: 'Buat tampilan untuk memulai',
+                    title: 'Tidak ada hubungan',
+                    description: 'Buat hubungan untuk memulai',
                 },
             },
 
@@ -241,6 +248,7 @@ export const id_ID: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Tidak ada nilai enum yang ditentukan',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -263,7 +271,7 @@ export const id_ID: LanguageTranslation = {
             show_all: 'Tampilkan Semua',
             undo: 'Undo',
             redo: 'Redo',
-            reorder_diagram: 'Atur Ulang Diagram',
+            reorder_diagram: 'Atur Otomatis Diagram',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -307,7 +315,7 @@ export const id_ID: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Buka Diagram',
+            title: 'Buka Database',
             description: 'Pilih diagram untuk dibuka dari daftar di bawah.',
             table_columns: {
                 name: 'Name',
@@ -317,6 +325,12 @@ export const id_ID: LanguageTranslation = {
             },
             cancel: 'Batal',
             open: 'Buka',
+
+            diagram_actions: {
+                open: 'Buka',
+                duplicate: 'Duplikat',
+                delete: 'Hapus',
+            },
         },
 
         export_sql_dialog: {
@@ -466,6 +480,7 @@ export const id_ID: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Tabel Baru',
+            new_view: 'Tampilan Baru',
             new_relationship: 'Hubungan Baru',
             // TODO: Translate
             new_area: 'New Area',
@@ -487,6 +502,9 @@ export const id_ID: LanguageTranslation = {
         language_select: {
             change_language: 'Bahasa',
         },
+
+        on: 'Aktif',
+        off: 'Nonaktif',
     },
 };
 

src/i18n/locales/ja.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const ja: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: '新規',
+            browse: '参照',
+            tables: 'テーブル',
+            refs: '参照',
+            areas: 'エリア',
+            dependencies: '依存関係',
+            custom_types: 'カスタムタイプ',
+        },
         menu: {
-            file: {
-                file: 'ファイル',
-                new: '新規',
-                open: '開く',
+            actions: {
+                actions: 'アクション',
+                new: '新規...',
+                browse: '参照...',
                 save: '保存',
                 import: 'データベースをインポート',
                 export_sql: 'SQLをエクスポート',
                 export_as: '形式を指定してエクスポート',
-                delete_diagram: 'ダイアグラムを削除',
-                exit: '終了',
+                delete_diagram: '削除',
             },
             edit: {
                 edit: '編集',
@@ -29,6 +37,7 @@ export const ja: LanguageTranslation = {
                 hide_field_attributes: 'フィールド属性を非表示',
                 show_field_attributes: 'フィールド属性を表示',
                 zoom_on_scroll: 'スクロールでズーム',
+                show_views: 'データベースビュー',
                 theme: 'テーマ',
                 // TODO: Translate
                 show_dependencies: 'Show Dependencies',
@@ -67,10 +76,10 @@ export const ja: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'ダイアグラムを並べ替え',
+            title: 'ダイアグラムを自動配置',
             description:
                 'この操作によりダイアグラム内のすべてのテーブルが再配置されます。続行しますか？',
-            reorder: '並べ替え',
+            reorder: '自動配置',
             cancel: 'キャンセル',
         },
 
@@ -114,6 +123,7 @@ export const ja: LanguageTranslation = {
             tables_section: {
                 tables: 'テーブル',
                 add_table: 'テーブルを追加',
+                add_view: 'ビューを追加',
                 filter: 'フィルタ',
                 collapse: 'すべて折りたたむ',
                 // TODO: Translate
@@ -139,6 +149,7 @@ export const ja: LanguageTranslation = {
                     field_actions: {
                         title: 'フィールド属性',
                         unique: 'ユニーク',
+                        auto_increment: 'オートインクリメント',
                         comments: 'コメント',
                         no_comments: 'コメントがありません',
                         delete_field: 'フィールドを削除',
@@ -154,6 +165,7 @@ export const ja: LanguageTranslation = {
                         title: 'インデックス属性',
                         name: '名前',
                         unique: 'ユニーク',
+                        index_type: 'インデックスタイプ',
                         delete_index: 'インデックスを削除',
                     },
                     table_actions: {
@@ -170,12 +182,15 @@ export const ja: LanguageTranslation = {
                     description: 'テーブルを作成して開始してください',
                 },
             },
-            relationships_section: {
-                relationships: 'リレーションシップ',
+            refs_section: {
+                refs: '参照',
                 filter: 'フィルタ',
-                add_relationship: 'リレーションシップを追加',
                 collapse: 'すべて折りたたむ',
+                add_relationship: 'リレーションシップを追加',
+                relationships: 'リレーションシップ',
+                dependencies: '依存関係',
                 relationship: {
+                    relationship: 'リレーションシップ',
                     primary: '主テーブル',
                     foreign: '参照テーブル',
                     cardinality: 'カーディナリティ',
@@ -185,29 +200,20 @@ export const ja: LanguageTranslation = {
                         delete_relationship: '削除',
                     },
                 },
-                empty_state: {
-                    title: 'リレーションシップがありません',
-                    description:
-                        'テーブルを接続するためにリレーションシップを作成してください',
-                },
-            },
-            // TODO: Translate
-            dependencies_section: {
-                dependencies: 'Dependencies',
-                filter: 'Filter',
-                collapse: 'Collapse All',
                 dependency: {
-                    table: 'Table',
-                    dependent_table: 'Dependent View',
-                    delete_dependency: 'Delete',
+                    dependency: '依存関係',
+                    table: 'テーブル',
+                    dependent_table: '依存ビュー',
+                    delete_dependency: '削除',
                     dependency_actions: {
-                        title: 'Actions',
-                        delete_dependency: 'Delete',
+                        title: '操作',
+                        delete_dependency: '削除',
                     },
                 },
                 empty_state: {
-                    title: 'No dependencies',
-                    description: 'Create a view to get started',
+                    title: 'リレーションシップがありません',
+                    description:
+                        '開始するためにリレーションシップを作成してください',
                 },
             },
 
@@ -247,6 +253,7 @@ export const ja: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: '列挙値が定義されていません',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -269,7 +276,7 @@ export const ja: LanguageTranslation = {
             show_all: 'すべて表示',
             undo: '元に戻す',
             redo: 'やり直し',
-            reorder_diagram: 'ダイアグラムを並べ替え',
+            reorder_diagram: 'ダイアグラムを自動配置',
             // TODO: Translate
             highlight_overlapping_tables: 'Highlight Overlapping Tables',
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
@@ -313,7 +320,7 @@ export const ja: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'ダイアグラムを開く',
+            title: 'データベースを開く',
             description: '以下のリストからダイアグラムを選択してください。',
             table_columns: {
                 name: '名前',
@@ -323,6 +330,12 @@ export const ja: LanguageTranslation = {
             },
             cancel: 'キャンセル',
             open: '開く',
+
+            diagram_actions: {
+                open: '開く',
+                duplicate: '複製',
+                delete: '削除',
+            },
         },
 
         export_sql_dialog: {
@@ -472,6 +485,7 @@ export const ja: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: '新しいテーブル',
+            new_view: '新しいビュー',
             new_relationship: '新しいリレーションシップ',
             // TODO: Translate
             new_area: 'New Area',
@@ -494,6 +508,9 @@ export const ja: LanguageTranslation = {
         language_select: {
             change_language: '言語',
         },
+
+        on: 'オン',
+        off: 'オフ',
     },
 };
 

src/i18n/locales/ko_KR.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const ko_KR: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: '새로 만들기',
+            browse: '찾아보기',
+            tables: '테이블',
+            refs: 'Refs',
+            areas: '영역',
+            dependencies: '종속성',
+            custom_types: '사용자 지정 타입',
+        },
         menu: {
-            file: {
-                file: '파일',
-                new: '새 다이어그램',
-                open: '열기',
+            actions: {
+                actions: '작업',
+                new: '새로 만들기...',
+                browse: '찾아보기...',
                 save: '저장',
                 import: '데이터베이스 가져오기',
                 export_sql: 'SQL로 저장',
                 export_as: '다른 형식으로 저장',
-                delete_diagram: '다이어그램 삭제',
-                exit: '종료',
+                delete_diagram: '삭제',
             },
             edit: {
                 edit: '편집',
@@ -29,6 +37,7 @@ export const ko_KR: LanguageTranslation = {
                 hide_field_attributes: '필드 속성 숨기기',
                 show_field_attributes: '필드 속성 보이기',
                 zoom_on_scroll: '스크롤 시 확대',
+                show_views: '데이터베이스 뷰',
                 theme: '테마',
                 show_dependencies: '종속성 보이기',
                 hide_dependencies: '종속성 숨기기',
@@ -65,10 +74,10 @@ export const ko_KR: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: '다이어그램 재정렬',
+            title: '다이어그램 자동 정렬',
             description:
                 '이 작업은 모든 다이어그램이 재정렬됩니다. 계속하시겠습니까?',
-            reorder: '재정렬',
+            reorder: '자동 정렬',
             cancel: '취소',
         },
 
@@ -110,6 +119,7 @@ export const ko_KR: LanguageTranslation = {
             tables_section: {
                 tables: '테이블',
                 add_table: '테이블 추가',
+                add_view: '뷰 추가',
                 filter: '필터',
                 collapse: '모두 접기',
                 // TODO: Translate
@@ -135,6 +145,7 @@ export const ko_KR: LanguageTranslation = {
                     field_actions: {
                         title: '필드 속성',
                         unique: '유니크 여부',
+                        auto_increment: '자동 증가',
                         comments: '주석',
                         no_comments: '주석 없음',
                         delete_field: '필드 삭제',
@@ -150,6 +161,7 @@ export const ko_KR: LanguageTranslation = {
                         title: '인덱스 속성',
                         name: '인덱스 명',
                         unique: '유니크 여부',
+                        index_type: '인덱스 타입',
                         delete_index: '인덱스 삭제',
                     },
                     table_actions: {
@@ -166,12 +178,15 @@ export const ko_KR: LanguageTranslation = {
                     description: '테이블을 만들어 시작하세요.',
                 },
             },
-            relationships_section: {
-                relationships: '연관 관계',
+            refs_section: {
+                refs: 'Refs',
                 filter: '필터',
-                add_relationship: '연관 관계 추가',
                 collapse: '모두 접기',
+                add_relationship: '연관 관계 추가',
+                relationships: '연관 관계',
+                dependencies: '종속성',
                 relationship: {
+                    relationship: '연관 관계',
                     primary: '주 테이블',
                     foreign: '참조 테이블',
                     cardinality: '카디널리티',
@@ -181,16 +196,8 @@ export const ko_KR: LanguageTranslation = {
                         delete_relationship: '연관 관계 삭제',
                     },
                 },
-                empty_state: {
-                    title: '연관 관계',
-                    description: '테이블 연결을 위해 연관 관계를 생성하세요',
-                },
-            },
-            dependencies_section: {
-                dependencies: '종속성',
-                filter: '필터',
-                collapse: '모두 접기',
                 dependency: {
+                    dependency: '종속성',
                     table: '테이블',
                     dependent_table: '뷰 테이블',
                     delete_dependency: '삭제',
@@ -200,8 +207,8 @@ export const ko_KR: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: '뷰 테이블 없음',
-                    description: '뷰 테이블을 만들어 시작하세요.',
+                    title: '연관 관계 없음',
+                    description: '연관 관계를 만들어 시작하세요.',
                 },
             },
 
@@ -241,6 +248,7 @@ export const ko_KR: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: '정의된 열거형 값이 없습니다',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -263,7 +271,7 @@ export const ko_KR: LanguageTranslation = {
             show_all: '전체 저장',
             undo: '실행 취소',
             redo: '다시 실행',
-            reorder_diagram: '다이어그램 재정렬',
+            reorder_diagram: '다이어그램 자동 정렬',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -307,7 +315,7 @@ export const ko_KR: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: '다이어그램 열기',
+            title: '데이터베이스 열기',
             description: '아래의 목록에서 다이어그램을 선택하세요.',
             table_columns: {
                 name: '이름',
@@ -317,6 +325,12 @@ export const ko_KR: LanguageTranslation = {
             },
             cancel: '취소',
             open: '열기',
+
+            diagram_actions: {
+                open: '열기',
+                duplicate: '복제',
+                delete: '삭제',
+            },
         },
 
         export_sql_dialog: {
@@ -463,6 +477,7 @@ export const ko_KR: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: '새 테이블',
+            new_view: '새 뷰',
             new_relationship: '새 연관관계',
             // TODO: Translate
             new_area: 'New Area',
@@ -484,6 +499,9 @@ export const ko_KR: LanguageTranslation = {
         language_select: {
             change_language: '언어',
         },
+
+        on: '켜기',
+        off: '끄기',
     },
 };
 

src/i18n/locales/mr.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const mr: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'नवीन',
+            browse: 'ब्राउज',
+            tables: 'टेबल',
+            refs: 'Refs',
+            areas: 'क्षेत्रे',
+            dependencies: 'अवलंबने',
+            custom_types: 'कस्टम प्रकार',
+        },
         menu: {
-            file: {
-                file: 'फाइल',
-                new: 'नवीन',
-                open: 'उघडा',
+            actions: {
+                actions: 'क्रिया',
+                new: 'नवीन...',
+                browse: 'ब्राउज करा...',
                 save: 'जतन करा',
                 import: 'डेटाबेस इम्पोर्ट करा',
                 export_sql: 'SQL एक्स्पोर्ट करा',
                 export_as: 'म्हणून एक्स्पोर्ट करा',
-                delete_diagram: 'आरेख हटवा',
-                exit: 'बाहेर पडा',
+                delete_diagram: 'हटवा',
             },
             edit: {
                 edit: 'संपादन करा',
@@ -29,6 +37,7 @@ export const mr: LanguageTranslation = {
                 hide_field_attributes: 'फील्ड गुणधर्म लपवा',
                 show_field_attributes: 'फील्ड गुणधर्म दाखवा',
                 zoom_on_scroll: 'स्क्रोलवर झूम करा',
+                show_views: 'डेटाबेस व्ह्यूज',
                 theme: 'थीम',
                 show_dependencies: 'डिपेंडेन्सि दाखवा',
                 hide_dependencies: 'डिपेंडेन्सि लपवा',
@@ -66,10 +75,10 @@ export const mr: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'आरेख पुनःक्रमित करा',
+            title: 'आरेख स्वयंचलित व्यवस्थित करा',
             description:
                 'ही क्रिया आरेखातील सर्व टेबल्सची पुनर्रचना करेल. तुम्हाला पुढे जायचे आहे का?',
-            reorder: 'पुनःक्रमित करा',
+            reorder: 'स्वयंचलित व्यवस्थित करा',
             cancel: 'रद्द करा',
         },
 
@@ -113,6 +122,7 @@ export const mr: LanguageTranslation = {
             tables_section: {
                 tables: 'टेबल्स',
                 add_table: 'टेबल जोडा',
+                add_view: 'व्ह्यू जोडा',
                 filter: 'फिल्टर',
                 collapse: 'सर्व संकुचित करा',
                 // TODO: Translate
@@ -138,6 +148,7 @@ export const mr: LanguageTranslation = {
                     field_actions: {
                         title: 'फील्ड गुणधर्म',
                         unique: 'युनिक',
+                        auto_increment: 'ऑटो इंक्रिमेंट',
                         comments: 'टिप्पण्या',
                         no_comments: 'कोणत्याही टिप्पणी नाहीत',
                         delete_field: 'फील्ड हटवा',
@@ -153,6 +164,7 @@ export const mr: LanguageTranslation = {
                         title: 'इंडेक्स गुणधर्म',
                         name: 'नाव',
                         unique: 'युनिक',
+                        index_type: 'इंडेक्स प्रकार',
                         delete_index: 'इंडेक्स हटवा',
                     },
                     table_actions: {
@@ -170,12 +182,15 @@ export const mr: LanguageTranslation = {
                     description: 'सुरू करण्यासाठी एक टेबल तयार करा',
                 },
             },
-            relationships_section: {
-                relationships: 'रिलेशनशिप',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'फिल्टर',
-                add_relationship: 'रिलेशनशिप जोडा',
                 collapse: 'सर्व संकुचित करा',
+                add_relationship: 'रिलेशनशिप जोडा',
+                relationships: 'रिलेशनशिप',
+                dependencies: 'डिपेंडेन्सि',
                 relationship: {
+                    relationship: 'रिलेशनशिप',
                     primary: 'प्राथमिक टेबल',
                     foreign: 'रेफरंस टेबल',
                     cardinality: 'कार्डिनॅलिटी',
@@ -185,17 +200,8 @@ export const mr: LanguageTranslation = {
                         delete_relationship: 'हटवा',
                     },
                 },
-                empty_state: {
-                    title: 'कोणतेही रिलेशनशिप नाहीत',
-                    description:
-                        'टेबल्स कनेक्ट करण्यासाठी एक रिलेशनशिप तयार करा',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'डिपेंडेन्सि',
-                filter: 'फिल्टर',
-                collapse: 'सर्व संकुचित करा',
                 dependency: {
+                    dependency: 'डिपेंडेन्सि',
                     table: 'टेबल',
                     dependent_table: 'डिपेंडेन्सि दृश्य',
                     delete_dependency: 'हटवा',
@@ -205,8 +211,8 @@ export const mr: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'कोणत्याही डिपेंडेन्सि नाहीत',
-                    description: 'सुरू करण्यासाठी एक दृश्य तयार करा',
+                    title: 'कोणतेही रिलेशनशिप नाहीत',
+                    description: 'सुरू करण्यासाठी एक रिलेशनशिप तयार करा',
                 },
             },
 
@@ -246,6 +252,7 @@ export const mr: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'कोणतीही enum मूल्ये परिभाषित नाहीत',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -268,7 +275,7 @@ export const mr: LanguageTranslation = {
             show_all: 'सर्व दाखवा',
             undo: 'पूर्ववत करा',
             redo: 'पुन्हा करा',
-            reorder_diagram: 'आरेख पुनःक्रमित करा',
+            reorder_diagram: 'आरेख स्वयंचलित व्यवस्थित करा',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -314,7 +321,7 @@ export const mr: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'आरेख उघडा',
+            title: 'डेटाबेस उघडा',
             description: 'खालील यादीतून उघडण्यासाठी एक आरेख निवडा.',
             table_columns: {
                 name: 'नाव',
@@ -324,6 +331,12 @@ export const mr: LanguageTranslation = {
             },
             cancel: 'रद्द करा',
             open: 'उघडा',
+
+            diagram_actions: {
+                open: 'उघडा',
+                duplicate: 'डुप्लिकेट',
+                delete: 'हटवा',
+            },
         },
 
         export_sql_dialog: {
@@ -476,6 +489,7 @@ export const mr: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'नवीन टेबल',
+            new_view: 'नवीन व्ह्यू',
             new_relationship: 'नवीन रिलेशनशिप',
             // TODO: Translate
             new_area: 'New Area',
@@ -499,6 +513,9 @@ export const mr: LanguageTranslation = {
         language_select: {
             change_language: 'भाषा बदला',
         },
+
+        on: 'चालू',
+        off: 'बंद',
     },
 };
 

src/i18n/locales/ne.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const ne: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'नयाँ',
+            browse: 'ब्राउज',
+            tables: 'टेबलहरू',
+            refs: 'Refs',
+            areas: 'क्षेत्रहरू',
+            dependencies: 'निर्भरताहरू',
+            custom_types: 'कस्टम प्रकारहरू',
+        },
         menu: {
-            file: {
-                file: 'फाइल',
-                new: 'नयाँ',
-                open: 'खोल्नुहोस्',
+            actions: {
+                actions: 'कार्यहरू',
+                new: 'नयाँ...',
+                browse: 'ब्राउज गर्नुहोस्...',
                 save: 'सुरक्षित गर्नुहोस्',
                 import: 'डाटाबेस आयात गर्नुहोस्',
                 export_sql: 'SQL निर्यात गर्नुहोस्',
                 export_as: 'निर्यात गर्नुहोस्',
-                delete_diagram: 'डायाग्राम हटाउनुहोस्',
-                exit: 'बाहिर निस्कनुहोस्',
+                delete_diagram: 'हटाउनुहोस्',
             },
             edit: {
                 edit: 'सम्पादन',
@@ -29,6 +37,7 @@ export const ne: LanguageTranslation = {
                 hide_field_attributes: 'फिल्ड विशेषताहरू लुकाउनुहोस्',
                 show_field_attributes: 'फिल्ड विशेषताहरू देखाउनुहोस्',
                 zoom_on_scroll: 'स्क्रोलमा जुम गर्नुहोस्',
+                show_views: 'डाटाबेस भ्यूहरू',
                 theme: 'थिम',
                 show_dependencies: 'डिपेन्डेन्सीहरू देखाउनुहोस्',
                 hide_dependencies: 'डिपेन्डेन्सीहरू लुकाउनुहोस्',
@@ -66,10 +75,10 @@ export const ne: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'डायाग्राम पुनः क्रमबद्ध गर्नुहोस्',
+            title: 'डायाग्राम स्वचालित मिलाउनुहोस्',
             description:
                 'यो कार्य पूर्ववत गर्न सकिँदैन। यो डायाग्राम स्थायी रूपमा हटाउनेछ।',
-            reorder: 'पुनः क्रमबद्ध गर्नुहोस्',
+            reorder: 'स्वचालित मिलाउनुहोस्',
             cancel: 'रद्द गर्नुहोस्',
         },
 
@@ -111,6 +120,7 @@ export const ne: LanguageTranslation = {
             tables_section: {
                 tables: 'तालिकाहरू',
                 add_table: 'तालिका थप्नुहोस्',
+                add_view: 'भ्यू थप्नुहोस्',
                 filter: 'फिल्टर',
                 collapse: 'सबै लुकाउनुहोस्',
                 // TODO: Translate
@@ -136,6 +146,7 @@ export const ne: LanguageTranslation = {
                     field_actions: {
                         title: 'क्षेत्र विशेषताहरू',
                         unique: 'अनन्य',
+                        auto_increment: 'स्वचालित वृद्धि',
                         comments: 'टिप्पणीहरू',
                         no_comments: 'कुनै टिप्पणीहरू छैनन्',
                         delete_field: 'क्षेत्र हटाउनुहोस्',
@@ -151,6 +162,7 @@ export const ne: LanguageTranslation = {
                         title: 'सूचक विशेषताहरू',
                         name: 'नाम',
                         unique: 'अनन्य',
+                        index_type: 'इन्डेक्स प्रकार',
                         delete_index: 'सूचक हटाउनुहोस्',
                     },
                     table_actions: {
@@ -167,12 +179,15 @@ export const ne: LanguageTranslation = {
                     description: 'सुरु गर्नका लागि एक तालिका बनाउनुहोस्',
                 },
             },
-            relationships_section: {
-                relationships: 'सम्बन्धहरू',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'फिल्टर',
-                add_relationship: 'सम्बन्ध थप्नुहोस्',
                 collapse: 'सबै लुकाउनुहोस्',
+                add_relationship: 'सम्बन्ध थप्नुहोस्',
+                relationships: 'सम्बन्धहरू',
+                dependencies: 'डिपेन्डेन्सीहरू',
                 relationship: {
+                    relationship: 'सम्बन्ध',
                     primary: 'मुख्य तालिका',
                     foreign: 'परिचित तालिका',
                     cardinality: 'कार्डिन्यालिटी',
@@ -182,16 +197,8 @@ export const ne: LanguageTranslation = {
                         delete_relationship: 'हटाउनुहोस्',
                     },
                 },
-                empty_state: {
-                    title: 'कुनै सम्बन्धहरू छैनन्',
-                    description: 'तालिकाहरू जोड्नका लागि एक सम्बन्ध बनाउनुहोस्',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'डिपेन्डेन्सीहरू',
-                filter: 'फिल्टर',
-                collapse: 'सबै लुकाउनुहोस्',
                 dependency: {
+                    dependency: 'डिपेन्डेन्सी',
                     table: 'तालिका',
                     dependent_table: 'विचलित तालिका',
                     delete_dependency: 'हटाउनुहोस्',
@@ -201,9 +208,8 @@ export const ne: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'कुनै डिपेन्डेन्सीहरू छैनन्',
-                    description:
-                        'डिपेन्डेन्सीहरू देखाउनका लागि एक व्यू बनाउनुहोस्',
+                    title: 'कुनै सम्बन्धहरू छैनन्',
+                    description: 'सुरु गर्नका लागि एक सम्बन्ध बनाउनुहोस्',
                 },
             },
 
@@ -243,6 +249,7 @@ export const ne: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'कुनै enum मानहरू परिभाषित छैनन्',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -265,7 +272,7 @@ export const ne: LanguageTranslation = {
             show_all: 'सबै देखाउनुहोस्',
             undo: 'पूर्ववत',
             redo: 'पुनः गर्नुहोस्',
-            reorder_diagram: 'पुनः क्रमबद्ध गर्नुहोस्',
+            reorder_diagram: 'डायाग्राम स्वचालित मिलाउनुहोस्',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -310,7 +317,7 @@ export const ne: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'डायाग्राम खोल्नुहोस्',
+            title: 'डाटाबेस खोल्नुहोस्',
             description:
                 'तलको सूचीबाट खोल्नका लागि एक डायाग्राम चयन गर्नुहोस्।',
             table_columns: {
@@ -321,6 +328,12 @@ export const ne: LanguageTranslation = {
             },
             cancel: 'रद्द गर्नुहोस्',
             open: 'खोल्नुहोस्',
+
+            diagram_actions: {
+                open: 'खोल्नुहोस्',
+                duplicate: 'डुप्लिकेट',
+                delete: 'मेटाउनुहोस्',
+            },
         },
 
         export_sql_dialog: {
@@ -470,6 +483,7 @@ export const ne: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'नयाँ तालिका',
+            new_view: 'नयाँ भ्यू',
             new_relationship: 'नयाँ सम्बन्ध',
             // TODO: Translate
             new_area: 'New Area',
@@ -491,6 +505,9 @@ export const ne: LanguageTranslation = {
         language_select: {
             change_language: 'भाषा परिवर्तन गर्नुहोस्',
         },
+
+        on: 'सक्रिय',
+        off: 'निष्क्रिय',
     },
 };
 

src/i18n/locales/pt_BR.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const pt_BR: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Novo',
+            browse: 'Navegar',
+            tables: 'Tabelas',
+            refs: 'Refs',
+            areas: 'Áreas',
+            dependencies: 'Dependências',
+            custom_types: 'Tipos Personalizados',
+        },
         menu: {
-            file: {
-                file: 'Arquivo',
-                new: 'Novo',
-                open: 'Abrir',
+            actions: {
+                actions: 'Ações',
+                new: 'Novo...',
+                browse: 'Navegar...',
                 save: 'Salvar',
                 import: 'Importar Banco de Dados',
                 export_sql: 'Exportar SQL',
                 export_as: 'Exportar como',
-                delete_diagram: 'Excluir Diagrama',
-                exit: 'Sair',
+                delete_diagram: 'Excluir',
             },
             edit: {
                 edit: 'Editar',
@@ -29,6 +37,7 @@ export const pt_BR: LanguageTranslation = {
                 hide_field_attributes: 'Ocultar Atributos de Campo',
                 show_field_attributes: 'Mostrar Atributos de Campo',
                 zoom_on_scroll: 'Zoom ao Rolar',
+                show_views: 'Visualizações do Banco de Dados',
                 theme: 'Tema',
                 show_dependencies: 'Mostrar Dependências',
                 hide_dependencies: 'Ocultar Dependências',
@@ -66,10 +75,10 @@ export const pt_BR: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Reordenar Diagrama',
+            title: 'Organizar Diagrama Automaticamente',
             description:
                 'Esta ação reorganizará todas as tabelas no diagrama. Deseja continuar?',
-            reorder: 'Reordenar',
+            reorder: 'Organizar Automaticamente',
             cancel: 'Cancelar',
         },
 
@@ -111,6 +120,7 @@ export const pt_BR: LanguageTranslation = {
             tables_section: {
                 tables: 'Tabelas',
                 add_table: 'Adicionar Tabela',
+                add_view: 'Adicionar Visualização',
                 filter: 'Filtrar',
                 collapse: 'Colapsar Todas',
                 // TODO: Translate
@@ -136,6 +146,7 @@ export const pt_BR: LanguageTranslation = {
                     field_actions: {
                         title: 'Atributos do Campo',
                         unique: 'Único',
+                        auto_increment: 'Incremento Automático',
                         comments: 'Comentários',
                         no_comments: 'Sem comentários',
                         delete_field: 'Excluir Campo',
@@ -151,6 +162,7 @@ export const pt_BR: LanguageTranslation = {
                         title: 'Atributos do Índice',
                         name: 'Nome',
                         unique: 'Único',
+                        index_type: 'Tipo de Índice',
                         delete_index: 'Excluir Índice',
                     },
                     table_actions: {
@@ -167,12 +179,15 @@ export const pt_BR: LanguageTranslation = {
                     description: 'Crie uma tabela para começar',
                 },
             },
-            relationships_section: {
-                relationships: 'Relacionamentos',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filtrar',
-                add_relationship: 'Adicionar Relacionamento',
                 collapse: 'Colapsar Todas',
+                add_relationship: 'Adicionar Relacionamento',
+                relationships: 'Relacionamentos',
+                dependencies: 'Dependências',
                 relationship: {
+                    relationship: 'Relacionamento',
                     primary: 'Tabela Primária',
                     foreign: 'Tabela Referenciada',
                     cardinality: 'Cardinalidade',
@@ -182,16 +197,8 @@ export const pt_BR: LanguageTranslation = {
                         delete_relationship: 'Excluir',
                     },
                 },
-                empty_state: {
-                    title: 'Sem relacionamentos',
-                    description: 'Crie um relacionamento para conectar tabelas',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Dependências',
-                filter: 'Filtrar',
-                collapse: 'Colapsar Todas',
                 dependency: {
+                    dependency: 'Dependência',
                     table: 'Tabela',
                     dependent_table: 'Visualização Dependente',
                     delete_dependency: 'Excluir',
@@ -201,8 +208,8 @@ export const pt_BR: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Sem dependências',
-                    description: 'Crie uma visualização para começar',
+                    title: 'Sem relacionamentos',
+                    description: 'Crie um relacionamento para começar',
                 },
             },
 
@@ -242,6 +249,7 @@ export const pt_BR: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Nenhum valor de enum definido',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -264,7 +272,7 @@ export const pt_BR: LanguageTranslation = {
             show_all: 'Mostrar Tudo',
             undo: 'Desfazer',
             redo: 'Refazer',
-            reorder_diagram: 'Reordenar Diagrama',
+            reorder_diagram: 'Organizar Diagrama Automaticamente',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -309,7 +317,7 @@ export const pt_BR: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Abrir Diagrama',
+            title: 'Abrir Banco de Dados',
             description: 'Selecione um diagrama para abrir da lista abaixo.',
             table_columns: {
                 name: 'Nome',
@@ -319,6 +327,12 @@ export const pt_BR: LanguageTranslation = {
             },
             cancel: 'Cancelar',
             open: 'Abrir',
+
+            diagram_actions: {
+                open: 'Abrir',
+                duplicate: 'Duplicar',
+                delete: 'Excluir',
+            },
         },
 
         export_sql_dialog: {
@@ -468,6 +482,7 @@ export const pt_BR: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Nova Tabela',
+            new_view: 'Nova Visualização',
             new_relationship: 'Novo Relacionamento',
             // TODO: Translate
             new_area: 'New Area',
@@ -490,6 +505,9 @@ export const pt_BR: LanguageTranslation = {
         language_select: {
             change_language: 'Idioma',
         },
+
+        on: 'Ligado',
+        off: 'Desligado',
     },
 };
 

src/i18n/locales/ru.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const ru: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Новая',
+            browse: 'Обзор',
+            tables: 'Таблицы',
+            refs: 'Ссылки',
+            areas: 'Области',
+            dependencies: 'Зависимости',
+            custom_types: 'Пользовательские типы',
+        },
         menu: {
-            file: {
-                file: 'Файл',
-                new: 'Создать',
-                open: 'Открыть',
+            actions: {
+                actions: 'Действия',
+                new: 'Новая...',
+                browse: 'Обзор...',
                 save: 'Сохранить',
                 import: 'Импортировать базу данных',
                 export_sql: 'Экспорт SQL',
                 export_as: 'Экспортировать как',
-                delete_diagram: 'Удалить диаграмму',
-                exit: 'Выход',
+                delete_diagram: 'Удалить',
             },
             edit: {
                 edit: 'Изменение',
@@ -29,6 +37,7 @@ export const ru: LanguageTranslation = {
                 show_field_attributes: 'Показать атрибуты поля',
                 hide_field_attributes: 'Скрыть атрибуты поля',
                 zoom_on_scroll: 'Увеличение при прокрутке',
+                show_views: 'Представления базы данных',
                 theme: 'Тема',
                 show_dependencies: 'Показать зависимости',
                 hide_dependencies: 'Скрыть зависимости',
@@ -64,10 +73,10 @@ export const ru: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Переупорядочить диаграмму',
+            title: 'Автоматическая расстановка диаграммы',
             description:
                 'Это действие переставит все таблицы на диаграмме. Хотите продолжить?',
-            reorder: 'Изменить порядок',
+            reorder: 'Автоматическая расстановка',
             cancel: 'Отменить',
         },
 
@@ -108,6 +117,7 @@ export const ru: LanguageTranslation = {
             tables_section: {
                 tables: 'Таблицы',
                 add_table: 'Добавить таблицу',
+                add_view: 'Добавить представление',
                 filter: 'Фильтр',
                 collapse: 'Свернуть все',
                 clear: 'Очистить фильтр',
@@ -133,6 +143,7 @@ export const ru: LanguageTranslation = {
                     field_actions: {
                         title: 'Атрибуты поля',
                         unique: 'Уникальный',
+                        auto_increment: 'Автоинкремент',
                         comments: 'Комментарии',
                         no_comments: 'Нет комментария',
                         delete_field: 'Удалить поле',
@@ -147,6 +158,7 @@ export const ru: LanguageTranslation = {
                         title: 'Атрибуты индекса',
                         name: 'Имя',
                         unique: 'Уникальный',
+                        index_type: 'Тип индекса',
                         delete_index: 'Удалить индекс',
                     },
                     table_actions: {
@@ -163,12 +175,15 @@ export const ru: LanguageTranslation = {
                     description: 'Создайте таблицу, чтобы начать',
                 },
             },
-            relationships_section: {
-                relationships: 'Отношения',
+            refs_section: {
+                refs: 'Ссылки',
                 filter: 'Фильтр',
-                add_relationship: 'Добавить отношение',
                 collapse: 'Свернуть все',
+                add_relationship: 'Добавить отношение',
+                relationships: 'Отношения',
+                dependencies: 'Зависимости',
                 relationship: {
+                    relationship: 'Отношение',
                     primary: 'Основная таблица',
                     foreign: 'Справочная таблица',
                     cardinality: 'Тип множественной связи',
@@ -178,18 +193,10 @@ export const ru: LanguageTranslation = {
                         delete_relationship: 'Удалить',
                     },
                 },
-                empty_state: {
-                    title: 'Нет отношений',
-                    description: 'Создайте связь для соединения таблиц',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Зависимости',
-                filter: 'Фильтр',
-                collapse: 'Свернуть все',
                 dependency: {
-                    table: 'Стол',
-                    dependent_table: 'Зависимый вид',
+                    dependency: 'Зависимость',
+                    table: 'Таблица',
+                    dependent_table: 'Зависимое представление',
                     delete_dependency: 'Удалить',
                     dependency_actions: {
                         title: 'Действия',
@@ -197,8 +204,8 @@ export const ru: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Нет зависимостей',
-                    description: 'Создайте представление, чтобы начать',
+                    title: 'Нет отношений',
+                    description: 'Создайте отношение, чтобы начать',
                 },
             },
 
@@ -239,6 +246,7 @@ export const ru: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Значения перечисления не определены',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -261,7 +269,7 @@ export const ru: LanguageTranslation = {
             show_all: 'Показать все',
             undo: 'Отменить',
             redo: 'Вернуть',
-            reorder_diagram: 'Переупорядочить диаграмму',
+            reorder_diagram: 'Автоматическая расстановка диаграммы',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -305,7 +313,7 @@ export const ru: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Открыть диаграмму',
+            title: 'Открыть базу данных',
             description:
                 'Выберите диаграмму, которую нужно открыть, из списка ниже.',
             table_columns: {
@@ -316,6 +324,12 @@ export const ru: LanguageTranslation = {
             },
             cancel: 'Отмена',
             open: 'Открыть',
+
+            diagram_actions: {
+                open: 'Открыть',
+                duplicate: 'Дублировать',
+                delete: 'Удалить',
+            },
         },
 
         export_sql_dialog: {
@@ -464,6 +478,7 @@ export const ru: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Создать таблицу',
+            new_view: 'Новое представление',
             new_relationship: 'Создать отношение',
             new_area: 'Новая область',
         },
@@ -485,6 +500,9 @@ export const ru: LanguageTranslation = {
         language_select: {
             change_language: 'Сменить язык',
         },
+
+        on: 'Вкл',
+        off: 'Выкл',
     },
 };
 

src/i18n/locales/te.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const te: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'కొత్తది',
+            browse: 'బ్రాఉజ్',
+            tables: 'టేబల్లు',
+            refs: 'సంబంధాలు',
+            areas: 'ప్రదేశాలు',
+            dependencies: 'ఆధారతలు',
+            custom_types: 'కస్టమ్ టైప్స్',
+        },
         menu: {
-            file: {
-                file: 'ఫైల్',
-                new: 'కొత్తది',
-                open: 'తెరవు',
+            actions: {
+                actions: 'చర్యలు',
+                new: 'కొత్తది...',
+                browse: 'బ్రాఉజ్ చేయండి...',
                 save: 'సేవ్',
                 import: 'డేటాబేస్‌ను దిగుమతి చేసుకోండి',
                 export_sql: 'SQL ఎగుమతి',
                 export_as: 'వగా ఎగుమతి చేయండి',
-                delete_diagram: 'చిత్రాన్ని తొలగించండి',
-                exit: 'నిష్క్రమించు',
+                delete_diagram: 'తొలగించండి',
             },
             edit: {
                 edit: 'సవరించు',
@@ -29,6 +37,7 @@ export const te: LanguageTranslation = {
                 show_field_attributes: 'ఫీల్డ్ గుణాలను చూపించు',
                 hide_field_attributes: 'ఫీల్డ్ గుణాలను దాచండి',
                 zoom_on_scroll: 'స్క్రోల్‌పై జూమ్',
+                show_views: 'డేటాబేస్ వ్యూలు',
                 theme: 'థీమ్',
                 show_dependencies: 'ఆధారాలు చూపించండి',
                 hide_dependencies: 'ఆధారాలను దాచండి',
@@ -66,10 +75,10 @@ export const te: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'చిత్రాన్ని పునఃసరిచేయండి',
+            title: 'చిత్రాన్ని స్వయంచాలకంగా అమర్చండి',
             description:
                 'ఈ చర్య చిత్రంలోని అన్ని పట్టికలను పునఃస్థాపిస్తుంది. మీరు కొనసాగించాలనుకుంటున్నారా?',
-            reorder: 'పునఃసరిచేయండి',
+            reorder: 'స్వయంచాలకంగా అమర్చండి',
             cancel: 'రద్దు',
         },
 
@@ -111,6 +120,7 @@ export const te: LanguageTranslation = {
             tables_section: {
                 tables: 'పట్టికలు',
                 add_table: 'పట్టికను జోడించు',
+                add_view: 'వ్యూ జోడించండి',
                 filter: 'ఫిల్టర్',
                 collapse: 'అన్ని కూల్ చేయి',
                 // TODO: Translate
@@ -136,6 +146,7 @@ export const te: LanguageTranslation = {
                     field_actions: {
                         title: 'ఫీల్డ్ గుణాలు',
                         unique: 'అద్వితీయ',
+                        auto_increment: 'ఆటో ఇంక్రిమెంట్',
                         comments: 'వ్యాఖ్యలు',
                         no_comments: 'వ్యాఖ్యలు లేవు',
                         delete_field: 'ఫీల్డ్ తొలగించు',
@@ -151,6 +162,7 @@ export const te: LanguageTranslation = {
                         title: 'ఇండెక్స్ గుణాలు',
                         name: 'పేరు',
                         unique: 'అద్వితీయ',
+                        index_type: 'ఇండెక్స్ రకం',
                         delete_index: 'ఇండెక్స్ తొలగించు',
                     },
                     table_actions: {
@@ -168,12 +180,15 @@ export const te: LanguageTranslation = {
                     description: 'ప్రారంభించడానికి ఒక పట్టిక సృష్టించండి',
                 },
             },
-            relationships_section: {
-                relationships: 'సంబంధాలు',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'ఫిల్టర్',
-                add_relationship: 'సంబంధం జోడించు',
                 collapse: 'అన్ని కూల్ చేయి',
+                add_relationship: 'సంబంధం జోడించు',
+                relationships: 'సంబంధాలు',
+                dependencies: 'ఆధారాలు',
                 relationship: {
+                    relationship: 'సంబంధం',
                     primary: 'ప్రాథమిక పట్టిక',
                     foreign: 'సూచించబడిన పట్టిక',
                     cardinality: 'కార్డినాలిటీ',
@@ -183,16 +198,8 @@ export const te: LanguageTranslation = {
                         delete_relationship: 'సంబంధం తొలగించు',
                     },
                 },
-                empty_state: {
-                    title: 'సంబంధాలు లేవు',
-                    description: 'పట్టికలను అనుసంధించడానికి సంబంధం సృష్టించండి',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'ఆధారాలు',
-                filter: 'ఫిల్టర్',
-                collapse: 'అన్ని కూల్ చేయి',
                 dependency: {
+                    dependency: 'ఆధారం',
                     table: 'పట్టిక',
                     dependent_table: 'ఆధారిత వీక్షణ',
                     delete_dependency: 'ఆధారాన్ని తొలగించు',
@@ -202,8 +209,8 @@ export const te: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'ఆధారాలు లేవు',
-                    description: 'ప్రారంభించడానికి ఒక వీక్షణ సృష్టించండి',
+                    title: 'సంబంధాలు లేవు',
+                    description: 'ప్రారంభించడానికి ఒక సంబంధం సృష్టించండి',
                 },
             },
 
@@ -243,6 +250,7 @@ export const te: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'ఏ enum విలువలు నిర్వచించబడలేదు',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -265,7 +273,7 @@ export const te: LanguageTranslation = {
             show_all: 'అన్ని చూపించు',
             undo: 'తిరిగి చేయు',
             redo: 'మరలా చేయు',
-            reorder_diagram: 'చిత్రాన్ని పునఃసరిచేయండి',
+            reorder_diagram: 'చిత్రాన్ని స్వయంచాలకంగా అమర్చండి',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -310,7 +318,7 @@ export const te: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'చిత్రం తెరవండి',
+            title: 'డేటాబేస్ తెరవండి',
             description: 'కింద ఉన్న జాబితా నుండి చిత్రాన్ని ఎంచుకోండి.',
             table_columns: {
                 name: 'పేరు',
@@ -320,6 +328,12 @@ export const te: LanguageTranslation = {
             },
             cancel: 'రద్దు',
             open: 'తెరవు',
+
+            diagram_actions: {
+                open: 'తెరవు',
+                duplicate: 'నకలు',
+                delete: 'తొలగించు',
+            },
         },
 
         export_sql_dialog: {
@@ -472,6 +486,7 @@ export const te: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'కొత్త పట్టిక',
+            new_view: 'కొత్త వ్యూ',
             new_relationship: 'కొత్త సంబంధం',
             // TODO: Translate
             new_area: 'New Area',
@@ -495,6 +510,9 @@ export const te: LanguageTranslation = {
         language_select: {
             change_language: 'భాష మార్చు',
         },
+
+        on: 'ఆన్',
+        off: 'ఆఫ్',
     },
 };
 

src/i18n/locales/tr.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const tr: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Yeni',
+            browse: 'Gözat',
+            tables: 'Tablolar',
+            refs: 'Refs',
+            areas: 'Alanlar',
+            dependencies: 'Bağımlılıklar',
+            custom_types: 'Özel Tipler',
+        },
         menu: {
-            file: {
-                file: 'Dosya',
-                new: 'Yeni',
-                open: 'Aç',
+            actions: {
+                actions: 'Eylemler',
+                new: 'Yeni...',
+                browse: 'Gözat...',
                 save: 'Kaydet',
                 import: 'Veritabanı İçe Aktar',
                 export_sql: 'SQL Olarak Dışa Aktar',
                 export_as: 'Olarak Dışa Aktar',
-                delete_diagram: 'Diyagramı Sil',
-                exit: 'Çıkış',
+                delete_diagram: 'Sil',
             },
             edit: {
                 edit: 'Düzenle',
@@ -29,6 +37,7 @@ export const tr: LanguageTranslation = {
                 show_field_attributes: 'Alan Özelliklerini Göster',
                 hide_field_attributes: 'Alan Özelliklerini Gizle',
                 zoom_on_scroll: 'Kaydırarak Yakınlaştır',
+                show_views: 'Veritabanı Görünümleri',
                 theme: 'Tema',
                 show_dependencies: 'Bağımlılıkları Göster',
                 hide_dependencies: 'Bağımlılıkları Gizle',
@@ -66,10 +75,10 @@ export const tr: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Diyagramı Yeniden Sırala',
+            title: 'Diyagramı Otomatik Düzenle',
             description:
                 'Bu işlem tüm tabloları yeniden düzenleyecektir. Devam etmek istiyor musunuz?',
-            reorder: 'Yeniden Sırala',
+            reorder: 'Otomatik Düzenle',
             cancel: 'İptal',
         },
 
@@ -110,6 +119,7 @@ export const tr: LanguageTranslation = {
             tables_section: {
                 tables: 'Tablolar',
                 add_table: 'Tablo Ekle',
+                add_view: 'Görünüm Ekle',
                 filter: 'Filtrele',
                 collapse: 'Hepsini Daralt',
                 // TODO: Translate
@@ -135,6 +145,7 @@ export const tr: LanguageTranslation = {
                     field_actions: {
                         title: 'Alan Özellikleri',
                         unique: 'Tekil',
+                        auto_increment: 'Otomatik Artış',
                         comments: 'Yorumlar',
                         no_comments: 'Yorum yok',
                         delete_field: 'Alanı Sil',
@@ -150,6 +161,7 @@ export const tr: LanguageTranslation = {
                         title: 'İndeks Özellikleri',
                         name: 'Ad',
                         unique: 'Tekil',
+                        index_type: 'İndeks Türü',
                         delete_index: 'İndeksi Sil',
                     },
                     table_actions: {
@@ -167,12 +179,15 @@ export const tr: LanguageTranslation = {
                     description: 'Başlamak için bir tablo oluşturun',
                 },
             },
-            relationships_section: {
-                relationships: 'İlişkiler',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Filtrele',
-                add_relationship: 'İlişki Ekle',
                 collapse: 'Hepsini Daralt',
+                add_relationship: 'İlişki Ekle',
+                relationships: 'İlişkiler',
+                dependencies: 'Bağımlılıklar',
                 relationship: {
+                    relationship: 'İlişki',
                     primary: 'Birincil Tablo',
                     foreign: 'Referans Tablo',
                     cardinality: 'Kardinalite',
@@ -182,16 +197,8 @@ export const tr: LanguageTranslation = {
                         delete_relationship: 'Sil',
                     },
                 },
-                empty_state: {
-                    title: 'İlişki yok',
-                    description: 'Tabloları bağlamak için bir ilişki oluşturun',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Bağımlılıklar',
-                filter: 'Filtrele',
-                collapse: 'Hepsini Daralt',
                 dependency: {
+                    dependency: 'Bağımlılık',
                     table: 'Tablo',
                     dependent_table: 'Bağımlı Görünüm',
                     delete_dependency: 'Sil',
@@ -201,8 +208,8 @@ export const tr: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Bağımlılık yok',
-                    description: 'Başlamak için bir görünüm oluşturun',
+                    title: 'İlişki yok',
+                    description: 'Başlamak için bir ilişki oluşturun',
                 },
             },
 
@@ -242,6 +249,7 @@ export const tr: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Tanımlanmış enum değeri yok',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -263,7 +271,7 @@ export const tr: LanguageTranslation = {
             show_all: 'Hepsini Gör',
             undo: 'Geri Al',
             redo: 'Yinele',
-            reorder_diagram: 'Diyagramı Yeniden Sırala',
+            reorder_diagram: 'Diyagramı Otomatik Düzenle',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -305,7 +313,7 @@ export const tr: LanguageTranslation = {
             import: 'İçe Aktar',
         },
         open_diagram_dialog: {
-            title: 'Diyagramı Aç',
+            title: 'Veritabanı Aç',
             description: 'Aşağıdaki listeden açmak için bir diyagram seçin.',
             table_columns: {
                 name: 'Ad',
@@ -315,6 +323,12 @@ export const tr: LanguageTranslation = {
             },
             cancel: 'İptal',
             open: 'Aç',
+
+            diagram_actions: {
+                open: 'Aç',
+                duplicate: 'Kopyala',
+                delete: 'Sil',
+            },
         },
 
         export_sql_dialog: {
@@ -457,6 +471,7 @@ export const tr: LanguageTranslation = {
         },
         canvas_context_menu: {
             new_table: 'Yeni Tablo',
+            new_view: 'Yeni Görünüm',
             new_relationship: 'Yeni İlişki',
             // TODO: Translate
             new_area: 'New Area',
@@ -479,6 +494,9 @@ export const tr: LanguageTranslation = {
         language_select: {
             change_language: 'Dil',
         },
+
+        on: 'Açık',
+        off: 'Kapalı',
     },
 };
 

src/i18n/locales/uk.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const uk: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Нова',
+            browse: 'Огляд',
+            tables: 'Таблиці',
+            refs: 'Зв’язки',
+            areas: 'Області',
+            dependencies: 'Залежності',
+            custom_types: 'Користувацькі типи',
+        },
         menu: {
-            file: {
-                file: 'Файл',
-                new: 'Новий',
-                open: 'Відкрити',
+            actions: {
+                actions: 'Дії',
+                new: 'Нова...',
+                browse: 'Огляд...',
                 save: 'Зберегти',
                 import: 'Імпорт бази даних',
                 export_sql: 'Експорт SQL',
                 export_as: 'Експортувати як',
-                delete_diagram: 'Видалити діаграму',
-                exit: 'Вийти',
+                delete_diagram: 'Видалити',
             },
             edit: {
                 edit: 'Редагувати',
@@ -29,6 +37,7 @@ export const uk: LanguageTranslation = {
                 show_field_attributes: 'Показати атрибути полів',
                 hide_field_attributes: 'Приховати атрибути полів',
                 zoom_on_scroll: 'Масштабувати прокручуванням',
+                show_views: 'Представлення бази даних',
                 theme: 'Тема',
                 show_dependencies: 'Показати залежності',
                 hide_dependencies: 'Приховати залежності',
@@ -64,10 +73,10 @@ export const uk: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Перевпорядкувати діаграму',
+            title: 'Автоматичне розміщення діаграми',
             description:
                 'Ця дія перевпорядкує всі таблиці на діаграмі. Хочете продовжити?',
-            reorder: 'Перевпорядкувати',
+            reorder: 'Автоматичне розміщення',
             cancel: 'Скасувати',
         },
 
@@ -109,6 +118,7 @@ export const uk: LanguageTranslation = {
             tables_section: {
                 tables: 'Таблиці',
                 add_table: 'Додати таблицю',
+                add_view: 'Додати представлення',
                 filter: 'Фільтр',
                 collapse: 'Згорнути все',
                 // TODO: Translate
@@ -134,6 +144,7 @@ export const uk: LanguageTranslation = {
                     field_actions: {
                         title: 'Атрибути полів',
                         unique: 'Унікальне',
+                        auto_increment: 'Автоінкремент',
                         comments: 'Коментарі',
                         no_comments: 'Немає коментарів',
                         delete_field: 'Видалити поле',
@@ -149,6 +160,7 @@ export const uk: LanguageTranslation = {
                         title: 'Атрибути індексу',
                         name: 'Назва індекса',
                         unique: 'Унікальний',
+                        index_type: 'Тип індексу',
                         delete_index: 'Видалити індекс',
                     },
                     table_actions: {
@@ -165,12 +177,15 @@ export const uk: LanguageTranslation = {
                     description: 'Щоб почати, створіть таблицю',
                 },
             },
-            relationships_section: {
-                relationships: 'Звʼязки',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Фільтр',
-                add_relationship: 'Додати звʼязок',
                 collapse: 'Згорнути все',
+                add_relationship: 'Додати звʼязок',
+                relationships: 'Звʼязки',
+                dependencies: 'Залежності',
                 relationship: {
+                    relationship: 'Звʼязок',
                     primary: 'Первинна таблиця',
                     foreign: 'Посилання на таблицю',
                     cardinality: 'Звʼязок',
@@ -180,16 +195,8 @@ export const uk: LanguageTranslation = {
                         delete_relationship: 'Видалити',
                     },
                 },
-                empty_state: {
-                    title: 'Звʼязків немає',
-                    description: 'Створіть звʼязок для зʼєднання таблиць',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Залежності',
-                filter: 'Фільтр',
-                collapse: 'Згорнути все',
                 dependency: {
+                    dependency: 'Залежність',
                     table: 'Таблиця',
                     dependent_table: 'Залежне подання',
                     delete_dependency: 'Видалити',
@@ -199,8 +206,8 @@ export const uk: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Жодних залежностей',
-                    description: 'Створіть подання, щоб почати',
+                    title: 'Жодних зв’язків',
+                    description: 'Створіть зв’язок, щоб почати',
                 },
             },
 
@@ -240,6 +247,7 @@ export const uk: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Значення переліку не визначені',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -262,7 +270,7 @@ export const uk: LanguageTranslation = {
             show_all: 'Показати все',
             undo: 'Скасувати',
             redo: 'Повторити',
-            reorder_diagram: 'Перевпорядкувати діаграму',
+            reorder_diagram: 'Автоматичне розміщення діаграми',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -306,7 +314,7 @@ export const uk: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Відкрити діаграму',
+            title: 'Відкрити базу даних',
             description:
                 'Виберіть діаграму, яку потрібно відкрити, зі списку нижче.',
             table_columns: {
@@ -317,6 +325,12 @@ export const uk: LanguageTranslation = {
             },
             cancel: 'Скасувати',
             open: 'Відкрити',
+
+            diagram_actions: {
+                open: 'Відкрити',
+                duplicate: 'Дублювати',
+                delete: 'Видалити',
+            },
         },
 
         export_sql_dialog: {
@@ -463,6 +477,7 @@ export const uk: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Нова таблиця',
+            new_view: 'Нове представлення',
             new_relationship: 'Новий звʼязок',
             // TODO: Translate
             new_area: 'New Area',
@@ -484,6 +499,9 @@ export const uk: LanguageTranslation = {
         language_select: {
             change_language: 'Мова',
         },
+
+        on: 'Увімк',
+        off: 'Вимк',
     },
 };
 

src/i18n/locales/vi.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const vi: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: 'Mới',
+            browse: 'Duyệt',
+            tables: 'Bảng',
+            refs: 'Refs',
+            areas: 'Khu vực',
+            dependencies: 'Phụ thuộc',
+            custom_types: 'Kiểu tùy chỉnh',
+        },
         menu: {
-            file: {
-                file: 'Tệp',
-                new: 'Tạo mới',
-                open: 'Mở',
+            actions: {
+                actions: 'Hành động',
+                new: 'Mới...',
+                browse: 'Duyệt...',
                 save: 'Lưu',
                 import: 'Nhập cơ sở dữ liệu',
                 export_sql: 'Xuất SQL',
                 export_as: 'Xuất thành',
-                delete_diagram: 'Xóa sơ đồ',
-                exit: 'Thoát',
+                delete_diagram: 'Xóa',
             },
             edit: {
                 edit: 'Sửa',
@@ -29,6 +37,7 @@ export const vi: LanguageTranslation = {
                 show_field_attributes: 'Hiển thị thuộc tính trường',
                 hide_field_attributes: 'Ẩn thuộc tính trường',
                 zoom_on_scroll: 'Thu phóng khi cuộn',
+                show_views: 'Chế độ xem Cơ sở dữ liệu',
                 theme: 'Chủ đề',
                 show_dependencies: 'Hiển thị các phụ thuộc',
                 hide_dependencies: 'Ẩn các phụ thuộc',
@@ -65,10 +74,10 @@ export const vi: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: 'Sắp xếp lại sơ đồ',
+            title: 'Tự động sắp xếp sơ đồ',
             description:
                 'Hành động này sẽ sắp xếp lại tất cả các bảng trong sơ đồ. Bạn có muốn tiếp tục không?',
-            reorder: 'Sắp xếp',
+            reorder: 'Tự động sắp xếp',
             cancel: 'Hủy',
         },
 
@@ -110,6 +119,7 @@ export const vi: LanguageTranslation = {
             tables_section: {
                 tables: 'Bảng',
                 add_table: 'Thêm bảng',
+                add_view: 'Thêm Chế độ xem',
                 filter: 'Lọc',
                 collapse: 'Thu gọn tất cả',
                 // TODO: Translate
@@ -135,6 +145,7 @@ export const vi: LanguageTranslation = {
                     field_actions: {
                         title: 'Thuộc tính trường',
                         unique: 'Giá trị duy nhất',
+                        auto_increment: 'Tự động tăng',
                         comments: 'Bình luận',
                         no_comments: 'Không có bình luận',
                         delete_field: 'Xóa trường',
@@ -150,6 +161,7 @@ export const vi: LanguageTranslation = {
                         title: 'Thuộc tính chỉ mục',
                         name: 'Tên',
                         unique: 'Giá trị duy nhất',
+                        index_type: 'Loại chỉ mục',
                         delete_index: 'Xóa chỉ mục',
                     },
                     table_actions: {
@@ -166,12 +178,15 @@ export const vi: LanguageTranslation = {
                     description: 'Tạo một bảng để bắt đầu',
                 },
             },
-            relationships_section: {
-                relationships: 'Quan hệ',
+            refs_section: {
+                refs: 'Refs',
                 filter: 'Lọc',
-                add_relationship: 'Thêm quan hệ',
                 collapse: 'Thu gọn tất cả',
+                add_relationship: 'Thêm quan hệ',
+                relationships: 'Quan hệ',
+                dependencies: 'Phụ thuộc',
                 relationship: {
+                    relationship: 'Quan hệ',
                     primary: 'Bảng khóa chính',
                     foreign: 'Bảng khóa ngoại',
                     cardinality: 'Quan hệ',
@@ -181,16 +196,8 @@ export const vi: LanguageTranslation = {
                         delete_relationship: 'Xóa',
                     },
                 },
-                empty_state: {
-                    title: 'Không có quan hệ',
-                    description: 'Tạo quan hệ để kết nối các bảng',
-                },
-            },
-            dependencies_section: {
-                dependencies: 'Phụ thuộc',
-                filter: 'Lọc',
-                collapse: 'Thu gọn tất cả',
                 dependency: {
+                    dependency: 'Phụ thuộc',
                     table: 'Bảng',
                     dependent_table: 'Bảng xem phụ thuộc',
                     delete_dependency: 'Xóa',
@@ -200,8 +207,8 @@ export const vi: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: 'Không có phụ thuộc',
-                    description: 'Tạo bảng xem phụ thuộc để bắt đầu',
+                    title: 'Không có quan hệ',
+                    description: 'Tạo một quan hệ để bắt đầu',
                 },
             },
 
@@ -241,6 +248,7 @@ export const vi: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: 'Không có giá trị enum được định nghĩa',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -263,7 +271,7 @@ export const vi: LanguageTranslation = {
             show_all: 'Hiển thị tất cả',
             undo: 'Hoàn tác',
             redo: 'Làm lại',
-            reorder_diagram: 'Sắp xếp lại sơ đồ',
+            reorder_diagram: 'Tự động sắp xếp sơ đồ',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -307,7 +315,7 @@ export const vi: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: 'Mở sơ đồ',
+            title: 'Mở cơ sở dữ liệu',
             description: 'Chọn sơ đồ để mở từ danh sách bên dưới.',
             table_columns: {
                 name: 'Tên',
@@ -317,6 +325,12 @@ export const vi: LanguageTranslation = {
             },
             cancel: 'Hủy',
             open: 'Mở',
+
+            diagram_actions: {
+                open: 'Mở',
+                duplicate: 'Nhân bản',
+                delete: 'Xóa',
+            },
         },
 
         export_sql_dialog: {
@@ -464,6 +478,7 @@ export const vi: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: 'Tạo bảng mới',
+            new_view: 'Chế độ xem Mới',
             new_relationship: 'Tạo quan hệ mới',
             // TODO: Translate
             new_area: 'New Area',
@@ -485,6 +500,9 @@ export const vi: LanguageTranslation = {
         language_select: {
             change_language: 'Ngôn ngữ',
         },
+
+        on: 'Bật',
+        off: 'Tắt',
     },
 };
 

src/i18n/locales/zh_CN.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const zh_CN: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: '新建',
+            browse: '浏览',
+            tables: '表',
+            refs: '引用',
+            areas: '区域',
+            dependencies: '依赖关系',
+            custom_types: '自定义类型',
+        },
         menu: {
-            file: {
-                file: '文件',
-                new: '新建',
-                open: '打开',
+            actions: {
+                actions: '操作',
+                new: '新建...',
+                browse: '浏览...',
                 save: '保存',
                 import: '导入数据库',
                 export_sql: '导出 SQL 语句',
                 export_as: '导出为',
-                delete_diagram: '删除关系图',
-                exit: '退出',
+                delete_diagram: '删除',
             },
             edit: {
                 edit: '编辑',
@@ -29,6 +37,7 @@ export const zh_CN: LanguageTranslation = {
                 show_field_attributes: '展示字段属性',
                 hide_field_attributes: '隐藏字段属性',
                 zoom_on_scroll: '滚动缩放',
+                show_views: '数据库视图',
                 theme: '主题',
                 show_dependencies: '展示依赖',
                 hide_dependencies: '隐藏依赖',
@@ -63,9 +72,9 @@ export const zh_CN: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: '重新排列关系图',
+            title: '自动排列关系图',
             description: '此操作将重新排列关系图中的所有表。是否要继续？',
-            reorder: '重新排列',
+            reorder: '自动排列',
             cancel: '取消',
         },
 
@@ -107,6 +116,7 @@ export const zh_CN: LanguageTranslation = {
             tables_section: {
                 tables: '表',
                 add_table: '添加表',
+                add_view: '添加视图',
                 filter: '筛选',
                 collapse: '全部折叠',
                 // TODO: Translate
@@ -132,6 +142,7 @@ export const zh_CN: LanguageTranslation = {
                     field_actions: {
                         title: '字段属性',
                         unique: '唯一',
+                        auto_increment: '自动递增',
                         comments: '注释',
                         no_comments: '空',
                         delete_field: '删除字段',
@@ -147,6 +158,7 @@ export const zh_CN: LanguageTranslation = {
                         title: '索引属性',
                         name: '名称',
                         unique: '唯一',
+                        index_type: '索引类型',
                         delete_index: '删除索引',
                     },
                     table_actions: {
@@ -163,12 +175,15 @@ export const zh_CN: LanguageTranslation = {
                     description: '新建表以开始',
                 },
             },
-            relationships_section: {
-                relationships: '关系',
+            refs_section: {
+                refs: '引用',
                 filter: '筛选',
-                add_relationship: '添加关系',
                 collapse: '全部折叠',
+                add_relationship: '添加关系',
+                relationships: '关系',
+                dependencies: '依赖关系',
                 relationship: {
+                    relationship: '关系',
                     primary: '主表',
                     foreign: '被引用表',
                     cardinality: '基数',
@@ -178,16 +193,8 @@ export const zh_CN: LanguageTranslation = {
                         delete_relationship: '删除',
                     },
                 },
-                empty_state: {
-                    title: '无关系',
-                    description: '创建关系以连接表',
-                },
-            },
-            dependencies_section: {
-                dependencies: '依赖关系',
-                filter: '筛选',
-                collapse: '全部折叠',
                 dependency: {
+                    dependency: '依赖',
                     table: '表',
                     dependent_table: '依赖视图',
                     delete_dependency: '删除',
@@ -197,8 +204,8 @@ export const zh_CN: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: '无依赖',
-                    description: '创建视图以开始',
+                    title: '无关系',
+                    description: '创建关系以开始',
                 },
             },
 
@@ -238,6 +245,7 @@ export const zh_CN: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: '没有定义枚举值',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -260,7 +268,7 @@ export const zh_CN: LanguageTranslation = {
             show_all: '展示全部',
             undo: '撤销',
             redo: '重做',
-            reorder_diagram: '重新排列关系图',
+            reorder_diagram: '自动排列关系图',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -304,7 +312,7 @@ export const zh_CN: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: '打开关系图',
+            title: '打开数据库',
             description: '从下面的列表中选择一个图表打开。',
             table_columns: {
                 name: '名称',
@@ -314,6 +322,12 @@ export const zh_CN: LanguageTranslation = {
             },
             cancel: '取消',
             open: '打开',
+
+            diagram_actions: {
+                open: '打开',
+                duplicate: '复制',
+                delete: '删除',
+            },
         },
 
         export_sql_dialog: {
@@ -459,6 +473,7 @@ export const zh_CN: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: '新建表',
+            new_view: '新建视图',
             new_relationship: '新建关系',
             // TODO: Translate
             new_area: 'New Area',
@@ -480,6 +495,9 @@ export const zh_CN: LanguageTranslation = {
         language_select: {
             change_language: '语言',
         },
+
+        on: '开启',
+        off: '关闭',
     },
 };
 

src/i18n/locales/zh_TW.ts

@@ -2,17 +2,25 @@ import type { LanguageMetadata, LanguageTranslation } from '../types';
 
 export const zh_TW: LanguageTranslation = {
     translation: {
+        editor_sidebar: {
+            new_diagram: '新建',
+            browse: '瀏覽',
+            tables: '表格',
+            refs: 'Refs',
+            areas: '區域',
+            dependencies: '相依性',
+            custom_types: '自定義類型',
+        },
         menu: {
-            file: {
-                file: '檔案',
-                new: '新增',
-                open: '開啟',
+            actions: {
+                actions: '操作',
+                new: '新增...',
+                browse: '瀏覽...',
                 save: '儲存',
                 import: '匯入資料庫',
                 export_sql: '匯出 SQL',
                 export_as: '匯出為特定格式',
-                delete_diagram: '刪除圖表',
-                exit: '退出',
+                delete_diagram: '刪除',
             },
             edit: {
                 edit: '編輯',
@@ -29,6 +37,7 @@ export const zh_TW: LanguageTranslation = {
                 hide_field_attributes: '隱藏欄位屬性',
                 show_field_attributes: '顯示欄位屬性',
                 zoom_on_scroll: '滾動縮放',
+                show_views: '資料庫檢視',
                 theme: '主題',
                 show_dependencies: '顯示相依性',
                 hide_dependencies: '隱藏相依性',
@@ -63,9 +72,9 @@ export const zh_TW: LanguageTranslation = {
         },
 
         reorder_diagram_alert: {
-            title: '重新排列圖表',
+            title: '自動排列圖表',
             description: '此操作將重新排列圖表中的所有表格。是否繼續？',
-            reorder: '重新排列',
+            reorder: '自動排列',
             cancel: '取消',
         },
 
@@ -107,6 +116,7 @@ export const zh_TW: LanguageTranslation = {
             tables_section: {
                 tables: '表格',
                 add_table: '新增表格',
+                add_view: '新增檢視',
                 filter: '篩選',
                 collapse: '全部摺疊',
                 // TODO: Translate
@@ -132,6 +142,7 @@ export const zh_TW: LanguageTranslation = {
                     field_actions: {
                         title: '欄位屬性',
                         unique: '唯一',
+                        auto_increment: '自動遞增',
                         comments: '註解',
                         no_comments: '無註解',
                         delete_field: '刪除欄位',
@@ -147,6 +158,7 @@ export const zh_TW: LanguageTranslation = {
                         title: '索引屬性',
                         name: '名稱',
                         unique: '唯一',
+                        index_type: '索引類型',
                         delete_index: '刪除索引',
                     },
                     table_actions: {
@@ -163,12 +175,15 @@ export const zh_TW: LanguageTranslation = {
                     description: '請新增表格以開始',
                 },
             },
-            relationships_section: {
-                relationships: '關聯',
+            refs_section: {
+                refs: 'Refs',
                 filter: '篩選',
-                add_relationship: '新增關聯',
                 collapse: '全部摺疊',
+                add_relationship: '新增關聯',
+                relationships: '關聯',
+                dependencies: '相依性',
                 relationship: {
+                    relationship: '關聯',
                     primary: '主表格',
                     foreign: '參照表格',
                     cardinality: '基數',
@@ -178,16 +193,8 @@ export const zh_TW: LanguageTranslation = {
                         delete_relationship: '刪除',
                     },
                 },
-                empty_state: {
-                    title: '尚無關聯',
-                    description: '請新增關聯以連接表格',
-                },
-            },
-            dependencies_section: {
-                dependencies: '相依性',
-                filter: '篩選',
-                collapse: '全部摺疊',
                 dependency: {
+                    dependency: '相依性',
                     table: '表格',
                     dependent_table: '相依檢視',
                     delete_dependency: '刪除',
@@ -197,8 +204,8 @@ export const zh_TW: LanguageTranslation = {
                     },
                 },
                 empty_state: {
-                    title: '尚無相依性',
-                    description: '請建立檢視以開始',
+                    title: '尚無關聯',
+                    description: '請建立關聯以開始',
                 },
             },
 
@@ -238,6 +245,7 @@ export const zh_TW: LanguageTranslation = {
                     enum_values: 'Enum Values',
                     composite_fields: 'Fields',
                     no_fields: 'No fields defined',
+                    no_values: '沒有定義列舉值',
                     field_name_placeholder: 'Field name',
                     field_type_placeholder: 'Select type',
                     add_field: 'Add Field',
@@ -260,7 +268,7 @@ export const zh_TW: LanguageTranslation = {
             show_all: '顯示全部',
             undo: '復原',
             redo: '重做',
-            reorder_diagram: '重新排列圖表',
+            reorder_diagram: '自動排列圖表',
             // TODO: Translate
             clear_custom_type_highlight: 'Clear highlight for "{{typeName}}"',
             custom_type_highlight_tooltip:
@@ -303,7 +311,7 @@ export const zh_TW: LanguageTranslation = {
         },
 
         open_diagram_dialog: {
-            title: '開啟圖表',
+            title: '開啟資料庫',
             description: '請從以下列表中選擇一個圖表。',
             table_columns: {
                 name: '名稱',
@@ -313,6 +321,12 @@ export const zh_TW: LanguageTranslation = {
             },
             cancel: '取消',
             open: '開啟',
+
+            diagram_actions: {
+                open: '開啟',
+                duplicate: '複製',
+                delete: '刪除',
+            },
         },
 
         export_sql_dialog: {
@@ -459,6 +473,7 @@ export const zh_TW: LanguageTranslation = {
 
         canvas_context_menu: {
             new_table: '新建表格',
+            new_view: '新檢視',
             new_relationship: '新建關聯',
             // TODO: Translate
             new_area: 'New Area',
@@ -480,6 +495,9 @@ export const zh_TW: LanguageTranslation = {
         language_select: {
             change_language: '變更語言',
         },
+
+        on: '開啟',
+        off: '關閉',
     },
 };
 

src/index.css

@@ -18,4 +18,7 @@
 
     .marker-definitions {
     }
+
+    .nodrag {
+    }
 }

src/lib/colors.ts

@@ -19,3 +19,5 @@ export const randomColor = () => {
 
 export const viewColor = '#b0b0b0';
 export const materializedViewColor = '#7d7d7d';
+export const defaultTableColor = '#8eb7ff';
+export const defaultAreaColor = '#b067e9';

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

@@ -129,9 +129,6 @@ export const clickhouseDataTypes: readonly DataTypeData[] = [
     { name: 'enum', id: 'enum' },
     { name: 'lowcardinality', id: 'lowcardinality' },
 
-    // Array Type
-    { name: 'array', id: 'array' },
-
     // Tuple Type
     { name: 'tuple', id: 'tuple' },
     { name: 'map', id: 'map' },

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

@@ -1,5 +1,6 @@
 import { z } from 'zod';
 import { DatabaseType } from '../../domain/database-type';
+import { databaseSupportsArrays } from '../../domain/database-capabilities';
 import { clickhouseDataTypes } from './clickhouse-data-types';
 import { genericDataTypes } from './generic-data-types';
 import { mariadbDataTypes } from './mariadb-data-types';
@@ -146,3 +147,53 @@ export const findDataTypeDataById = (
 
     return dataTypesOptions.find((dataType) => dataType.id === id);
 };
+
+export const supportsAutoIncrementDataType = (
+    dataTypeName: string
+): boolean => {
+    return [
+        'integer',
+        'int',
+        'bigint',
+        'smallint',
+        'tinyint',
+        'mediumint',
+        'serial',
+        'bigserial',
+        'smallserial',
+        'number',
+        'numeric',
+        'decimal',
+    ].includes(dataTypeName.toLocaleLowerCase());
+};
+
+export const autoIncrementAlwaysOn = (dataTypeName: string): boolean => {
+    return ['serial', 'bigserial', 'smallserial'].includes(
+        dataTypeName.toLowerCase()
+    );
+};
+
+export const requiresNotNull = (dataTypeName: string): boolean => {
+    return ['serial', 'bigserial', 'smallserial'].includes(
+        dataTypeName.toLowerCase()
+    );
+};
+
+const ARRAY_INCOMPATIBLE_TYPES = [
+    'serial',
+    'bigserial',
+    'smallserial',
+] as const;
+
+export const supportsArrayDataType = (
+    dataTypeName: string,
+    databaseType: DatabaseType
+): boolean => {
+    if (!databaseSupportsArrays(databaseType)) {
+        return false;
+    }
+
+    return !ARRAY_INCOMPATIBLE_TYPES.includes(
+        dataTypeName.toLowerCase() as (typeof ARRAY_INCOMPATIBLE_TYPES)[number]
+    );
+};

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

@@ -12,6 +12,7 @@ export const postgresDataTypes: readonly DataTypeData[] = [
     { name: 'text', id: 'text', usageLevel: 1 },
     { name: 'boolean', id: 'boolean', usageLevel: 1 },
     { name: 'timestamp', id: 'timestamp', usageLevel: 1 },
+    { name: 'timestamptz', id: 'timestamptz', usageLevel: 1 },
     { name: 'date', id: 'date', usageLevel: 1 },
 
     // Level 2 - Second most common types
@@ -42,6 +43,7 @@ export const postgresDataTypes: readonly DataTypeData[] = [
         id: 'timestamp_with_time_zone',
         usageLevel: 2,
     },
+    { name: 'int', id: 'int', usageLevel: 2 },
 
     // Less common types
     {
@@ -95,7 +97,6 @@ export const postgresDataTypes: readonly DataTypeData[] = [
     { name: 'tsvector', id: 'tsvector' },
     { name: 'tsquery', id: 'tsquery' },
     { name: 'xml', id: 'xml' },
-    { name: 'array', id: 'array' },
     { name: 'int4range', id: 'int4range' },
     { name: 'int8range', id: 'int8range' },
     { name: 'numrange', id: 'numrange' },

src/lib/data/import-metadata/import/custom-types.ts

@@ -0,0 +1,21 @@
+import type { DBCustomType, DBCustomTypeKind } from '@/lib/domain';
+import { schemaNameToDomainSchemaName } from '@/lib/domain';
+import type { DBCustomTypeInfo } from '../metadata-types/custom-type-info';
+import { generateId } from '@/lib/utils';
+
+export const createCustomTypesFromMetadata = ({
+    customTypes,
+}: {
+    customTypes: DBCustomTypeInfo[];
+}): DBCustomType[] => {
+    return customTypes.map((customType) => {
+        return {
+            id: generateId(),
+            schema: schemaNameToDomainSchemaName(customType.schema),
+            name: customType.type,
+            kind: customType.kind as DBCustomTypeKind,
+            values: customType.values,
+            fields: customType.fields,
+        };
+    });
+};

src/lib/data/import-metadata/import/dependencies.ts

@@ -0,0 +1,351 @@
+import { generateId } from '@/lib/utils';
+import type { AST } from 'node-sql-parser';
+import type { DBDependency, DBTable } from '@/lib/domain';
+import { DatabaseType, schemaNameToDomainSchemaName } from '@/lib/domain';
+import type { ViewInfo } from '../metadata-types/view-info';
+import { decodeViewDefinition } from './tables';
+
+const astDatabaseTypes: Record<DatabaseType, string> = {
+    [DatabaseType.POSTGRESQL]: 'postgresql',
+    [DatabaseType.MYSQL]: 'postgresql',
+    [DatabaseType.MARIADB]: 'postgresql',
+    [DatabaseType.GENERIC]: 'postgresql',
+    [DatabaseType.SQLITE]: 'postgresql',
+    [DatabaseType.SQL_SERVER]: 'postgresql',
+    [DatabaseType.CLICKHOUSE]: 'postgresql',
+    [DatabaseType.COCKROACHDB]: 'postgresql',
+    [DatabaseType.ORACLE]: 'postgresql',
+};
+
+export const createDependenciesFromMetadata = async ({
+    views,
+    tables,
+    databaseType,
+}: {
+    views: ViewInfo[];
+    tables: DBTable[];
+    databaseType: DatabaseType;
+}): Promise<DBDependency[]> => {
+    if (!views || views.length === 0) {
+        return [];
+    }
+
+    const { Parser } = await import('node-sql-parser');
+    const parser = new Parser();
+
+    const dependencies = views
+        .flatMap((view) => {
+            const viewSchema = schemaNameToDomainSchemaName(view.schema);
+            const viewTable = tables.find(
+                (table) =>
+                    table.name === view.view_name && viewSchema === table.schema
+            );
+
+            if (!viewTable) {
+                console.warn(
+                    `Source table for view ${view.view_name} not found (schema: ${viewSchema})`
+                );
+                return []; // Skip this view and proceed to the next
+            }
+
+            if (view.view_definition) {
+                try {
+                    const decodedViewDefinition = decodeViewDefinition(
+                        databaseType,
+                        view.view_definition
+                    );
+
+                    let modifiedViewDefinition = '';
+                    if (
+                        databaseType === DatabaseType.MYSQL ||
+                        databaseType === DatabaseType.MARIADB
+                    ) {
+                        modifiedViewDefinition = preprocessViewDefinitionMySQL(
+                            decodedViewDefinition
+                        );
+                    } else if (databaseType === DatabaseType.SQL_SERVER) {
+                        modifiedViewDefinition =
+                            preprocessViewDefinitionSQLServer(
+                                decodedViewDefinition
+                            );
+                    } else {
+                        modifiedViewDefinition = preprocessViewDefinition(
+                            decodedViewDefinition
+                        );
+                    }
+
+                    // Parse using the appropriate dialect
+                    const ast = parser.astify(modifiedViewDefinition, {
+                        database: astDatabaseTypes[databaseType],
+                        type: 'select', // Parsing a SELECT statement
+                    });
+
+                    let relatedTables = extractTablesFromAST(ast);
+
+                    // Filter out duplicate tables without schema
+                    relatedTables = filterDuplicateTables(relatedTables);
+
+                    return relatedTables.map((relTable) => {
+                        const relSchema = relTable.schema || view.schema; // Use view's schema if relSchema is undefined
+                        const relTableName = relTable.tableName;
+
+                        const table = tables.find(
+                            (table) =>
+                                table.name === relTableName &&
+                                (table.schema || '') === relSchema
+                        );
+
+                        if (table) {
+                            const dependency: DBDependency = {
+                                id: generateId(),
+                                schema: view.schema,
+                                tableId: table.id, // related table
+                                dependentSchema: table.schema,
+                                dependentTableId: viewTable.id, // dependent view
+                                createdAt: Date.now(),
+                            };
+
+                            return dependency;
+                        } else {
+                            console.warn(
+                                `Dependent table ${relSchema}.${relTableName} not found for view ${view.schema}.${view.view_name}`
+                            );
+                            return null;
+                        }
+                    });
+                } catch (error) {
+                    console.error(
+                        `Error parsing view ${view.schema}.${view.view_name}:`,
+                        error
+                    );
+                    return [];
+                }
+            } else {
+                console.warn(
+                    `View definition missing for ${view.schema}.${view.view_name}`
+                );
+                return [];
+            }
+        })
+        .filter((dependency) => dependency !== null);
+
+    return dependencies;
+};
+
+// Add this new function to filter out duplicate tables
+function filterDuplicateTables(
+    tables: { schema?: string; tableName: string }[]
+): { schema?: string; tableName: string }[] {
+    const tableMap = new Map<string, { schema?: string; tableName: string }>();
+
+    for (const table of tables) {
+        const key = table.tableName;
+        const existingTable = tableMap.get(key);
+
+        if (!existingTable || (table.schema && !existingTable.schema)) {
+            tableMap.set(key, table);
+        }
+    }
+
+    return Array.from(tableMap.values());
+}
+
+// Preprocess the view_definition to remove schema from CREATE VIEW
+function preprocessViewDefinition(viewDefinition: string): string {
+    if (!viewDefinition) {
+        return '';
+    }
+
+    // Remove leading and trailing whitespace
+    viewDefinition = viewDefinition.replace(/\s+/g, ' ').trim();
+
+    // Replace escaped double quotes with regular ones
+    viewDefinition = viewDefinition.replace(/\\"/g, '"');
+
+    // Replace 'CREATE MATERIALIZED VIEW' with 'CREATE VIEW'
+    viewDefinition = viewDefinition.replace(
+        /CREATE\s+MATERIALIZED\s+VIEW/i,
+        'CREATE VIEW'
+    );
+
+    // Regular expression to match 'CREATE VIEW [schema.]view_name [ (column definitions) ] AS'
+    // This regex captures the view name and skips any content between the view name and 'AS'
+    const regex =
+        /CREATE\s+VIEW\s+(?:(?:`[^`]+`|"[^"]+"|\w+)\.)?(?:`([^`]+)`|"([^"]+)"|(\w+))[\s\S]*?\bAS\b\s+/i;
+
+    const match = viewDefinition.match(regex);
+    let modifiedDefinition: string;
+
+    if (match) {
+        const viewName = match[1] || match[2] || match[3];
+        // Extract the SQL after the 'AS' keyword
+        const restOfDefinition = viewDefinition.substring(
+            match.index! + match[0].length
+        );
+
+        // Replace double-quoted identifiers with unquoted ones
+        let modifiedSQL = restOfDefinition.replace(/"(\w+)"/g, '$1');
+
+        // Replace '::' type casts with 'CAST' expressions
+        modifiedSQL = modifiedSQL.replace(
+            /\(([^()]+)\)::(\w+)/g,
+            'CAST($1 AS $2)'
+        );
+
+        // Remove ClickHouse-specific syntax that may still be present
+        // For example, remove SETTINGS clauses inside the SELECT statement
+        modifiedSQL = modifiedSQL.replace(/\bSETTINGS\b[\s\S]*$/i, '');
+
+        modifiedDefinition = `CREATE VIEW ${viewName} AS ${modifiedSQL}`;
+    } else {
+        console.warn('Could not preprocess view definition:', viewDefinition);
+        modifiedDefinition = viewDefinition;
+    }
+
+    return modifiedDefinition;
+}
+
+// Preprocess the view_definition for SQL Server
+function preprocessViewDefinitionSQLServer(viewDefinition: string): string {
+    if (!viewDefinition) {
+        return '';
+    }
+
+    // Remove BOM if present
+    viewDefinition = viewDefinition.replace(/^\uFEFF/, '');
+
+    // Normalize whitespace
+    viewDefinition = viewDefinition.replace(/\s+/g, ' ').trim();
+
+    // Remove square brackets and replace with double quotes
+    viewDefinition = viewDefinition.replace(/\[([^\]]+)\]/g, '"$1"');
+
+    // Remove database names from fully qualified identifiers
+    viewDefinition = viewDefinition.replace(
+        /"([a-zA-Z0-9_]+)"\."([a-zA-Z0-9_]+)"\."([a-zA-Z0-9_]+)"/g,
+        '"$2"."$3"'
+    );
+
+    // Replace SQL Server functions with PostgreSQL equivalents
+    viewDefinition = viewDefinition.replace(/\bGETDATE\(\)/gi, 'NOW()');
+    viewDefinition = viewDefinition.replace(/\bISNULL\(/gi, 'COALESCE(');
+
+    // Replace 'TOP N' with 'LIMIT N' at the end of the query
+    const topMatch = viewDefinition.match(/SELECT\s+TOP\s+(\d+)/i);
+    if (topMatch) {
+        const topN = topMatch[1];
+        viewDefinition = viewDefinition.replace(
+            /SELECT\s+TOP\s+\d+/i,
+            'SELECT'
+        );
+        viewDefinition = viewDefinition.replace(/;+\s*$/, ''); // Remove semicolons at the end
+        viewDefinition += ` LIMIT ${topN}`;
+    }
+
+    viewDefinition = viewDefinition.replace(/\n/g, ''); // Remove newlines
+
+    // Adjust CREATE VIEW syntax
+    const regex =
+        /CREATE\s+VIEW\s+(?:"?([^".\s]+)"?\.)?"?([^".\s]+)"?\s+AS\s+/i;
+    const match = viewDefinition.match(regex);
+    let modifiedDefinition: string;
+
+    if (match) {
+        const viewName = match[2];
+        const modifiedSQL = viewDefinition.substring(
+            match.index! + match[0].length
+        );
+
+        // Remove semicolons at the end
+        const finalSQL = modifiedSQL.replace(/;+\s*$/, '');
+
+        modifiedDefinition = `CREATE VIEW "${viewName}" AS ${finalSQL}`;
+    } else {
+        console.warn('Could not preprocess view definition:', viewDefinition);
+        modifiedDefinition = viewDefinition;
+    }
+
+    return modifiedDefinition;
+}
+
+// Preprocess the view_definition to remove schema from CREATE VIEW
+function preprocessViewDefinitionMySQL(viewDefinition: string): string {
+    if (!viewDefinition) {
+        return '';
+    }
+
+    // Remove any trailing semicolons
+    viewDefinition = viewDefinition.replace(/;\s*$/, '');
+
+    // Remove backticks from identifiers
+    viewDefinition = viewDefinition.replace(/`/g, '');
+
+    // Remove unnecessary parentheses around joins and ON clauses
+    viewDefinition = removeRedundantParentheses(viewDefinition);
+
+    return viewDefinition;
+}
+
+function removeRedundantParentheses(sql: string): string {
+    // Regular expressions to match unnecessary parentheses
+    const patterns = [
+        /\(\s*(JOIN\s+[^()]+?)\s*\)/gi,
+        /\(\s*(ON\s+[^()]+?)\s*\)/gi,
+        // Additional patterns if necessary
+    ];
+
+    let prevSql;
+    do {
+        prevSql = sql;
+        patterns.forEach((pattern) => {
+            sql = sql.replace(pattern, '$1');
+        });
+    } while (sql !== prevSql);
+
+    return sql;
+}
+
+function extractTablesFromAST(
+    ast: AST | AST[]
+): { schema?: string; tableName: string }[] {
+    const tablesMap = new Map<string, { schema: string; tableName: string }>();
+    const visitedNodes = new Set();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function traverse(node: any) {
+        if (!node || visitedNodes.has(node)) return;
+        visitedNodes.add(node);
+
+        if (Array.isArray(node)) {
+            node.forEach(traverse);
+        } else if (typeof node === 'object') {
+            // Check if node represents a table
+            if (
+                Object.hasOwnProperty.call(node, 'table') &&
+                typeof node.table === 'string'
+            ) {
+                let schema = node.db || node.schema;
+                const tableName = node.table;
+                if (tableName) {
+                    // Assign default schema if undefined
+                    schema = schemaNameToDomainSchemaName(schema) || '';
+                    const key = `${schema}.${tableName}`;
+                    if (!tablesMap.has(key)) {
+                        tablesMap.set(key, { schema, tableName });
+                    }
+                }
+            }
+
+            // Recursively traverse all properties
+            for (const key in node) {
+                if (Object.hasOwnProperty.call(node, key)) {
+                    traverse(node[key]);
+                }
+            }
+        }
+    }
+
+    traverse(ast);
+
+    return Array.from(tablesMap.values());
+}

src/lib/data/import-metadata/import/fields.ts

@@ -0,0 +1,67 @@
+import type { DBField } from '@/lib/domain';
+import type { ColumnInfo } from '../metadata-types/column-info';
+import type { AggregatedIndexInfo } from '../metadata-types/index-info';
+import type { PrimaryKeyInfo } from '../metadata-types/primary-key-info';
+import type { TableInfo } from '../metadata-types/table-info';
+import { generateId } from '@/lib/utils';
+
+export const createFieldsFromMetadata = ({
+    tableColumns,
+    tablePrimaryKeys,
+    aggregatedIndexes,
+}: {
+    tableColumns: ColumnInfo[];
+    tableSchema?: string;
+    tableInfo: TableInfo;
+    tablePrimaryKeys: PrimaryKeyInfo[];
+    aggregatedIndexes: AggregatedIndexInfo[];
+}) => {
+    const uniqueColumns = tableColumns.reduce((acc, col) => {
+        if (!acc.has(col.name)) {
+            acc.set(col.name, col);
+        }
+        return acc;
+    }, new Map<string, ColumnInfo>());
+
+    const sortedColumns = Array.from(uniqueColumns.values()).sort(
+        (a, b) => a.ordinal_position - b.ordinal_position
+    );
+
+    const tablePrimaryKeysColumns = tablePrimaryKeys.map((pk) =>
+        pk.column.trim()
+    );
+
+    return sortedColumns.map(
+        (col: ColumnInfo): DBField => ({
+            id: generateId(),
+            name: col.name,
+            type: {
+                id: col.type.split(' ').join('_').toLowerCase(),
+                name: col.type.toLowerCase(),
+            },
+            primaryKey: tablePrimaryKeysColumns.includes(col.name),
+            unique: Object.values(aggregatedIndexes).some(
+                (idx) =>
+                    idx.unique &&
+                    idx.columns.length === 1 &&
+                    idx.columns[0].name === col.name
+            ),
+            nullable: Boolean(col.nullable),
+            ...(col.character_maximum_length &&
+            col.character_maximum_length !== 'null'
+                ? { characterMaximumLength: col.character_maximum_length }
+                : {}),
+            ...(col.precision?.precision
+                ? { precision: col.precision.precision }
+                : {}),
+            ...(col.precision?.scale ? { scale: col.precision.scale } : {}),
+            ...(col.default ? { default: col.default } : {}),
+            ...(col.collation ? { collation: col.collation } : {}),
+            ...(col.is_identity !== undefined
+                ? { increment: col.is_identity }
+                : {}),
+            createdAt: Date.now(),
+            comments: col.comment ? col.comment : undefined,
+        })
+    );
+};

src/lib/data/import-metadata/import/index.ts

@@ -0,0 +1,82 @@
+import type { DatabaseEdition, Diagram } from '@/lib/domain';
+import { adjustTablePositions, DatabaseType } from '@/lib/domain';
+import { generateDiagramId } from '@/lib/utils';
+import type { DatabaseMetadata } from '../metadata-types/database-metadata';
+import { createCustomTypesFromMetadata } from './custom-types';
+import { createRelationshipsFromMetadata } from './relationships';
+import { createTablesFromMetadata } from './tables';
+import { createDependenciesFromMetadata } from './dependencies';
+
+export const loadFromDatabaseMetadata = async ({
+    databaseType,
+    databaseMetadata,
+    diagramNumber,
+    databaseEdition,
+}: {
+    databaseType: DatabaseType;
+    databaseMetadata: DatabaseMetadata;
+    diagramNumber?: number;
+    databaseEdition?: DatabaseEdition;
+}): Promise<Diagram> => {
+    const {
+        fk_info: foreignKeys,
+        views: views,
+        custom_types: customTypes,
+    } = databaseMetadata;
+
+    const tables = createTablesFromMetadata({
+        databaseMetadata,
+        databaseType,
+    });
+
+    const relationships = createRelationshipsFromMetadata({
+        foreignKeys,
+        tables,
+    });
+
+    const dependencies = await createDependenciesFromMetadata({
+        views,
+        tables,
+        databaseType,
+    });
+
+    const dbCustomTypes = customTypes
+        ? createCustomTypesFromMetadata({
+              customTypes,
+          })
+        : [];
+
+    const adjustedTables = adjustTablePositions({
+        tables,
+        relationships,
+        mode: 'perSchema',
+    });
+
+    const sortedTables = adjustedTables.sort((a, b) => {
+        if (a.isView === b.isView) {
+            // Both are either tables or views, so sort alphabetically by name
+            return a.name.localeCompare(b.name);
+        }
+        // If one is a view and the other is not, put tables first
+        return a.isView ? 1 : -1;
+    });
+
+    const diagram: Diagram = {
+        id: generateDiagramId(),
+        name: databaseMetadata.database_name
+            ? `${databaseMetadata.database_name}-db`
+            : diagramNumber
+              ? `Diagram ${diagramNumber}`
+              : 'New Diagram',
+        databaseType: databaseType ?? DatabaseType.GENERIC,
+        databaseEdition,
+        tables: sortedTables,
+        relationships,
+        dependencies,
+        customTypes: dbCustomTypes,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+    };
+
+    return diagram;
+};

src/lib/data/import-metadata/import/indexes.ts

@@ -0,0 +1,24 @@
+import type { DBField, DBIndex, IndexType } from '@/lib/domain';
+import type { AggregatedIndexInfo } from '../metadata-types/index-info';
+import { generateId } from '@/lib/utils';
+
+export const createIndexesFromMetadata = ({
+    aggregatedIndexes,
+    fields,
+}: {
+    aggregatedIndexes: AggregatedIndexInfo[];
+    fields: DBField[];
+}): DBIndex[] =>
+    aggregatedIndexes.map(
+        (idx): DBIndex => ({
+            id: generateId(),
+            name: idx.name,
+            unique: Boolean(idx.unique),
+            fieldIds: idx.columns
+                .sort((a, b) => a.position - b.position)
+                .map((c) => fields.find((f) => f.name === c.name)?.id)
+                .filter((id): id is string => id !== undefined),
+            createdAt: Date.now(),
+            type: idx.index_type?.toLowerCase() as IndexType,
+        })
+    );

src/lib/data/import-metadata/import/relationships.ts

@@ -0,0 +1,85 @@
+import type {
+    Cardinality,
+    DBField,
+    DBRelationship,
+    DBTable,
+} from '@/lib/domain';
+import { schemaNameToDomainSchemaName } from '@/lib/domain';
+import type { ForeignKeyInfo } from '../metadata-types/foreign-key-info';
+import { generateId } from '@/lib/utils';
+
+const determineCardinality = (
+    field: DBField,
+    isTablePKComplex: boolean
+): Cardinality => {
+    return field.unique || (field.primaryKey && !isTablePKComplex)
+        ? 'one'
+        : 'many';
+};
+
+export const createRelationshipsFromMetadata = ({
+    foreignKeys,
+    tables,
+}: {
+    foreignKeys: ForeignKeyInfo[];
+    tables: DBTable[];
+}): DBRelationship[] => {
+    return foreignKeys
+        .map((fk: ForeignKeyInfo): DBRelationship | null => {
+            const schema = schemaNameToDomainSchemaName(fk.schema);
+            const sourceTable = tables.find(
+                (table) => table.name === fk.table && table.schema === schema
+            );
+
+            const targetSchema = schemaNameToDomainSchemaName(
+                fk.reference_schema
+            );
+
+            const targetTable = tables.find(
+                (table) =>
+                    table.name === fk.reference_table &&
+                    table.schema === targetSchema
+            );
+            const sourceField = sourceTable?.fields.find(
+                (field) => field.name === fk.column
+            );
+            const targetField = targetTable?.fields.find(
+                (field) => field.name === fk.reference_column
+            );
+
+            const isSourceTablePKComplex =
+                (sourceTable?.fields.filter((field) => field.primaryKey) ?? [])
+                    .length > 1;
+            const isTargetTablePKComplex =
+                (targetTable?.fields.filter((field) => field.primaryKey) ?? [])
+                    .length > 1;
+
+            if (sourceTable && targetTable && sourceField && targetField) {
+                const sourceCardinality = determineCardinality(
+                    sourceField,
+                    isSourceTablePKComplex
+                );
+                const targetCardinality = determineCardinality(
+                    targetField,
+                    isTargetTablePKComplex
+                );
+
+                return {
+                    id: generateId(),
+                    name: fk.foreign_key_name,
+                    sourceSchema: schema,
+                    targetSchema: targetSchema,
+                    sourceTableId: sourceTable.id,
+                    targetTableId: targetTable.id,
+                    sourceFieldId: sourceField.id,
+                    targetFieldId: targetField.id,
+                    sourceCardinality,
+                    targetCardinality,
+                    createdAt: Date.now(),
+                };
+            }
+
+            return null;
+        })
+        .filter((rel) => rel !== null) as DBRelationship[];
+};

src/lib/data/import-metadata/import/tables.ts

@@ -0,0 +1,228 @@
+import type { DBIndex, DBTable } from '@/lib/domain';
+import {
+    DatabaseType,
+    generateTableKey,
+    schemaNameToDomainSchemaName,
+} from '@/lib/domain';
+import type { DatabaseMetadata } from '../metadata-types/database-metadata';
+import type { TableInfo } from '../metadata-types/table-info';
+import { createAggregatedIndexes } from '../metadata-types/index-info';
+import {
+    decodeBase64ToUtf16LE,
+    decodeBase64ToUtf8,
+    generateId,
+} from '@/lib/utils';
+import {
+    defaultTableColor,
+    materializedViewColor,
+    viewColor,
+} from '@/lib/colors';
+import { createFieldsFromMetadata } from './fields';
+import { createIndexesFromMetadata } from './indexes';
+
+export const decodeViewDefinition = (
+    databaseType: DatabaseType,
+    viewDefinition?: string
+): string => {
+    if (!viewDefinition) {
+        return '';
+    }
+
+    let decodedViewDefinition: string;
+    if (databaseType === DatabaseType.SQL_SERVER) {
+        decodedViewDefinition = decodeBase64ToUtf16LE(viewDefinition);
+    } else {
+        decodedViewDefinition = decodeBase64ToUtf8(viewDefinition);
+    }
+
+    return decodedViewDefinition;
+};
+
+export const createTablesFromMetadata = ({
+    databaseMetadata,
+    databaseType,
+}: {
+    databaseMetadata: DatabaseMetadata;
+    databaseType: DatabaseType;
+}): DBTable[] => {
+    const {
+        tables: tableInfos,
+        pk_info: primaryKeys,
+        columns,
+        indexes,
+        views: views,
+    } = databaseMetadata;
+
+    // Pre-compute view names for faster lookup if there are views
+    const viewNamesSet = new Set<string>();
+    const materializedViewNamesSet = new Set<string>();
+
+    if (views && views.length > 0) {
+        views.forEach((view) => {
+            const key = generateTableKey({
+                schemaName: view.schema,
+                tableName: view.view_name,
+            });
+            viewNamesSet.add(key);
+
+            if (
+                view.view_definition &&
+                decodeViewDefinition(databaseType, view.view_definition)
+                    .toLowerCase()
+                    .includes('materialized')
+            ) {
+                materializedViewNamesSet.add(key);
+            }
+        });
+    }
+
+    // Pre-compute lookup maps for better performance
+    const columnsByTable = new Map<string, (typeof columns)[0][]>();
+    const indexesByTable = new Map<string, (typeof indexes)[0][]>();
+    const primaryKeysByTable = new Map<string, (typeof primaryKeys)[0][]>();
+
+    // Group columns by table
+    columns.forEach((col) => {
+        const key = generateTableKey({
+            schemaName: col.schema,
+            tableName: col.table,
+        });
+        if (!columnsByTable.has(key)) {
+            columnsByTable.set(key, []);
+        }
+        columnsByTable.get(key)!.push(col);
+    });
+
+    // Group indexes by table
+    indexes.forEach((idx) => {
+        const key = generateTableKey({
+            schemaName: idx.schema,
+            tableName: idx.table,
+        });
+        if (!indexesByTable.has(key)) {
+            indexesByTable.set(key, []);
+        }
+        indexesByTable.get(key)!.push(idx);
+    });
+
+    // Group primary keys by table
+    primaryKeys.forEach((pk) => {
+        const key = generateTableKey({
+            schemaName: pk.schema,
+            tableName: pk.table,
+        });
+        if (!primaryKeysByTable.has(key)) {
+            primaryKeysByTable.set(key, []);
+        }
+        primaryKeysByTable.get(key)!.push(pk);
+    });
+
+    const result = tableInfos.map((tableInfo: TableInfo) => {
+        const tableSchema = schemaNameToDomainSchemaName(tableInfo.schema);
+        const tableKey = generateTableKey({
+            schemaName: tableInfo.schema,
+            tableName: tableInfo.table,
+        });
+
+        // Use pre-computed lookups instead of filtering entire arrays
+        const tableIndexes = indexesByTable.get(tableKey) || [];
+        const tablePrimaryKeys = primaryKeysByTable.get(tableKey) || [];
+        const tableColumns = columnsByTable.get(tableKey) || [];
+
+        // Aggregate indexes with multiple columns
+        const aggregatedIndexes = createAggregatedIndexes({
+            tableInfo,
+            tableSchema,
+            tableIndexes,
+        });
+
+        const fields = createFieldsFromMetadata({
+            aggregatedIndexes,
+            tableColumns,
+            tablePrimaryKeys,
+            tableInfo,
+            tableSchema,
+        });
+
+        // Check for composite primary key and find matching index name
+        const primaryKeyFields = fields.filter((f) => f.primaryKey);
+        let pkMatchingIndexName: string | undefined;
+        let pkIndex: DBIndex | undefined;
+
+        if (primaryKeyFields.length >= 1) {
+            // We have a composite primary key, look for an index that matches all PK columns
+            const pkFieldNames = primaryKeyFields.map((f) => f.name).sort();
+
+            // Find an index that matches the primary key columns exactly
+            const matchingIndex = aggregatedIndexes.find((index) => {
+                const indexColumnNames = index.columns
+                    .map((c) => c.name)
+                    .sort();
+                return (
+                    indexColumnNames.length === pkFieldNames.length &&
+                    indexColumnNames.every((col, i) => col === pkFieldNames[i])
+                );
+            });
+
+            if (matchingIndex) {
+                pkMatchingIndexName = matchingIndex.name;
+                // Create a special PK index
+                pkIndex = {
+                    id: generateId(),
+                    name: matchingIndex.name,
+                    unique: true,
+                    fieldIds: primaryKeyFields.map((f) => f.id),
+                    createdAt: Date.now(),
+                    isPrimaryKey: true,
+                };
+            }
+        }
+
+        // Filter out the index that matches the composite PK (to avoid duplication)
+        const filteredAggregatedIndexes = pkMatchingIndexName
+            ? aggregatedIndexes.filter(
+                  (idx) => idx.name !== pkMatchingIndexName
+              )
+            : aggregatedIndexes;
+
+        const dbIndexes = createIndexesFromMetadata({
+            aggregatedIndexes: filteredAggregatedIndexes,
+            fields,
+        });
+
+        // Add the PK index if it exists
+        if (pkIndex) {
+            dbIndexes.push(pkIndex);
+        }
+
+        // Determine if the current table is a view by checking against pre-computed sets
+        const viewKey = generateTableKey({
+            schemaName: tableSchema,
+            tableName: tableInfo.table,
+        });
+        const isView = viewNamesSet.has(viewKey);
+        const isMaterializedView = materializedViewNamesSet.has(viewKey);
+
+        // Initial random positions; these will be adjusted later
+        return {
+            id: generateId(),
+            name: tableInfo.table,
+            schema: tableSchema,
+            x: Math.random() * 1000, // Placeholder X
+            y: Math.random() * 800, // Placeholder Y
+            fields,
+            indexes: dbIndexes,
+            color: isMaterializedView
+                ? materializedViewColor
+                : isView
+                  ? viewColor
+                  : defaultTableColor,
+            isView: isView,
+            isMaterializedView: isMaterializedView,
+            createdAt: Date.now(),
+            comments: tableInfo.comment ? tableInfo.comment : undefined,
+        };
+    });
+
+    return result;
+};

src/lib/data/import-metadata/metadata-types/column-info.ts

@@ -15,6 +15,7 @@ export interface ColumnInfo {
     default?: string | null; // Default value for the column, nullable
     collation?: string | null;
     comment?: string | null;
+    is_identity?: boolean; // Indicates if the column is auto-increment/identity
 }
 
 export const ColumnInfoSchema: z.ZodType<ColumnInfo> = z.object({
@@ -35,4 +36,5 @@ export const ColumnInfoSchema: z.ZodType<ColumnInfo> = z.object({
     default: z.string().nullable().optional(),
     collation: z.string().nullable().optional(),
     comment: z.string().nullable().optional(),
+    is_identity: z.boolean().optional(),
 });

src/lib/data/import-metadata/scripts/cockroachdb-script.ts

@@ -127,7 +127,13 @@ cols AS (
                                             ',"default":"', null,
                                             '","collation":"', COALESCE(cols.COLLATION_NAME::TEXT, ''),
                                             '","comment":"', COALESCE(replace(replace(dsc.description::TEXT, '"', '\\"'), '\\x', '\\\\x'), ''),
-                                            '"}')), ',') AS cols_metadata
+                                            '","is_identity":', CASE 
+                                                WHEN cols.is_identity = 'YES' THEN 'true'
+                                                WHEN cols.column_default IS NOT NULL AND cols.column_default LIKE 'nextval(%' THEN 'true'
+                                                WHEN cols.column_default LIKE 'unique_rowid()%' THEN 'true'
+                                                ELSE 'false'
+                                            END,
+                                            '}')), ',') AS cols_metadata
     FROM information_schema.columns cols
     LEFT JOIN pg_catalog.pg_class c
         ON c.relname = cols.table_name

src/lib/data/import-metadata/scripts/maria-script.ts

@@ -69,7 +69,9 @@ SELECT CAST(CONCAT(
                ',"ordinal_position":', cols.ordinal_position,
                ',"nullable":', IF(cols.is_nullable = 'YES', 'true', 'false'),
                ',"default":"', ${withExtras ? withDefault : withoutDefault},
-               '","collation":"', IFNULL(cols.collation_name, ''), '"}')
+               '","collation":"', IFNULL(cols.collation_name, ''),
+               '","is_identity":', IF(cols.extra LIKE '%auto_increment%', 'true', 'false'),
+               '"}')
     ) FROM (
         SELECT cols.table_schema,
                cols.table_name,
@@ -81,7 +83,8 @@ SELECT CAST(CONCAT(
                cols.ordinal_position,
                cols.is_nullable,
                cols.column_default,
-               cols.collation_name
+               cols.collation_name,
+               cols.extra
         FROM information_schema.columns cols
         WHERE cols.table_schema = DATABASE()
     ) AS cols), ''),

src/lib/data/import-metadata/scripts/mysql-script.ts

@@ -92,7 +92,9 @@ export const getMySQLQuery = (
                 ',"ordinal_position":', cols.ordinal_position,
                 ',"nullable":', IF(cols.is_nullable = 'YES', 'true', 'false'),
                 ',"default":"', ${withExtras ? withDefault : withoutDefault},
-                '","collation":"', IFNULL(cols.collation_name, ''), '"}'
+                '","collation":"', IFNULL(cols.collation_name, ''),
+                '","is_identity":', IF(cols.extra LIKE '%auto_increment%', 'true', 'false'),
+                '}'
             )))))
 ), indexes as (
   (SELECT (@indexes:=NULL),

src/lib/data/import-metadata/scripts/postgres-script.ts

@@ -194,7 +194,12 @@ cols AS (
                                             ',"default":"', ${withExtras ? withDefault : withoutDefault},
                                             '","collation":"', COALESCE(cols.COLLATION_NAME, ''),
                                             '","comment":"', ${withExtras ? withComments : withoutComments},
-                                            '"}')), ',') AS cols_metadata
+                                            '","is_identity":', CASE 
+                                                WHEN cols.is_identity = 'YES' THEN 'true'
+                                                WHEN cols.column_default IS NOT NULL AND cols.column_default LIKE 'nextval(%' THEN 'true'
+                                                ELSE 'false'
+                                            END,
+                                            '}')), ',') AS cols_metadata
     FROM information_schema.columns cols
     LEFT JOIN pg_catalog.pg_class c
         ON c.relname = cols.table_name

src/lib/data/import-metadata/scripts/sqlite-script.ts

@@ -119,7 +119,13 @@ WITH fk_info AS (
                       END
                   ELSE null
               END,
-              'default', ${withExtras ? withDefault : withoutDefault}
+              'default', ${withExtras ? withDefault : withoutDefault},
+              'is_identity', 
+              CASE 
+                  WHEN p.pk = 1 AND LOWER(p.type) LIKE '%int%' THEN json('true')
+                  WHEN LOWER((SELECT sql FROM sqlite_master WHERE name = m.name)) LIKE '%' || p.name || '%autoincrement%' THEN json('true')
+                  ELSE json('false')
+              END
           )
       ) AS cols_metadata
   FROM
@@ -292,7 +298,13 @@ WITH fk_info AS (
                       END
                   ELSE null
               END,
-              'default', ${withExtras ? withDefault : withoutDefault}
+              'default', ${withExtras ? withDefault : withoutDefault},
+              'is_identity', 
+              CASE 
+                  WHEN p.pk = 1 AND LOWER(p.type) LIKE '%int%' THEN json('true')
+                  WHEN LOWER((SELECT sql FROM sqlite_master WHERE name = m.name)) LIKE '%' || p.name || '%autoincrement%' THEN json('true')
+                  ELSE json('false')
+              END
           )
       ) AS cols_metadata
   FROM

src/lib/data/import-metadata/scripts/sqlserver-script.ts

@@ -91,6 +91,11 @@ cols AS (
                             WHEN cols.COLLATION_NAME IS NULL THEN 'null'
                             ELSE '"' + STRING_ESCAPE(cols.COLLATION_NAME, 'json') + '"'
                         END +
+                        ', "is_identity": ' + CASE 
+                            WHEN COLUMNPROPERTY(OBJECT_ID(cols.TABLE_SCHEMA + '.' + cols.TABLE_NAME), cols.COLUMN_NAME, 'IsIdentity') = 1 
+                            THEN 'true' 
+                            ELSE 'false' 
+                        END +
                     N'}') COLLATE DATABASE_DEFAULT
                 ), N','
             ) +

src/lib/data/sql-export/__tests__/array-fields.test.ts

@@ -0,0 +1,356 @@
+import { describe, it, expect } from 'vitest';
+import { generateId } from '@/lib/utils';
+import { exportBaseSQL } from '../export-sql-script';
+import { DatabaseType } from '@/lib/domain/database-type';
+import type { Diagram } from '@/lib/domain/diagram';
+
+describe('SQL Export - Array Fields (Fantasy RPG Theme)', () => {
+    it('should export array fields for magical spell components', () => {
+        const diagram: Diagram = {
+            id: 'test-diagram',
+            name: 'Magical Spell System',
+            databaseType: DatabaseType.POSTGRESQL,
+            tables: [
+                {
+                    id: generateId(),
+                    name: 'spells',
+                    schema: '',
+                    fields: [
+                        {
+                            id: generateId(),
+                            name: 'id',
+                            type: { id: 'uuid', name: 'uuid' },
+                            primaryKey: true,
+                            unique: true,
+                            nullable: false,
+                            createdAt: Date.now(),
+                        },
+                        {
+                            id: generateId(),
+                            name: 'name',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: false,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '200',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'components',
+                            type: { id: 'text', name: 'text' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            isArray: true,
+                            comments: 'Magical components needed for the spell',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'elemental_types',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '50',
+                            isArray: true,
+                            comments:
+                                'Elements involved: fire, water, earth, air',
+                        },
+                    ],
+                    indexes: [],
+                    x: 0,
+                    y: 0,
+                    color: '#3b82f6',
+                    isView: false,
+                    createdAt: Date.now(),
+                    order: 0,
+                },
+            ],
+            relationships: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+
+        const sql = exportBaseSQL({
+            diagram,
+            targetDatabaseType: DatabaseType.POSTGRESQL,
+            isDBMLFlow: true,
+        });
+
+        expect(sql).toContain('CREATE TABLE "spells"');
+        expect(sql).toContain('"components" text[]');
+        expect(sql).toContain('"elemental_types" varchar(50)[]');
+    });
+
+    it('should export array fields for hero inventory system', () => {
+        const diagram: Diagram = {
+            id: 'test-diagram',
+            name: 'RPG Inventory System',
+            databaseType: DatabaseType.POSTGRESQL,
+            tables: [
+                {
+                    id: generateId(),
+                    name: 'heroes',
+                    schema: 'game',
+                    fields: [
+                        {
+                            id: generateId(),
+                            name: 'id',
+                            type: { id: 'bigint', name: 'bigint' },
+                            primaryKey: true,
+                            unique: true,
+                            nullable: false,
+                            createdAt: Date.now(),
+                        },
+                        {
+                            id: generateId(),
+                            name: 'name',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: false,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '100',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'abilities',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '100',
+                            isArray: true,
+                            comments:
+                                'Special abilities like Stealth, Fireball, etc',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'inventory_slots',
+                            type: { id: 'integer', name: 'integer' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            isArray: true,
+                            comments: 'Item IDs in inventory',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'skill_levels',
+                            type: { id: 'decimal', name: 'decimal' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            precision: 5,
+                            scale: 2,
+                            isArray: true,
+                            comments: 'Skill proficiency levels',
+                        },
+                    ],
+                    indexes: [],
+                    x: 0,
+                    y: 0,
+                    color: '#ef4444',
+                    isView: false,
+                    createdAt: Date.now(),
+                    order: 0,
+                },
+            ],
+            relationships: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+
+        const sql = exportBaseSQL({
+            diagram,
+            targetDatabaseType: DatabaseType.POSTGRESQL,
+            isDBMLFlow: true,
+        });
+
+        expect(sql).toContain('CREATE TABLE "game"."heroes"');
+        expect(sql).toContain('"abilities" varchar(100)[]');
+        expect(sql).toContain('"inventory_slots" integer[]');
+        expect(sql).toContain('"skill_levels" decimal(5, 2)[]');
+    });
+
+    it('should export non-array fields normally when isArray is false or undefined', () => {
+        const diagram: Diagram = {
+            id: 'test-diagram',
+            name: 'Quest System',
+            databaseType: DatabaseType.POSTGRESQL,
+            tables: [
+                {
+                    id: generateId(),
+                    name: 'quests',
+                    schema: '',
+                    fields: [
+                        {
+                            id: generateId(),
+                            name: 'id',
+                            type: { id: 'uuid', name: 'uuid' },
+                            primaryKey: true,
+                            unique: true,
+                            nullable: false,
+                            createdAt: Date.now(),
+                        },
+                        {
+                            id: generateId(),
+                            name: 'title',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: false,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '200',
+                            isArray: false,
+                        },
+                        {
+                            id: generateId(),
+                            name: 'description',
+                            type: { id: 'text', name: 'text' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            // isArray is undefined - should not be treated as array
+                        },
+                    ],
+                    indexes: [],
+                    x: 0,
+                    y: 0,
+                    color: '#8b5cf6',
+                    isView: false,
+                    createdAt: Date.now(),
+                    order: 0,
+                },
+            ],
+            relationships: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+
+        const sql = exportBaseSQL({
+            diagram,
+            targetDatabaseType: DatabaseType.POSTGRESQL,
+            isDBMLFlow: true,
+        });
+
+        expect(sql).toContain('"title" varchar(200)');
+        expect(sql).not.toContain('"title" varchar(200)[]');
+        expect(sql).toContain('"description" text');
+        expect(sql).not.toContain('"description" text[]');
+    });
+
+    it('should handle mixed array and non-array fields in magical creatures table', () => {
+        const diagram: Diagram = {
+            id: 'test-diagram',
+            name: 'Bestiary System',
+            databaseType: DatabaseType.POSTGRESQL,
+            tables: [
+                {
+                    id: generateId(),
+                    name: 'magical_creatures',
+                    schema: 'bestiary',
+                    fields: [
+                        {
+                            id: generateId(),
+                            name: 'id',
+                            type: { id: 'bigint', name: 'bigint' },
+                            primaryKey: true,
+                            unique: true,
+                            nullable: false,
+                            createdAt: Date.now(),
+                        },
+                        {
+                            id: generateId(),
+                            name: 'species_name',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: false,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '100',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'habitats',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '80',
+                            isArray: true,
+                            comments:
+                                'Preferred habitats: forest, mountain, swamp',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'danger_level',
+                            type: { id: 'integer', name: 'integer' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: false,
+                            createdAt: Date.now(),
+                            default: '1',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'resistances',
+                            type: { id: 'varchar', name: 'varchar' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: true,
+                            createdAt: Date.now(),
+                            characterMaximumLength: '50',
+                            isArray: true,
+                            comments: 'Damage resistances',
+                        },
+                        {
+                            id: generateId(),
+                            name: 'is_tameable',
+                            type: { id: 'boolean', name: 'boolean' },
+                            primaryKey: false,
+                            unique: false,
+                            nullable: false,
+                            createdAt: Date.now(),
+                            default: 'false',
+                        },
+                    ],
+                    indexes: [],
+                    x: 0,
+                    y: 0,
+                    color: '#10b981',
+                    isView: false,
+                    createdAt: Date.now(),
+                    order: 0,
+                },
+            ],
+            relationships: [],
+            createdAt: new Date(),
+            updatedAt: new Date(),
+        };
+
+        const sql = exportBaseSQL({
+            diagram,
+            targetDatabaseType: DatabaseType.POSTGRESQL,
+            isDBMLFlow: true,
+        });
+
+        expect(sql).toContain('CREATE TABLE "bestiary"."magical_creatures"');
+        expect(sql).toContain('"species_name" varchar(100)');
+        expect(sql).not.toContain('"species_name" varchar(100)[]');
+        expect(sql).toContain('"habitats" varchar(80)[]');
+        expect(sql).toContain('"danger_level" integer');
+        expect(sql).not.toContain('"danger_level" integer[]');
+        expect(sql).toContain('"resistances" varchar(50)[]');
+        expect(sql).toContain('"is_tameable" boolean');
+        expect(sql).not.toContain('"is_tameable" boolean[]');
+    });
+});

src/lib/data/sql-export/__tests__/export-sql-dbml.test.ts

@@ -1,20 +1,10 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { exportBaseSQL } from '../export-sql-script';
 import { DatabaseType } from '@/lib/domain/database-type';
 import type { Diagram } from '@/lib/domain/diagram';
 import type { DBTable } from '@/lib/domain/db-table';
 import type { DBField } from '@/lib/domain/db-field';
 
-// Mock the dbml/core importer
-vi.mock('@dbml/core', () => ({
-    importer: {
-        import: vi.fn((sql: string) => {
-            // Return a simplified DBML for testing
-            return sql;
-        }),
-    },
-}));
-
 describe('DBML Export - SQL Generation Tests', () => {
     // Helper to generate test IDs and timestamps
     let idCounter = 0;
@@ -116,7 +106,7 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should contain composite primary key syntax
-            expect(sql).toContain('PRIMARY KEY (spell_id, component_id)');
+            expect(sql).toContain('PRIMARY KEY ("spell_id", "component_id")');
             // Should NOT contain individual PRIMARY KEY constraints
             expect(sql).not.toMatch(/spell_id\s+uuid\s+NOT NULL\s+PRIMARY KEY/);
             expect(sql).not.toMatch(
@@ -124,6 +114,96 @@ describe('DBML Export - SQL Generation Tests', () => {
             );
         });
 
+        it('should not create duplicate index for composite primary key', () => {
+            const tableId = testId();
+            const field1Id = testId();
+            const field2Id = testId();
+            const field3Id = testId();
+
+            const diagram: Diagram = createDiagram({
+                id: testId(),
+                name: 'Landlord System',
+                databaseType: DatabaseType.POSTGRESQL,
+                tables: [
+                    createTable({
+                        id: tableId,
+                        name: 'users_master_table',
+                        schema: 'landlord',
+                        fields: [
+                            createField({
+                                id: field1Id,
+                                name: 'master_user_id',
+                                type: { id: 'bigint', name: 'bigint' },
+                                primaryKey: true,
+                                nullable: false,
+                                unique: false,
+                            }),
+                            createField({
+                                id: field2Id,
+                                name: 'tenant_id',
+                                type: { id: 'bigint', name: 'bigint' },
+                                primaryKey: true,
+                                nullable: false,
+                                unique: false,
+                            }),
+                            createField({
+                                id: field3Id,
+                                name: 'tenant_user_id',
+                                type: { id: 'bigint', name: 'bigint' },
+                                primaryKey: true,
+                                nullable: false,
+                                unique: false,
+                            }),
+                            createField({
+                                id: testId(),
+                                name: 'enabled',
+                                type: { id: 'boolean', name: 'boolean' },
+                                primaryKey: false,
+                                nullable: true,
+                                unique: false,
+                            }),
+                        ],
+                        indexes: [
+                            {
+                                id: testId(),
+                                name: 'idx_users_master_table_master_user_id_tenant_id_tenant_user_id',
+                                unique: false,
+                                fieldIds: [field1Id, field2Id, field3Id],
+                                createdAt: testTime,
+                            },
+                            {
+                                id: testId(),
+                                name: 'index_1',
+                                unique: true,
+                                fieldIds: [field2Id, field3Id],
+                                createdAt: testTime,
+                            },
+                        ],
+                    }),
+                ],
+                relationships: [],
+            });
+
+            const sql = exportBaseSQL({
+                diagram,
+                targetDatabaseType: DatabaseType.POSTGRESQL,
+                isDBMLFlow: true,
+            });
+
+            // Should contain composite primary key constraint
+            expect(sql).toContain(
+                'PRIMARY KEY ("master_user_id", "tenant_id", "tenant_user_id")'
+            );
+
+            // Should NOT contain the duplicate index for the primary key fields
+            expect(sql).not.toContain(
+                'CREATE INDEX idx_users_master_table_master_user_id_tenant_id_tenant_user_id'
+            );
+
+            // Should still contain the unique index on subset of fields
+            expect(sql).toContain('CREATE UNIQUE INDEX index_1');
+        });
+
         it('should handle single primary keys inline', () => {
             const diagram: Diagram = createDiagram({
                 id: testId(),
@@ -165,7 +245,7 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should contain inline PRIMARY KEY
-            expect(sql).toMatch(/id\s+uuid\s+NOT NULL\s+PRIMARY KEY/);
+            expect(sql).toMatch(/"id"\s+uuid\s+NOT NULL\s+PRIMARY KEY/);
             // Should NOT contain separate PRIMARY KEY constraint
             expect(sql).not.toContain('PRIMARY KEY (id)');
         });
@@ -226,8 +306,8 @@ describe('DBML Export - SQL Generation Tests', () => {
             expect(sql).not.toContain('DEFAULT has default');
             expect(sql).not.toContain('DEFAULT DEFAULT has default');
             // The fields should still be in the table
-            expect(sql).toContain('is_active boolean');
-            expect(sql).toContain('stock_count integer NOT NULL'); // integer gets simplified to int
+            expect(sql).toContain('"is_active" boolean');
+            expect(sql).toContain('"stock_count" integer NOT NULL'); // integer gets simplified to int
         });
 
         it('should handle valid default values correctly', () => {
@@ -349,8 +429,8 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should convert NOW to NOW() and ('now') to now()
-            expect(sql).toContain('created_at timestamp DEFAULT NOW');
-            expect(sql).toContain('updated_at timestamp DEFAULT now()');
+            expect(sql).toContain('"created_at" timestamp DEFAULT NOW');
+            expect(sql).toContain('"updated_at" timestamp DEFAULT now()');
         });
     });
 
@@ -405,9 +485,9 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should handle char with explicit length
-            expect(sql).toContain('element_code char(2)');
+            expect(sql).toContain('"element_code" char(2)');
             // Should add default length for char without length
-            expect(sql).toContain('status char(1)');
+            expect(sql).toContain('"status" char(1)');
         });
 
         it('should not have spaces between char and parentheses', () => {
@@ -516,7 +596,7 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should create a valid table without primary key
-            expect(sql).toContain('CREATE TABLE experiment_logs');
+            expect(sql).toContain('CREATE TABLE "experiment_logs"');
             expect(sql).not.toContain('PRIMARY KEY');
         });
 
@@ -631,11 +711,11 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should create both tables
-            expect(sql).toContain('CREATE TABLE guilds');
-            expect(sql).toContain('CREATE TABLE guild_members');
+            expect(sql).toContain('CREATE TABLE "guilds"');
+            expect(sql).toContain('CREATE TABLE "guild_members"');
             // Should create foreign key
             expect(sql).toContain(
-                'ALTER TABLE guild_members ADD CONSTRAINT fk_guild_members_guild FOREIGN KEY (guild_id) REFERENCES guilds (id)'
+                'ALTER TABLE "guild_members" ADD CONSTRAINT fk_guild_members_guild FOREIGN KEY ("guild_id") REFERENCES "guilds" ("id");'
             );
         });
     });
@@ -709,12 +789,9 @@ describe('DBML Export - SQL Generation Tests', () => {
                 isDBMLFlow: true,
             });
 
-            // Should create schemas
-            expect(sql).toContain('CREATE SCHEMA IF NOT EXISTS transportation');
-            expect(sql).toContain('CREATE SCHEMA IF NOT EXISTS magic');
             // Should use schema-qualified table names
-            expect(sql).toContain('CREATE TABLE transportation.portals');
-            expect(sql).toContain('CREATE TABLE magic.spells');
+            expect(sql).toContain('CREATE TABLE "transportation"."portals"');
+            expect(sql).toContain('CREATE TABLE "magic"."spells"');
         });
     });
 
@@ -761,7 +838,7 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should still create table structure
-            expect(sql).toContain('CREATE TABLE empty_table');
+            expect(sql).toContain('CREATE TABLE "empty_table"');
             expect(sql).toContain('(\n\n)');
         });
 
@@ -862,9 +939,9 @@ describe('DBML Export - SQL Generation Tests', () => {
             });
 
             // Should include precision and scale
-            expect(sql).toContain('amount numeric(15, 2)');
+            expect(sql).toContain('"amount" numeric(15, 2)');
             // Should include precision only when scale is not provided
-            expect(sql).toContain('interest_rate numeric(5)');
+            expect(sql).toContain('"interest_rate" numeric(5)');
         });
     });
 });

src/lib/data/sql-export/export-per-type/mssql.ts

@@ -156,11 +156,11 @@ export function exportMSSQL({
                         const notNull = field.nullable ? '' : ' NOT NULL';
 
                         // Check if identity column
-                        const identity = field.default
-                            ?.toLowerCase()
-                            .includes('identity')
-                            ? ' IDENTITY(1,1)'
-                            : '';
+                        const identity =
+                            field.increment ||
+                            field.default?.toLowerCase().includes('identity')
+                                ? ' IDENTITY(1,1)'
+                                : '';
 
                         const unique =
                             !field.primaryKey && field.unique ? ' UNIQUE' : '';
@@ -168,6 +168,7 @@ export function exportMSSQL({
                         // Handle default value using SQL Server specific parser
                         const defaultValue =
                             field.default &&
+                            !field.increment &&
                             !field.default.toLowerCase().includes('identity')
                                 ? ` DEFAULT ${parseMSSQLDefault(field)}`
                                 : '';
@@ -177,7 +178,15 @@ export function exportMSSQL({
                     })
                     .join(',\n')}${
                     table.fields.filter((f) => f.primaryKey).length > 0
-                        ? `,\n    PRIMARY KEY (${table.fields
+                        ? `,\n    ${(() => {
+                              // Find PK index to get the constraint name
+                              const pkIndex = table.indexes.find(
+                                  (idx) => idx.isPrimaryKey
+                              );
+                              return pkIndex?.name
+                                  ? `CONSTRAINT [${pkIndex.name}] `
+                                  : '';
+                          })()}PRIMARY KEY (${table.fields
                               .filter((f) => f.primaryKey)
                               .map((f) => `[${f.name}]`)
                               .join(', ')})`

src/lib/data/sql-export/export-per-type/mysql.ts

@@ -274,14 +274,15 @@ export function exportMySQL({
                         // Handle auto_increment - MySQL uses AUTO_INCREMENT keyword
                         let autoIncrement = '';
                         if (
-                            field.primaryKey &&
-                            (field.default
-                                ?.toLowerCase()
-                                .includes('identity') ||
-                                field.default
+                            field.increment ||
+                            (field.primaryKey &&
+                                (field.default
                                     ?.toLowerCase()
-                                    .includes('autoincrement') ||
-                                field.default?.includes('nextval'))
+                                    .includes('identity') ||
+                                    field.default
+                                        ?.toLowerCase()
+                                        .includes('autoincrement') ||
+                                    field.default?.includes('nextval')))
                         ) {
                             autoIncrement = ' AUTO_INCREMENT';
                         }
@@ -290,9 +291,10 @@ export function exportMySQL({
                         const unique =
                             !field.primaryKey && field.unique ? ' UNIQUE' : '';
 
-                        // Handle default value
+                        // Handle default value - skip if auto increment
                         const defaultValue =
                             field.default &&
+                            !field.increment &&
                             !field.default.toLowerCase().includes('identity') &&
                             !field.default
                                 .toLowerCase()
@@ -311,7 +313,15 @@ export function exportMySQL({
                     .join(',\n')}${
                     // Add PRIMARY KEY as table constraint
                     primaryKeyFields.length > 0
-                        ? `,\n    PRIMARY KEY (${primaryKeyFields
+                        ? `,\n    ${(() => {
+                              // Find PK index to get the constraint name
+                              const pkIndex = table.indexes.find(
+                                  (idx) => idx.isPrimaryKey
+                              );
+                              return pkIndex?.name
+                                  ? `CONSTRAINT \`${pkIndex.name}\` `
+                                  : '';
+                          })()}PRIMARY KEY (${primaryKeyFields
                               .map((f) => `\`${f.name}\``)
                               .join(', ')})`
                         : ''

src/lib/data/sql-export/export-per-type/postgresql.ts

@@ -325,7 +325,15 @@ export function exportPostgreSQL({
                     })
                     .join(',\n')}${
                     primaryKeyFields.length > 0
-                        ? `,\n    PRIMARY KEY (${primaryKeyFields
+                        ? `,\n    ${(() => {
+                              // Find PK index to get the constraint name
+                              const pkIndex = table.indexes.find(
+                                  (idx) => idx.isPrimaryKey
+                              );
+                              return pkIndex?.name
+                                  ? `CONSTRAINT "${pkIndex.name}" `
+                                  : '';
+                          })()}PRIMARY KEY (${primaryKeyFields
                               .map((f) => `"${f.name}"`)
                               .join(', ')})`
                         : ''
@@ -405,7 +413,7 @@ export function exportPostgreSQL({
                                     .filter(Boolean);
 
                                 return indexFieldNames.length > 0
-                                    ? `CREATE ${index.unique ? 'UNIQUE ' : ''}INDEX ${indexName} ON ${tableName} (${indexFieldNames.join(', ')});`
+                                    ? `CREATE ${index.unique ? 'UNIQUE ' : ''}INDEX ${indexName} ON ${tableName}${index.type && index.type !== 'btree' ? ` USING ${index.type.toUpperCase()}` : ''} (${indexFieldNames.join(', ')});`
                                     : '';
                             })
                             .filter(Boolean);

src/lib/data/sql-export/export-per-type/sqlite.ts

@@ -343,9 +343,10 @@ export function exportSQLite({
                         if (
                             field.primaryKey &&
                             singleIntegerPrimaryKey &&
-                            (field.default
-                                ?.toLowerCase()
-                                .includes('identity') ||
+                            (field.increment ||
+                                field.default
+                                    ?.toLowerCase()
+                                    .includes('identity') ||
                                 field.default
                                     ?.toLowerCase()
                                     .includes('autoincrement') ||
@@ -362,6 +363,7 @@ export function exportSQLite({
                         let defaultValue = '';
                         if (
                             field.default &&
+                            !field.increment &&
                             !field.default.toLowerCase().includes('identity') &&
                             !field.default
                                 .toLowerCase()