From 0a95ef2a97f91a77a530bce5d12a48fa0b92d0a3 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 01/27] feat(motion): add shared easing tokens and
 reduce-motion handling

---
 src/app.css | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/app.css b/src/app.css
index 73e4afea..9553809c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,6 +21,13 @@
      "editor font" and everything else. JetBrains Mono is a true code typeface:
      heavier, even rhythm, designed ligatures. */
   --editor-font-family: "JetBrains Mono Variable", "Geist Mono Variable", ui-monospace, monospace;
+  /* Motion tokens — stronger-than-default curves (Emil Kowalski). These override
+     Tailwind's built-in --ease-out / --ease-in-out so the `ease-out` / `ease-in-out`
+     utilities (and tw-animate-css enter/exit keyframes, which read --tw-ease) all
+     inherit the punchier curves. Only transform/opacity should ride these. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 /* JSON colorizer tokens (highlightJson) — dark-friendly defaults, light override
@@ -100,6 +107,28 @@ html[data-os="linux"]   { --window-radius: 8px; }
     @apply border-border outline-ring/50;
   }
 
+  /* Reduced motion — reduced, not zero (Emil / WCAG). Keep opacity + colour
+     fades that aid comprehension; strip movement. Neutralising tw-animate-css's
+     enter/exit transform vars makes overlays fade in place instead of
+     sliding/zooming, and clamping durations keeps any remaining transition brief. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      --tw-enter-translate-x: 0 !important;
+      --tw-enter-translate-y: 0 !important;
+      --tw-exit-translate-x: 0 !important;
+      --tw-exit-translate-y: 0 !important;
+      --tw-enter-scale: 1 !important;
+      --tw-exit-scale: 1 !important;
+      --tw-enter-rotate: 0 !important;
+      --tw-exit-rotate: 0 !important;
+      animation-duration: 0.12s !important;
+      transition-duration: 0.12s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
   /* Disable OS word suggestions, autocorrect, and spellcheck on all inputs. */
   input:not([type="file"]),
   textarea {

From eb2e0e24c33924c30bef02a0b6f6eafc09fe21f5 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 02/27] feat(ui): add press feedback to buttons

---
 src/lib/components/ui/button/button.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 0174c978..49f9a3bf 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -3,14 +3,14 @@
 	import { tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[transform,color,background-color,border-color,box-shadow] duration-150 ease-out outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80 active:scale-[0.97]",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground active:scale-[0.97]",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground active:scale-[0.97]",
 				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30 active:scale-[0.97]",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {

From 99f0af7b7bffac2cd3117e3dde4c74b2bc529423 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 03/27] feat(ui): crisp single-ring input focus state

---
 src/lib/components/ui/input/input.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 23efba38..43fa6108 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -19,7 +19,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/25 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1 text-base transition-[color,box-shadow,border-color] hover:border-ring/40 file:h-6 file:text-sm file:font-medium focus-visible:ring-2 aria-invalid:ring-1 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/60 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1 text-base transition-[color,box-shadow,border-color] hover:border-ring/40 file:h-6 file:text-sm file:font-medium focus-visible:ring-1 aria-invalid:ring-1 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -32,7 +32,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/25 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1 text-base transition-[color,box-shadow,border-color] hover:border-ring/40 file:h-6 file:text-sm file:font-medium focus-visible:ring-2 aria-invalid:ring-1 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/60 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1 text-base transition-[color,box-shadow,border-color] hover:border-ring/40 file:h-6 file:text-sm file:font-medium focus-visible:ring-1 aria-invalid:ring-1 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}

From 9c05c3075983ba80a43d9f3dd9c01017c43c6b7f Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 04/27] feat(ui): origin-aware dropdown menu motion

---
 .../components/ui/dropdown-menu/dropdown-menu-content.svelte    | 2 +-
 .../ui/dropdown-menu/dropdown-menu-sub-content.svelte           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 16e9a960..4c1a53ba 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -19,7 +19,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border border-border/60 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-sm duration-100 data-[side=inline-start]:slide-in-from-right-1 data-[side=inline-end]:slide-in-from-left-1 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-open:zoom-in-[0.96] data-closed:zoom-out-[0.96] [transform-origin:var(--bits-floating-transform-origin)] ease-out duration-150 border border-border/60 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-sm z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 71871e3b..9e258a7d 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
-	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border border-border/60 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-sm duration-100 w-auto", className)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-open:zoom-in-[0.96] data-closed:zoom-out-[0.96] [transform-origin:var(--bits-floating-transform-origin)] ease-out duration-150 border border-border/60 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-sm w-auto", className)}
 	{...restProps}
 />
\ No newline at end of file

From 282d6bb91c6f7368ffb6f737099dc7c86d66844f Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 05/27] feat(ui): origin-aware select motion

---
 src/lib/components/ui/select/select-content.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
index d840440a..5eb19ad2 100644
--- a/src/lib/components/ui/select/select-content.svelte
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -22,7 +22,7 @@
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border border-border/60 min-w-36 rounded-lg shadow-sm duration-100 data-[side=inline-start]:slide-in-from-right-1 data-[side=inline-end]:slide-in-from-left-1 relative isolate z-50 overflow-x-hidden overflow-y-auto",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-open:zoom-in-[0.96] data-closed:zoom-out-[0.96] [transform-origin:var(--bits-floating-transform-origin)] ease-out duration-150 border border-border/60 min-w-36 rounded-lg shadow-sm relative isolate z-50 overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}

From 10b652545a15fbf7e1984044bfd4b7d440ee84f6 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 06/27] feat(ui): origin-aware popover motion

---
 src/lib/components/ui/popover/popover-content.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index e06c9a90..cd63f470 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -17,7 +17,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 z-50 rounded-lg border border-border/60 bg-popover p-0 shadow-sm outline-none duration-100",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-open:zoom-in-[0.96] data-closed:zoom-out-[0.96] [transform-origin:var(--bits-floating-transform-origin)] ease-out duration-150 z-50 rounded-lg border border-border/60 bg-popover p-0 shadow-sm outline-none",
 			className
 		)}
 		{...restProps}

From f4cb4412b35b137c69b173b376e4b3eee151f4f1 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 07/27] feat(ui): quicker tooltip motion

---
 src/lib/components/ui/tooltip/tooltip-content.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index 001b3e70..e418db26 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -17,7 +17,7 @@
 		{side}
 		{sideOffset}
 		class={cn(
-			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 z-50 rounded-lg border border-border/60 bg-popover px-2.5 py-2 shadow-md outline-none duration-100",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-open:zoom-in-[0.96] data-closed:zoom-out-[0.96] [transform-origin:var(--bits-floating-transform-origin)] ease-out duration-[125ms] z-50 rounded-lg border border-border/60 bg-popover px-2.5 py-2 shadow-md outline-none",
 			className
 		)}
 		{...restProps}

From 3ff138d5cd2cf9fbb7c2e4db16966fda2eff5333 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 08/27] feat(ui): refine dialog enter/exit and overlay fade

---
 src/lib/components/ui/dialog/dialog-content.svelte | 2 +-
 src/lib/components/ui/dialog/dialog-overlay.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index eba4e573..fe48f5e1 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -42,7 +42,7 @@
 		data-slot="dialog-content"
 		onCloseAutoFocus={handleCloseAutoFocus}
 		class={cn(
-			"bg-background text-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-[0.98] data-open:zoom-in-[0.98] flex flex-col gap-4 rounded-xl border border-border/60 p-5 text-sm shadow-lg duration-100 w-full max-w-[calc(100%-2rem)] fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 outline-none",
+			"bg-background text-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-[0.95] data-open:zoom-in-[0.95] ease-out duration-200 flex flex-col gap-4 rounded-xl border border-border/60 p-5 text-sm shadow-lg w-full max-w-[calc(100%-2rem)] fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index 81da4b1e..bf5007a3 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/65 duration-150 fixed inset-0 isolate z-50",
+		"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 ease-out bg-black/65 duration-150 fixed inset-0 isolate z-50",
 		className
 	)}
 	{...restProps}

From 5bf92a527b87953be9e2d85bc79ca46faa880880 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 09/27] perf(ui): keep command palette open/close snappy

---
 src/lib/components/ui/command/command-dialog.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index 47a1525c..1343c921 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -26,7 +26,7 @@
 	</Dialog.Header>
 	<Dialog.Content
 		class={cn(
-			"rounded-xl! top-[18vh] translate-y-0 overflow-hidden p-0 shadow-lg",
+			"rounded-xl! top-[18vh] translate-y-0 overflow-hidden p-0 shadow-lg duration-100",
 			className
 		)}
 		{showCloseButton}

From 3056d55793253e215a13e7192bd4fe85b05dac42 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 10/27] feat(sidebar): baseline-align rows, raise contrast,
 refine section headers

---
 src/lib/components/Sidebar.svelte | 38 +++++++++++++++----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 768da45f..6a1c16e9 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -419,7 +419,7 @@
 
   /** Shared field chrome for schema select + table filter (aligned in sidebar grid) */
   const sidebarFieldClass =
-    "h-7 w-full min-w-0 rounded-md border border-border bg-background/40 text-ui-sm text-foreground shadow-none transition-colors hover:bg-background/55 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/30";
+    "h-7 w-full min-w-0 rounded-md border border-border bg-background/40 text-ui-sm text-foreground shadow-none transition-colors hover:bg-background/55 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring";
 </script>
 
 <svelte:window onkeydown={(e) => {
@@ -734,7 +734,7 @@
                     )}
                   />
                   <Icon name="clock" class="size-3 shrink-0 text-muted-foreground/60" />
-                  <span class="text-ui-2xs font-medium tracking-wide text-muted-foreground uppercase">Recent</span>
+                  <span class="text-ui-2xs font-medium tracking-wider text-muted-foreground/55 uppercase">Recent</span>
                   <span class="ml-1 font-mono text-ui-2xs text-muted-foreground/60">{Math.min(recentTabs.length, 5)}</span>
                 </button>
                 <button
@@ -753,7 +753,7 @@
                           "grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 rounded-md px-2 py-1.5 transition-colors cursor-pointer",
                           activeTable === item.table
                             ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                            : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                            : "text-foreground/70 hover:bg-sidebar-accent/50 hover:text-foreground",
                         )}
                         role="button"
                         tabindex="0"
@@ -767,7 +767,7 @@
                         {:else}
                           <Icon name="table-2" class="size-3 shrink-0 opacity-50" />
                         {/if}
-                        <span class="min-w-0 truncate font-mono text-ui-sm leading-none">{item.table}</span>
+                        <span class="min-w-0 truncate font-mono text-ui-sm leading-4">{item.table}</span>
                         <button
                           type="button"
                           title="Remove from recent"
@@ -787,7 +787,7 @@
             {#if showPins && visiblePinnedTables.length > 0 && connectionName}
               <div class="flex w-full items-center gap-1 px-2.5 pt-2 pb-1">
                 <Icon name="pin" class="size-3 shrink-0 text-primary/60" />
-                <span class="text-ui-2xs font-medium tracking-wide text-muted-foreground uppercase">Pinned</span>
+                <span class="text-ui-2xs font-medium tracking-wider text-muted-foreground/55 uppercase">Pinned</span>
                 <span class="ml-1 font-mono text-ui-2xs text-muted-foreground/60">{visiblePinnedTables.length}</span>
                 {#if pinnedTables.length > 5}
                   <button
@@ -812,7 +812,7 @@
                               ? "bg-primary/10 text-foreground"
                               : activeTable === tableName
                                 ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                                : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                                : "text-foreground/70 hover:bg-sidebar-accent/50 hover:text-foreground",
                           )}
                           onclick={(e) => {
                             if (e.shiftKey) { e.preventDefault(); selectItem(tableName, true) }
@@ -835,9 +835,9 @@
                               <Icon name="square" class="size-3 hidden opacity-40 group-hover:block" />
                             {/if}
                           </span>
-                          <span class="min-w-0 truncate font-mono text-ui-sm leading-none">{tableName}</span>
+                          <span class="min-w-0 truncate font-mono text-ui-sm leading-4">{tableName}</span>
                           {#if showRowCount}
-                          <span class="shrink-0 text-right font-mono text-ui-xs leading-none tabular-nums text-muted-foreground/85">
+                          <span class="shrink-0 text-right font-mono text-ui-xs leading-4 tabular-nums text-muted-foreground/85">
                             {formatTableRowCount(tables.find((t) => t.name === tableName)?.rowCount)}
                           </span>
                           {/if}
@@ -931,7 +931,7 @@
                 )}
               />
               <span
-                class="text-ui-2xs font-medium tracking-wide text-muted-foreground uppercase"
+                class="text-ui-2xs font-medium tracking-wider text-muted-foreground/55 uppercase"
                 >Tables</span
               >
               {#if regularTablesUnpinned.length > 0}
@@ -986,7 +986,7 @@
                                 ? "bg-primary/10 text-foreground"
                                 : activeTable === table.name
                                   ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                                  : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                                  : "text-foreground/70 hover:bg-sidebar-accent/50 hover:text-foreground",
                             )}
                             onclick={(e) => {
                               if (e.shiftKey) { e.preventDefault(); selectItem(table.name, true) }
@@ -1010,7 +1010,7 @@
                               {/if}
                             </span>
                             <span class="flex min-w-0 items-center gap-1.5">
-                              <span class="min-w-0 truncate font-mono text-ui-sm leading-none">{table.name}</span>
+                              <span class="min-w-0 truncate font-mono text-ui-sm leading-4">{table.name}</span>
                               {#if table.rlsEnabled}
                                 <Icon name="lock" class="size-2.5 shrink-0 text-muted-foreground/50" title="Row-level security enabled" />
                               {/if}
@@ -1019,7 +1019,7 @@
                             <!-- Fixed min-width so the column doesn't grow (shifting
                                  every row) when lazy counts resolve from '…' to numbers. -->
                             <span
-                              class="min-w-[4ch] shrink-0 text-right font-mono text-ui-xs leading-none tabular-nums text-muted-foreground"
+                              class="min-w-[4ch] shrink-0 text-right font-mono text-ui-xs leading-4 tabular-nums text-muted-foreground"
                               title={table.rowCount != null ? Number(table.rowCount).toLocaleString("en-US") : undefined}
                             >{formatTableRowCount(table.rowCount)}</span>
                             {/if}
@@ -1140,7 +1140,7 @@
                   )}
                 />
                 <span
-                  class="text-ui-2xs font-medium tracking-wide text-muted-foreground uppercase"
+                  class="text-ui-2xs font-medium tracking-wider text-muted-foreground/55 uppercase"
                   >Views</span
                 >
                 {#if views.length > 0}
@@ -1169,7 +1169,7 @@
                                   ? "bg-primary/10 text-foreground"
                                   : activeTable === view.name
                                     ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                                    : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                                    : "text-foreground/70 hover:bg-sidebar-accent/50 hover:text-foreground",
                               )}
                               onclick={() => ontableselect(view.name)}
                             >
@@ -1188,7 +1188,7 @@
                                   <Icon name="square" class="size-3 hidden opacity-40 group-hover:block" />
                                 {/if}
                               </span>
-                              <span class="min-w-0 truncate font-mono text-ui-sm leading-none">{view.name}</span>
+                              <span class="min-w-0 truncate font-mono text-ui-sm leading-4">{view.name}</span>
                             </button>
                           </ContextMenu.Trigger>
                           <ContextMenu.Content class="w-44 p-0.5 text-ui-xs [&_[data-slot=context-menu-item]]:gap-1.5 [&_[data-slot=context-menu-item]]:px-2 [&_[data-slot=context-menu-item]]:py-1 [&_[data-slot=context-menu-item]]:text-ui-xs [&_[data-slot=context-menu-item]_svg]:size-3.5">
@@ -1260,7 +1260,7 @@
                   )}
                 />
                 <span
-                  class="text-ui-2xs font-medium tracking-wide text-muted-foreground uppercase"
+                  class="text-ui-2xs font-medium tracking-wider text-muted-foreground/55 uppercase"
                   >Materialized Views</span
                 >
                 {#if matViews.length > 0}
@@ -1289,7 +1289,7 @@
                                   ? "bg-primary/10 text-foreground"
                                   : activeTable === mv.name
                                     ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                                    : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                                    : "text-foreground/70 hover:bg-sidebar-accent/50 hover:text-foreground",
                               )}
                               onclick={() => ontableselect(mv.name)}
                             >
@@ -1308,9 +1308,9 @@
                                   <Icon name="square" class="size-3 hidden opacity-40 group-hover:block" />
                                 {/if}
                               </span>
-                              <span class="min-w-0 truncate font-mono text-ui-sm leading-none">{mv.name}</span>
+                              <span class="min-w-0 truncate font-mono text-ui-sm leading-4">{mv.name}</span>
                               {#if showRowCount}
-                              <span class="shrink-0 text-right font-mono text-ui-xs leading-none tabular-nums text-muted-foreground">
+                              <span class="shrink-0 text-right font-mono text-ui-xs leading-4 tabular-nums text-muted-foreground">
                                 {formatTableRowCount(mv.rowCount)}
                               </span>
                               {/if}

From 8f6c41cfd6b06244514ee4ba92fa5333c9fb9ad7 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:15 +0545
Subject: [PATCH 11/27] fix(table): fall back to default page size when the
 limit is All or invalid

---
 src/lib/components/StudioShell.svelte | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/StudioShell.svelte b/src/lib/components/StudioShell.svelte
index e843721f..9687c614 100644
--- a/src/lib/components/StudioShell.svelte
+++ b/src/lib/components/StudioShell.svelte
@@ -155,6 +155,7 @@
   import {
     MAX_PAGE_SIZE,
     PAGE_SIZE_ALL,
+    DEFAULT_PAGE_SIZE,
     saveDefaultPageSize,
     loadDefaultPageSize,
     activeFilters,
@@ -1487,6 +1488,14 @@ let rowSearch = $state('')
     showShortcutsModal = true
   })
 
+  // Same panel via a modifier chord (Ctrl/⌘+?), which works even while a text
+  // field is focused, unlike the bare "?".
+  createHotkey('Mod+?', (e) => {
+    if (commandOpen || showConnectionModal || showSettingsModal || showShortcutsModal) return
+    e.preventDefault()
+    showShortcutsModal = true
+  })
+
   createHotkey('Mod+,', (e) => {
     if (commandOpen || showConnectionModal || showShortcutsModal) return
     e.preventDefault()
@@ -2791,9 +2800,15 @@ let rowSearch = $state('')
     if (tabId === activeTabId) { loadingRows = true; error = '' }
 
     try {
-      const offset = (s.page - 1) * s.pageSize
+      // Resolve the "All" sentinel — and guard a corrupt/unset value — into a
+      // real fetch limit; the backend rejects limit < 1. Mirrors effectivePageSize.
+      const limit =
+        s.pageSize === PAGE_SIZE_ALL
+          ? (s.total > 0 ? s.total : MAX_PAGE_SIZE)
+          : (Number.isFinite(s.pageSize) && s.pageSize > 0 ? s.pageSize : DEFAULT_PAGE_SIZE)
+      const offset = s.pageSize === PAGE_SIZE_ALL ? 0 : (s.page - 1) * limit
       const { sortColumn, sortDirection } = sortForApi(s.rowSort)
-      const data = await getTableRows(s.schema, s.table, s.pageSize, offset, {
+      const data = await getTableRows(s.schema, s.table, limit, offset, {
         search: s.rowSearch,
         sortColumn,
         sortDirection,

From cb7e8e7a84c94788b8b272346d641baf0305fdb4 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 12/27] fix(grid): block Set NULL on NOT NULL columns;
 edit-overlay and press polish

---
 src/lib/components/DataTable.svelte | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index c99341bc..29356758 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -1,5 +1,7 @@
 <script>
   import { tick, onDestroy, untrack } from "svelte";
+  import { fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
   import { zoomState } from '$lib/stores/canvas-zoom.svelte.js'
   // Zoom is driven through the app-level settings so the canvas scales together
   // with the rest of the UI (applySettings mirrors the app zoom into zoomState).
@@ -840,7 +842,12 @@ import FilterX from "@lucide/svelte/icons/filter-x";
 
     if (!primaryKey.length) {
       toast.error("Cannot edit", {
-        description: "This table has no primary key.",
+        // ClickHouse is OLAP: rows aren't primary-key addressable, so the backend
+        // reports no PK on purpose. Say why and point to the supported path rather
+        // than the misleading generic "no primary key" message.
+        description: dialect === "clickhouse"
+          ? "ClickHouse tables are browse-only here — modify data with ALTER TABLE … UPDATE in the SQL console."
+          : "This table has no primary key.",
       });
       return;
     }
@@ -1523,6 +1530,13 @@ import FilterX from "@lucide/svelte/icons/filter-x";
   function setCellNull(rowIdx, colIdx) {
     const col = columns[colIdx];
     if (!col || !canEditColumn(colIdx)) return;
+    // A NOT NULL column can't hold NULL — reject up front with a clear message
+    // instead of staging an edit that the database will refuse on apply. Matches
+    // the inline editor, which hides the NULL option for non-nullable columns.
+    if (col.nullable === false) {
+      toast.error("Cannot set NULL", { description: `"${col.name}" is NOT NULL.` });
+      return;
+    }
     if (effectiveCellValue(rowIdx, colIdx) === null) {
       toast.message("Already NULL");
       return;
@@ -4458,6 +4472,7 @@ import FilterX from "@lucide/svelte/icons/filter-x";
                 {@const eType = ecached?.colType ?? ''}
                 {@const eNullable = ecol?.nullable ?? true}
                 <div
+                  in:fade={{ duration: 100, easing: cubicOut }}
                   class="absolute z-30 box-border bg-background ring-2 ring-inset ring-primary"
                   style="top:{editOverlay.top}px; left:{editOverlay.left}px; width:{editOverlay.width}px; height:{editOverlay.height}px"
                 >
@@ -4913,7 +4928,7 @@ import FilterX from "@lucide/svelte/icons/filter-x";
             type="button"
             onclick={() => { dmlEditedSql = dmlOriginalSql }}
             disabled={dmlPreviewRunning}
-            class="inline-flex items-center gap-1 text-ui-2xs text-muted-foreground/60 hover:text-foreground disabled:opacity-50"
+            class="inline-flex items-center gap-1 text-ui-2xs text-muted-foreground/60 transition-transform duration-100 ease-out hover:text-foreground active:scale-[0.97] disabled:opacity-50"
             title="Discard your edits and restore the generated SQL"
           >
             <RotateCcw class="size-3" />
@@ -4944,7 +4959,7 @@ import FilterX from "@lucide/svelte/icons/filter-x";
           type="button"
           onclick={() => { if (!dmlPreviewRunning) dmlPreview = null }}
           disabled={dmlPreviewRunning}
-          class="inline-flex h-8 items-center rounded-md px-3 text-ui-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+          class="inline-flex h-8 items-center rounded-md px-3 text-ui-xs text-muted-foreground transition-transform duration-100 ease-out hover:bg-accent hover:text-foreground active:scale-[0.97] disabled:opacity-50"
         >
           Cancel
         </button>
@@ -4953,7 +4968,7 @@ import FilterX from "@lucide/svelte/icons/filter-x";
           onclick={confirmDmlPreview}
           disabled={dmlPreviewRunning}
           class={cn(
-            "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-ui-xs font-medium disabled:opacity-60",
+            "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-ui-xs font-medium transition-transform duration-100 ease-out active:scale-[0.97] disabled:opacity-60",
             dmlPreview.destructive
               ? "bg-destructive text-destructive-foreground hover:opacity-90"
               : "bg-primary text-primary-foreground hover:opacity-90"

From 3d453baf8ac269cfea2461b84af5d582598b0a65 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 13/27] feat(connect): two-pane layout, segmented input mode,
 redesigned error and footer

---
 src/lib/components/ConnectionModal.svelte | 875 +++++++++++++++-------
 1 file changed, 623 insertions(+), 252 deletions(-)

diff --git a/src/lib/components/ConnectionModal.svelte b/src/lib/components/ConnectionModal.svelte
index b952c77f..3f07e673 100644
--- a/src/lib/components/ConnectionModal.svelte
+++ b/src/lib/components/ConnectionModal.svelte
@@ -23,9 +23,11 @@
   import { Input }      from '$lib/components/ui/input/index.js'
   import { Checkbox }   from '$lib/components/ui/checkbox/index.js'
   import { ScrollArea } from '$lib/components/ui/scroll-area/index.js'
+  import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js'
   import { Dialog as DialogPrimitive } from 'bits-ui'
   import { cn }         from '$lib/utils.js'
   import { parseConnectionUri } from '$lib/connection-uri.js'
+  import { PROVIDERS } from '$lib/providers.js'
 
   let {
     open = $bindable(false),
@@ -93,6 +95,33 @@
     .filter(Boolean)
     .map((d) => ({ value: d.id, label: d.label, keywords: [d.label, d.desc], disabled: !!d.soon }))
 
+  // Provider (sign-in) ids are surfaced as cards on their own tab, so keep them
+  // out of the manual Type dropdown.
+  const PROVIDER_IDS = ['neon', 'supabase', 'planetscale', 'prisma']
+  const manualDriverItems = driverItems.filter((d) => !PROVIDER_IDS.includes(d.value))
+
+  // Subtle per-engine icon tint (color-500/600), theme-aware via Tailwind tokens.
+  const ENGINE_TINT = {
+    postgres:        'text-sky-500/80',
+    cockroachdb:     'text-teal-500/80',
+    mysql:           'text-amber-500/80',
+    mariadb:         'text-orange-500/80',
+    sqlite:          'text-blue-500/80',
+    'sqlite-memory': 'text-blue-500/80',
+    mssql:           'text-red-500/80',
+    clickhouse:      'text-yellow-500/80',
+    duckdb:          'text-yellow-500/80',
+    'duckdb-memory': 'text-yellow-500/80',
+    d1:              'text-orange-500/80',
+    libsql:          'text-emerald-500/80',
+    neon:            'text-emerald-500/80',
+    supabase:        'text-emerald-500/80',
+    planetscale:     'text-foreground/70',
+    prisma:          'text-indigo-500/80',
+    bigquery:        'text-blue-500/80',
+  }
+  function engineTint(id) { return ENGINE_TINT[id] ?? 'text-muted-foreground/60' }
+
   let saved      = $state(loadSavedConnections().sort((a, b) => (b.lastConnectedAt ?? 0) - (a.lastConnectedAt ?? 0)))
   let lastId     = $state(getLastConnectionId())
   let editingId  = $state(/** @type {string|null} */ (null))
@@ -114,6 +143,10 @@
 
   let dbType        = $state('postgres')
   let driverMenuOpen = $state(false)
+  // Top-level entry mode: connect manually vs sign in with a hosting provider.
+  let entryMode     = $state(/** @type {'manual'|'provider'} */ ('manual'))
+  // Advanced (SSL / SSH / read-only) disclosure — collapsed by default.
+  let advancedOpen  = $state(false)
   let name        = $state('')
   let host        = $state('127.0.0.1')
   let port        = $state('5432')
@@ -132,6 +165,9 @@
   let libsqlToken = $state('')
   let connectionUri = $state('')
   let uriHint       = $state('')
+  // Manual-form input mode for URI-capable engines: paste a connection string
+  // vs. fill individual fields. UI-only — not tracked as a dirty change.
+  let fieldMode     = $state(/** @type {'string'|'fields'} */ ('fields'))
 
   // ── Connection options ───────────────────────────────────────────────────────
   let readOnly        = $state(false)
@@ -166,6 +202,28 @@
   }
 
   const activeDriver = $derived(ALL_DRIVERS.find(d => d.id === dbType) ?? ALL_DRIVERS[0])
+  const isProvider   = $derived(PROVIDER_IDS.includes(dbType))
+
+  // Engines that expose the "Connection string | Manual fields" toggle.
+  const URI_TOGGLE_ENGINES = ['postgres', 'cockroachdb', 'mysql', 'mariadb']
+  const hasFieldToggle = $derived(URI_TOGGLE_ENGINES.includes(dbType))
+
+  // Briefly ring-highlight the fields a parsed connection string just filled in.
+  let flashedFields = $state(/** @type {Set<string>} */ (new Set()))
+  let flashTimer
+  const flashCls = 'ring-2 ring-emerald-500/40'
+  function flashFields(keys) {
+    flashedFields = new Set(keys)
+    clearTimeout(flashTimer)
+    flashTimer = setTimeout(() => { flashedFields = new Set() }, 1000)
+  }
+
+  /** Switch the manual/provider tab. Leaving provider mode drops back to Postgres. */
+  function setEntryMode(mode) {
+    if (entryMode === mode) return
+    entryMode = mode
+    if (mode === 'manual' && isProvider) switchDriver('postgres')
+  }
 
   function sshPayload() {
     if (!sshEnabled || !sshHost.trim() || !sshUsername.trim()) return undefined
@@ -223,8 +281,13 @@
       sshEnabled = false; sshHost = ''; sshPort = '22'; sshUsername = ''; sshKeyPath = ''
       readOnly = false
     }
+    entryMode = PROVIDER_IDS.includes(dbType) ? 'provider' : 'manual'
+    fieldMode = 'fields'
+    advancedOpen = false
+    flashedFields = new Set()
     error = ''; testOk = false; connectionUri = ''; uriHint = ''
     d1Reset()
+    baseline = snapshot()
   }
 
   /**
@@ -274,17 +337,31 @@
 
   function applyConnectionUri() {
     uriHint = ''
-    const parsed = parseConnectionUri(dbType === 'sqlite' || dbType === 'sqlite-memory' ? 'sqlite' : 'postgres', connectionUri)
-    if (!parsed) return
-    if ('error' in parsed) { uriHint = parsed.error; return }
+    const uriType =
+      dbType === 'sqlite' || dbType === 'sqlite-memory' ? 'sqlite'
+      : dbType === 'mysql' || dbType === 'mariadb' ? 'mysql'
+      : dbType === 'mssql' ? 'mssql'
+      : dbType === 'clickhouse' ? 'clickhouse'
+      : 'postgres'
+    const parsed = parseConnectionUri(uriType, connectionUri)
+    if (!parsed) return false
+    if ('error' in parsed) { uriHint = parsed.error; return false }
     if ((dbType === 'sqlite' || dbType === 'sqlite-memory') && 'filePath' in parsed) {
-      filePath = parsed.filePath; uriHint = 'Fields updated from URI'; return
+      filePath = parsed.filePath; flashFields(['filePath']); uriHint = 'Fields updated from URI'; return true
     }
     if ('host' in parsed) {
       host = parsed.host; port = parsed.port; database = parsed.database
-      user = parsed.user; password = parsed.password; ssl = parsed.ssl
+      user = parsed.user; password = parsed.password
+      const changed = ['host', 'port', 'database', 'user', 'password']
+      // Each engine carries its own TLS shape; apply whichever the parser returned.
+      if ('encrypt' in parsed) { encrypt = parsed.encrypt; trustCert = parsed.trustCert; changed.push('encrypt', 'trustCert') }
+      else if ('secure' in parsed) { secure = parsed.secure; changed.push('secure') }
+      else { ssl = parsed.ssl; changed.push('ssl') }
+      flashFields(changed)
       uriHint = 'Fields updated from URI'
+      return true
     }
+    return false
   }
 
   function connDetail(conn) {
@@ -344,6 +421,12 @@
     const myOp = ++opId
     testing = true; error = ''; testOk = false
     try {
+      // In connection-string mode the payload is built from the individual
+      // fields, so parse the URI into them first (finally clears `testing`).
+      if (fieldMode === 'string' && URI_TOGGLE_ENGINES.includes(dbType) && !applyConnectionUri()) {
+        error = uriHint || 'Enter a valid connection string'
+        return
+      }
       const p = formPayload()
       if (p.type === 'sqlite') await testSqliteConnection(p)
       else if (p.type === 'd1') await testD1Connection(p)
@@ -367,6 +450,12 @@
     const myOp = ++opId
     connecting = editingId ?? '__new__'; error = ''
     try {
+      // In connection-string mode the payload is built from the individual
+      // fields, so parse the URI into them first (finally clears `connecting`).
+      if (fieldMode === 'string' && URI_TOGGLE_ENGINES.includes(dbType) && !applyConnectionUri()) {
+        error = uriHint || 'Enter a valid connection string'
+        return
+      }
       const payload = formPayload()
       if (payload.type === 'sqlite') await connectSqlite(payload)
       else if (payload.type === 'd1') await connectD1(payload)
@@ -398,6 +487,40 @@
   const canTest = $derived(dbType !== 'bigquery')
   const isBusy  = $derived(testing || !!connecting)
 
+  // ── Dirty tracking + close guard ─────────────────────────────────────────────
+  // A snapshot of every editable field; `baseline` is re-stamped each time a form
+  // loads (resetForm), so isDirty flips true the moment the user changes anything.
+  let baseline = $state('')
+  let confirmDiscardOpen = $state(false)
+  function snapshot() {
+    return JSON.stringify([
+      dbType, name, host, port, database, user, password, ssl, secure, encrypt, trustCert,
+      filePath, accountId, databaseId, apiToken, libsqlUrl, libsqlToken, readOnly,
+      sshEnabled, sshHost, sshPort, sshUsername, sshKeyPath,
+    ])
+  }
+  const isDirty = $derived(snapshot() !== baseline)
+
+  /** Full-width status-bar target for the current form. */
+  const statusTarget = $derived.by(() => {
+    if (['sqlite', 'sqlite-memory', 'duckdb', 'duckdb-memory'].includes(dbType)) return filePath || ':memory:'
+    if (dbType === 'libsql') return libsqlUrl || '—'
+    if (dbType === 'd1') return databaseId ? `${databaseId.slice(0, 8)}…` : '—'
+    return `${host || '—'}:${port || '—'}/${database || ''}`
+  })
+
+  /** Attempt to close the dialog — guard against discarding unsaved edits. */
+  function requestClose() {
+    if (isBusy) return
+    if (isDirty) { confirmDiscardOpen = true; return }
+    open = false
+  }
+  function discardAndClose() {
+    confirmDiscardOpen = false
+    baseline = snapshot() // stop isDirty re-firing during the close animation
+    open = false
+  }
+
   async function d1Discover() {
     if (!apiToken.trim()) { d1DiscoverError = 'Enter your API token first.'; return }
     d1DiscoverPhase = 'loading'; d1DiscoverError = ''
@@ -421,8 +544,12 @@
     d1Databases = []; d1SelectedAccountId = ''; d1DbLoadPhase = 'idle'
   }
 
-  const lbl = 'mb-1.5 block text-[10.5px] font-semibold uppercase tracking-[0.06em] text-muted-foreground/55'
-  const inp = 'h-9 w-full rounded-lg border border-border/60 bg-muted/25 px-3 text-[13px] text-foreground placeholder:text-muted-foreground/35 placeholder:font-normal transition-[color,border-color,box-shadow] hover:border-border focus-visible:border-ring focus-visible:bg-muted/15 focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:outline-none'
+  const lbl = 'mb-1.5 block text-[10px] font-medium uppercase tracking-wider text-muted-foreground/50'
+  // Segmented pill switch (entry-mode + field-mode) — shared base for consistency.
+  const segBtn = 'inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-[12px] font-medium transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.97]'
+  const segOn  = 'bg-muted/70 text-foreground shadow-sm'
+  const segOff = 'text-muted-foreground/60 hover:text-foreground'
+  const inp = 'h-9 w-full rounded-lg border border-input bg-muted/25 px-3 text-[12.5px] text-foreground placeholder:text-muted-foreground/35 placeholder:font-normal outline-none transition-[color,border-color,box-shadow] hover:border-ring/40 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring'
   const inpNum = inp + ' [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
 
   async function pickSqliteFile() {
@@ -496,16 +623,77 @@
   </div>
 {/snippet}
 
+<!-- Advanced disclosure — SSL / SSH / encrypt / read-only, collapsed by default -->
+{#snippet advancedSection()}
+  <div class="border-t border-border/40 pt-4">
+    <button
+      type="button"
+      onclick={() => (advancedOpen = !advancedOpen)}
+      aria-expanded={advancedOpen}
+      class="flex w-full items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/50 transition-colors hover:text-foreground"
+    >
+      <Icon name="chevron-right" class={cn('size-3.5 shrink-0 transition-transform', advancedOpen && 'rotate-90')} />
+      Advanced
+    </button>
+
+    {#if advancedOpen}
+      <div class="mt-4 flex flex-col gap-4">
+        {#if dbType === 'postgres' || dbType === 'cockroachdb' || dbType === 'mysql' || dbType === 'mariadb'}
+          <label class="flex cursor-pointer select-none items-center gap-2">
+            <Checkbox id="cn-ssl" checked={ssl} onCheckedChange={(v) => (ssl = v === true)} />
+            <span class="text-[12px] text-muted-foreground/65">Use SSL / TLS</span>
+          </label>
+          {@render sshSection(dbType)}
+        {:else if dbType === 'clickhouse'}
+          <label class="flex cursor-pointer select-none items-center gap-2">
+            <Checkbox id="cn-ch-secure" checked={secure} onCheckedChange={(v) => { secure = v === true; if (secure && port === '8123') port = '8443'; else if (!secure && port === '8443') port = '8123' }} />
+            <span class="text-[12px] text-muted-foreground/65">Use HTTPS (TLS)</span>
+          </label>
+        {:else if dbType === 'mssql'}
+          <div class="flex flex-col gap-3">
+            <label class="flex cursor-pointer select-none items-start gap-2">
+              <Checkbox id="cn-mssql-encrypt" checked={encrypt} onCheckedChange={(v) => (encrypt = v === true)} class="mt-px" />
+              <span class="flex flex-col">
+                <span class="text-[12px] text-muted-foreground/75">Encrypt connection (TLS)</span>
+                <span class="text-[11px] leading-snug text-muted-foreground/40">Encrypts traffic between Stroke and the server.</span>
+              </span>
+            </label>
+            <label class={cn('flex select-none items-start gap-2', encrypt ? 'cursor-pointer' : 'cursor-not-allowed opacity-45')}>
+              <Checkbox id="cn-mssql-trust" checked={trustCert} disabled={!encrypt} onCheckedChange={(v) => (trustCert = v === true)} class="mt-px" />
+              <span class="flex flex-col">
+                <span class="text-[12px] text-muted-foreground/75">Trust server certificate</span>
+                <span class="text-[11px] leading-snug text-muted-foreground/40">Accept self-signed or otherwise untrusted certificates. Needed for many local / dev servers.</span>
+              </span>
+            </label>
+          </div>
+        {/if}
+
+        <!-- Read-only mode — generic option for every driver -->
+        <label class="flex cursor-pointer select-none items-center gap-2">
+          <Checkbox id="cn-readonly" checked={readOnly} onCheckedChange={(v) => (readOnly = v === true)} />
+          <span class="flex items-center gap-1.5 text-[12px] text-muted-foreground/75">
+            <Icon name="lock" class="size-3 shrink-0" />
+            Open in read-only mode
+          </span>
+        </label>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
 <DialogPrimitive.Root bind:open>
   <DialogPrimitive.Portal>
     <DialogPrimitive.Overlay
-      class="fixed inset-0 z-50 bg-black/50 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0 duration-100"
+      class="fixed inset-0 z-50 bg-black/50 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0 ease-out duration-150"
     />
     <DialogPrimitive.Content
-      class="fixed inset-0 z-50 flex bg-background text-foreground outline-none data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0 duration-100"
+      data-connection-modal
+      class="fixed inset-0 z-50 flex bg-background text-foreground outline-none data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0 data-open:zoom-in-[0.98] data-closed:zoom-out-[0.98] ease-out duration-200"
+      onEscapeKeydown={(e) => { if (isDirty && !isBusy) { e.preventDefault(); confirmDiscardOpen = true } }}
+      onInteractOutside={(e) => { if (isDirty && !isBusy) { e.preventDefault(); confirmDiscardOpen = true } }}
     >
     <DialogPrimitive.Title class="sr-only">Connections</DialogPrimitive.Title>
-    <div class="grid h-full w-full min-h-0 grid-cols-[minmax(240px,280px)_minmax(0,1fr)] overflow-hidden">
+    <div class="grid h-full w-full min-h-0 grid-cols-[minmax(300px,340px)_minmax(0,1fr)] overflow-hidden">
 
       <!-- ── Sidebar ─────────────────────────────────────────────── -->
       <aside class="flex min-h-0 flex-col border-r border-border/15 bg-muted/[0.015]">
@@ -518,13 +706,66 @@
           {/if}
         </div>
 
+        <!-- Entry mode + driver type — the "what am I creating" controls -->
+        <div class="shrink-0 border-b border-border/15 px-3 pb-3.5">
+          <div class="flex gap-1 rounded-lg border border-border/40 bg-muted/[0.03] p-1">
+            <button type="button" onclick={() => setEntryMode('manual')}
+              class={cn(segBtn, entryMode === 'manual' ? segOn : segOff)}>
+              <Icon name="database" class="size-3.5 shrink-0" />
+              Manual
+            </button>
+            <button type="button" onclick={() => setEntryMode('provider')}
+              class={cn(segBtn, entryMode === 'provider' ? segOn : segOff)}>
+              <Icon name="cloud" class="size-3.5 shrink-0" />
+              Provider
+            </button>
+          </div>
+
+          {#if entryMode === 'manual'}
+            <div class="mt-3">
+              <span class={lbl}>Type</span>
+              <SearchableMenu
+                bind:open={driverMenuOpen}
+                items={manualDriverItems}
+                placeholder="Search databases…"
+                contentClass="w-60"
+                align="start"
+                onselect={(it) => switchDriver(it.value)}
+              >
+                {#snippet trigger(props)}
+                  <button
+                    {...props}
+                    type="button"
+                    class={cn(inp, 'flex items-center justify-between gap-2 text-left', driverMenuOpen && 'border-ring ring-1 ring-ring')}
+                  >
+                    <span class="flex min-w-0 items-center gap-2">
+                      <DbIcon id={activeDriver.id} class="size-4 text-muted-foreground" />
+                      <span class="min-w-0 truncate">{activeDriver.label}</span>
+                    </span>
+                    <Icon name="chevron-down" class="size-3.5 shrink-0 text-muted-foreground/50" />
+                  </button>
+                {/snippet}
+                {#snippet item(it)}
+                  <DbIcon id={it.value} class={cn('size-4', it.value === dbType ? 'text-foreground' : 'text-muted-foreground/70')} />
+                  <span class="min-w-0 flex-1 truncate">{it.label}</span>
+                  {#if it.disabled}
+                    <span class="shrink-0 text-ui-3xs text-muted-foreground/45">soon</span>
+                  {:else if it.value === dbType}
+                    <Icon name="check" class="size-3.5 shrink-0 text-primary" />
+                  {/if}
+                {/snippet}
+              </SearchableMenu>
+            </div>
+          {/if}
+        </div>
+
         <!-- New connection button -->
-        <div class="shrink-0 px-2.5 pb-2">
+        <div class="shrink-0 px-2 pb-2 pt-2">
           <button
             type="button"
             onclick={() => resetForm(null)}
             class={cn(
-              'flex w-full items-center gap-2 rounded-lg border px-2.5 py-2 text-left text-[12px] transition-colors',
+              'flex w-full items-center gap-2 rounded-lg border px-2 py-2 text-left text-[12px] transition-[color,background-color,border-color,transform] duration-150 ease-out active:scale-[0.98]',
               !editingId
                 ? 'border-border/40 bg-muted/40 font-medium text-foreground'
                 : 'border-transparent text-muted-foreground/60 hover:bg-muted/25 hover:text-foreground'
@@ -538,26 +779,30 @@
         <div class="min-h-0 flex-1">
           {#if saved.length > 0}
             <ScrollArea class="h-full scroll-smooth">
-              <div class="px-2 py-2 flex flex-col gap-0.5">
-                {#each saved as conn (conn.id)}
+              <div class="px-2 py-1 flex flex-col gap-0.5">
+                {#each saved as conn, i (conn.id)}
                   {@const isSel = conn.id === editingId}
                   {@const busy2 = connecting === conn.id}
                   {@const cid   = conn.filePath === ':memory:' && (conn.type === 'sqlite' || conn.type === 'duckdb') ? `${conn.type}-memory` : conn.type}
                   <div
                     class={cn(
-                      'group flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 transition-colors',
+                      'cn-stagger-in group relative flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 transition-[color,background-color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.98]',
                       isSel
                         ? 'bg-muted/50 text-foreground'
-                        : 'text-muted-foreground/55 hover:bg-muted/30 hover:text-foreground'
+                        : 'text-muted-foreground/60 hover:bg-muted/30 hover:text-foreground'
                     )}
+                    style="animation-delay: {Math.min(i, 12) * 40}ms"
                     role="button" tabindex="0"
                     onclick={() => resetForm(conn)}
                     onkeydown={(e) => e.key === 'Enter' && resetForm(conn)}
                   >
-                    <!-- Icon: fades to Play on hover — clicking it connects directly -->
+                    {#if isSel}
+                      <span class="absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-foreground/70"></span>
+                    {/if}
+                    <!-- Fixed-size icon slot keeps every row's text left-edge aligned. Fades to Play on hover. -->
                     <button
                       type="button"
-                      class="relative size-4 shrink-0 disabled:opacity-30"
+                      class="relative flex size-7 shrink-0 items-center justify-center rounded-md disabled:opacity-30"
                       title="Connect"
                       disabled={!!connecting}
                       onclick={(e) => { e.stopPropagation(); void connectWith(conn) }}
@@ -566,7 +811,7 @@
                         {#if busy2}
                           <Icon name="loader-2" class="size-4 animate-spin" />
                         {:else}
-                          <DbIcon id={cid} class={cn('size-4', isSel ? 'text-foreground' : 'text-muted-foreground/60')} />
+                          <DbIcon id={cid} class={cn('size-4', engineTint(cid))} />
                         {/if}
                       </span>
                       <span class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-150 group-hover:opacity-100">
@@ -574,14 +819,14 @@
                       </span>
                     </button>
 
-                    <!-- Name + detail when selected -->
+                    <!-- Name + engine · detail subtitle -->
                     <div class="min-w-0 flex-1">
-                      <p class="truncate text-[12px] {isSel ? 'font-medium' : ''} leading-tight">
+                      <p class="truncate text-[12.5px] font-medium leading-tight text-foreground/90">
                         {conn.name || 'Unnamed'}
                       </p>
-                      {#if isSel}
-                        <p class="mt-0.5 truncate text-[10px] leading-tight text-muted-foreground/40">{connDetail(conn)}</p>
-                      {/if}
+                      <p class="mt-0.5 truncate text-[11px] leading-tight text-muted-foreground/55">
+                        {driverById(cid).label} · {connDetail(conn)}
+                      </p>
                     </div>
 
                     <!-- Trash: hidden until hover -->
@@ -604,168 +849,142 @@
       <!-- ── Form panel ──────────────────────────────────────────── -->
       <div class="flex min-h-0 min-w-0 flex-col">
 
-        <!-- ── Scrollable form body — left-aligned form, no card ── -->
+        <!-- ── Form body — details for the current selection ── -->
         <ScrollArea class="min-h-0 flex-1 scroll-smooth">
-          <div class="px-10 py-10 lg:px-16 lg:py-12">
+          <div class="px-8 py-7">
             <div class="max-w-[560px]">
-              <div class="contents">
 
-                <!-- Header: connection name + driver type -->
-                <div class="grid grid-cols-[1fr_12rem] items-end gap-3.5 border-b border-border/40 pb-6">
-                  <!-- Connection name -->
-                  <div>
-                    <label for="cn-name" class={lbl}>Name</label>
-                    <Input id="cn-name" bind:value={name} class={inp} placeholder="e.g. Production DB" />
-                  </div>
+              {#if entryMode === 'manual'}
 
-                  <!-- Driver type — searchable dropdown -->
-                  <div>
-                    <span class={lbl}>Type</span>
-                    <SearchableMenu
-                      bind:open={driverMenuOpen}
-                      items={driverItems}
-                      placeholder="Search databases…"
-                      contentClass="w-64"
-                      align="end"
-                      onselect={(it) => switchDriver(it.value)}
-                    >
-                      {#snippet trigger(props)}
-                        <button
-                          {...props}
-                          type="button"
-                          class={cn(inp, 'flex items-center justify-between gap-2 text-left', driverMenuOpen && 'border-ring/60 ring-1 ring-ring/20')}
-                        >
-                          <span class="flex min-w-0 items-center gap-2">
-                            <DbIcon id={activeDriver.id} class="size-4 text-muted-foreground" />
-                            <span class="min-w-0 truncate">{activeDriver.label}</span>
-                          </span>
-                          <Icon name="chevron-down" class="size-3.5 shrink-0 text-muted-foreground/50" />
-                        </button>
-                      {/snippet}
-                      {#snippet item(it)}
-                        <DbIcon id={it.value} class={cn('size-4', it.value === dbType ? 'text-foreground' : 'text-muted-foreground/70')} />
-                        <span class="min-w-0 flex-1 truncate">{it.label}</span>
-                        {#if it.disabled}
-                          <span class="shrink-0 text-ui-3xs text-muted-foreground/45">soon</span>
-                        {:else if it.value === dbType}
-                          <Icon name="check" class="size-3.5 shrink-0 text-primary" />
-                        {/if}
-                      {/snippet}
-                    </SearchableMenu>
-                  </div>
+                <!-- Connection name -->
+                <div class="border-b border-border/40 pb-6">
+                  <label for="cn-name" class={lbl}>Name</label>
+                  <Input id="cn-name" bind:value={name} class={inp} placeholder="e.g. Production DB" />
                 </div>
 
                 <!-- Driver-specific fields -->
+                {#key dbType}
                 <div class="mt-6 flex flex-col gap-4">
 
-            <!-- ── Hosting provider sign-in (Neon / Supabase / PlanetScale / Prisma) ── -->
-            {#if dbType === 'neon' || dbType === 'supabase' || dbType === 'planetscale' || dbType === 'prisma'}
-              <ProviderConnect
-                provider={dbType}
-                resolvePassword={(host, user) => saved.find((s) => s.host === host && s.user === user && s.password)?.password}
-                onselect={(conn) => connectProviderConnection(conn)}
-              />
+            <!-- Input mode — connection string vs. individual fields -->
+            {#if hasFieldToggle}
+              <div class="flex gap-1 rounded-lg border border-border/40 bg-muted/[0.03] p-1">
+                <button type="button" onclick={() => (fieldMode = 'string')}
+                  class={cn(segBtn, fieldMode === 'string' ? segOn : segOff)}>
+                  Connection string
+                </button>
+                <button type="button" onclick={() => (fieldMode = 'fields')}
+                  class={cn(segBtn, fieldMode === 'fields' ? segOn : segOff)}>
+                  Manual fields
+                </button>
+              </div>
+            {/if}
 
             <!-- ── PostgreSQL / CockroachDB ────────────────── -->
-            {:else if dbType === 'postgres' || dbType === 'cockroachdb'}
+            {#if dbType === 'postgres' || dbType === 'cockroachdb'}
 
-              <div>
-                <label for="cn-uri" class={lbl}>Connection string</label>
-                <div class="flex gap-1.5">
+              {#if fieldMode === 'string'}
+                <div>
+                  <label for="cn-uri" class={lbl}>Connection string</label>
                   <Input id="cn-uri" bind:value={connectionUri}
                     placeholder="postgresql://user:pass@host:5432/db"
                     class={cn(inp, 'font-mono text-[11px]')}
                     onpaste={() => requestAnimationFrame(applyConnectionUri)}
                     onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), applyConnectionUri())}
                   />
-                  <button type="button" onclick={applyConnectionUri} disabled={!connectionUri.trim()}
-                    class="h-9 shrink-0 rounded-lg border border-border/25 px-2.5 text-[11px] text-muted-foreground/60 transition-colors hover:bg-muted/40 hover:text-foreground disabled:opacity-25">
-                    Parse
-                  </button>
-                </div>
-                {#if uriHint}
-                  <p class={cn('mt-1 flex items-center gap-1 text-[10px]',
-                    uriHint.includes('Could') || uriHint.includes('Expected') ? 'text-destructive' : 'text-emerald-500')}>
-                    {#if uriHint.includes('Could') || uriHint.includes('Expected')}
-                      <Icon name="alert-circle" class="size-2.5" />
-                    {:else}
-                      <Icon name="check-circle-2" class="size-2.5" />
-                    {/if}
-                    {uriHint}
-                  </p>
-                {/if}
-              </div>
-
-              <div class="grid grid-cols-[1fr_80px] gap-2">
-                <div>
-                  <label for="cn-host" class={lbl}>Host</label>
-                  <Input id="cn-host" bind:value={host} class={inp} />
+                  {#if uriHint}
+                    <p class={cn('mt-1 flex items-center gap-1 text-[10px]',
+                      uriHint.includes('Could') || uriHint.includes('Expected') ? 'text-destructive' : 'text-emerald-500')}>
+                      {#if uriHint.includes('Could') || uriHint.includes('Expected')}
+                        <Icon name="alert-circle" class="size-2.5" />
+                      {:else}
+                        <Icon name="check-circle-2" class="size-2.5" />
+                      {/if}
+                      {uriHint}
+                    </p>
+                  {/if}
                 </div>
-                <div>
-                  <label for="cn-port" class={lbl}>Port</label>
-                  <Input id="cn-port" bind:value={port} type="text" inputmode="numeric" class={inpNum} />
+              {:else}
+                <div class="grid grid-cols-[1fr_110px] gap-2">
+                  <div>
+                    <label for="cn-host" class={lbl}>Host</label>
+                    <Input id="cn-host" bind:value={host} class={cn(inp, flashedFields.has('host') && flashCls)} />
+                  </div>
+                  <div>
+                    <label for="cn-port" class={lbl}>Port</label>
+                    <Input id="cn-port" bind:value={port} type="text" inputmode="numeric" class={cn(inpNum, flashedFields.has('port') && flashCls)} />
+                  </div>
                 </div>
-              </div>
 
-              <div>
-                <label for="cn-db" class={lbl}>Database</label>
-                <Input id="cn-db" bind:value={database} class={inp} />
-              </div>
-
-              <div class="grid grid-cols-2 gap-2">
-                <div>
-                  <label for="cn-user" class={lbl}>Username</label>
-                  <Input id="cn-user" bind:value={user} autocomplete="username" class={inp} />
-                </div>
                 <div>
-                  <label for="cn-pass" class={lbl}>Password</label>
-                  <Input id="cn-pass" bind:value={password} type="password" autocomplete="current-password" class={inp} />
+                  <label for="cn-db" class={lbl}>Database</label>
+                  <Input id="cn-db" bind:value={database} class={cn(inp, flashedFields.has('database') && flashCls)} />
                 </div>
-              </div>
 
-              <label class="flex cursor-pointer select-none items-center gap-2 pt-0.5">
-                <Checkbox id="cn-ssl" checked={ssl} onCheckedChange={(v) => (ssl = v === true)} />
-                <span class="text-[12px] text-muted-foreground/65">Use SSL / TLS</span>
-              </label>
-
-              {@render sshSection('pg')}
+                <div class="grid grid-cols-2 gap-2">
+                  <div>
+                    <label for="cn-user" class={lbl}>Username</label>
+                    <Input id="cn-user" bind:value={user} autocomplete="username" class={cn(inp, flashedFields.has('user') && flashCls)} />
+                  </div>
+                  <div>
+                    <label for="cn-pass" class={lbl}>Password</label>
+                    <Input id="cn-pass" bind:value={password} type="password" autocomplete="current-password" class={cn(inp, flashedFields.has('password') && flashCls)} />
+                  </div>
+                </div>
+              {/if}
 
             <!-- ── MySQL / MariaDB ──────────────────────── -->
             {:else if dbType === 'mysql' || dbType === 'mariadb'}
 
-              <div class="grid grid-cols-[1fr_80px] gap-2">
+              {#if fieldMode === 'string'}
                 <div>
-                  <label for="cn-mysql-host" class={lbl}>Host</label>
-                  <Input id="cn-mysql-host" bind:value={host} class={inp} />
+                  <label for="cn-mysql-uri" class={lbl}>Connection string</label>
+                  <Input id="cn-mysql-uri" bind:value={connectionUri}
+                    placeholder="mysql://user:pass@host:3306/db"
+                    class={cn(inp, 'font-mono text-[11px]')}
+                    onpaste={() => requestAnimationFrame(applyConnectionUri)}
+                    onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), applyConnectionUri())}
+                  />
+                  {#if uriHint}
+                    <p class={cn('mt-1 flex items-center gap-1 text-[10px]',
+                      uriHint.includes('Could') || uriHint.includes('Expected') ? 'text-destructive' : 'text-emerald-500')}>
+                      {#if uriHint.includes('Could') || uriHint.includes('Expected')}
+                        <Icon name="alert-circle" class="size-2.5" />
+                      {:else}
+                        <Icon name="check-circle-2" class="size-2.5" />
+                      {/if}
+                      {uriHint}
+                    </p>
+                  {/if}
                 </div>
-                <div>
-                  <label for="cn-mysql-port" class={lbl}>Port</label>
-                  <Input id="cn-mysql-port" bind:value={port} type="text" inputmode="numeric" class={inpNum} />
+              {:else}
+                <div class="grid grid-cols-[1fr_110px] gap-2">
+                  <div>
+                    <label for="cn-mysql-host" class={lbl}>Host</label>
+                    <Input id="cn-mysql-host" bind:value={host} class={cn(inp, flashedFields.has('host') && flashCls)} />
+                  </div>
+                  <div>
+                    <label for="cn-mysql-port" class={lbl}>Port</label>
+                    <Input id="cn-mysql-port" bind:value={port} type="text" inputmode="numeric" class={cn(inpNum, flashedFields.has('port') && flashCls)} />
+                  </div>
                 </div>
-              </div>
 
-              <div>
-                <label for="cn-mysql-db" class={lbl}>Database</label>
-                <Input id="cn-mysql-db" bind:value={database} class={inp} />
-              </div>
-
-              <div class="grid grid-cols-2 gap-2">
                 <div>
-                  <label for="cn-mysql-user" class={lbl}>Username</label>
-                  <Input id="cn-mysql-user" bind:value={user} autocomplete="username" class={inp} />
+                  <label for="cn-mysql-db" class={lbl}>Database</label>
+                  <Input id="cn-mysql-db" bind:value={database} class={cn(inp, flashedFields.has('database') && flashCls)} />
                 </div>
-                <div>
-                  <label for="cn-mysql-pass" class={lbl}>Password</label>
-                  <Input id="cn-mysql-pass" bind:value={password} type="password" autocomplete="current-password" class={inp} />
-                </div>
-              </div>
 
-              <label class="flex cursor-pointer select-none items-center gap-2 pt-0.5">
-                <Checkbox id="cn-mysql-ssl" checked={ssl} onCheckedChange={(v) => (ssl = v === true)} />
-                <span class="text-[12px] text-muted-foreground/65">Use SSL / TLS</span>
-              </label>
-
-              {@render sshSection('mysql')}
+                <div class="grid grid-cols-2 gap-2">
+                  <div>
+                    <label for="cn-mysql-user" class={lbl}>Username</label>
+                    <Input id="cn-mysql-user" bind:value={user} autocomplete="username" class={cn(inp, flashedFields.has('user') && flashCls)} />
+                  </div>
+                  <div>
+                    <label for="cn-mysql-pass" class={lbl}>Password</label>
+                    <Input id="cn-mysql-pass" bind:value={password} type="password" autocomplete="current-password" class={cn(inp, flashedFields.has('password') && flashCls)} />
+                  </div>
+                </div>
+              {/if}
 
             <!-- ── SQLite ────────────────────────────────── -->
             {:else if dbType === 'sqlite'}
@@ -777,7 +996,7 @@
                     placeholder="/path/to/database.db"
                     class={cn(inp, 'font-mono text-[11px]')} />
                   <button type="button" onclick={pickSqliteFile}
-                    class="inline-flex h-9 shrink-0 items-center gap-1 rounded-lg border border-border/25 px-2.5 text-[11px] text-muted-foreground/60 transition-colors hover:bg-muted/40 hover:text-foreground">
+                    class="inline-flex h-9 shrink-0 items-center gap-1 rounded-lg border border-border/25 px-2.5 text-[11px] text-muted-foreground/60 transition-[color,background-color,border-color,transform] duration-150 ease-out hover:bg-muted/40 hover:text-foreground active:scale-[0.97]">
                     <Icon name="folder-open" class="size-3" />
                     Browse
                   </button>
@@ -851,38 +1070,60 @@
             <!-- ── ClickHouse ─────────────────────────────── -->
             {:else if dbType === 'clickhouse'}
 
-              <div class="grid grid-cols-[1fr_80px] gap-2">
+              <div>
+                <label for="cn-ch-uri" class={lbl}>Connection string</label>
+                <div class="flex gap-1.5">
+                  <Input id="cn-ch-uri" bind:value={connectionUri}
+                    placeholder="clickhouse://user:pass@host:8123/db"
+                    class={cn(inp, 'font-mono text-[11px]')}
+                    onpaste={() => requestAnimationFrame(applyConnectionUri)}
+                    onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), applyConnectionUri())}
+                  />
+                  <button type="button" onclick={applyConnectionUri} disabled={!connectionUri.trim()}
+                    class="h-9 shrink-0 rounded-lg border border-border/25 px-2.5 text-[11px] text-muted-foreground/60 transition-colors hover:bg-muted/40 hover:text-foreground disabled:opacity-25">
+                    Parse
+                  </button>
+                </div>
+                {#if uriHint}
+                  <p class={cn('mt-1 flex items-center gap-1 text-[10px]',
+                    uriHint.includes('Could') || uriHint.includes('Expected') ? 'text-destructive' : 'text-emerald-500')}>
+                    {#if uriHint.includes('Could') || uriHint.includes('Expected')}
+                      <Icon name="alert-circle" class="size-2.5" />
+                    {:else}
+                      <Icon name="check-circle-2" class="size-2.5" />
+                    {/if}
+                    {uriHint}
+                  </p>
+                {/if}
+              </div>
+
+              <div class="grid grid-cols-[1fr_110px] gap-2">
                 <div>
                   <label for="cn-ch-host" class={lbl}>Host</label>
-                  <Input id="cn-ch-host" bind:value={host} class={inp} />
+                  <Input id="cn-ch-host" bind:value={host} class={cn(inp, flashedFields.has('host') && flashCls)} />
                 </div>
                 <div>
                   <label for="cn-ch-port" class={lbl}>Port</label>
-                  <Input id="cn-ch-port" bind:value={port} type="text" inputmode="numeric" class={inpNum} />
+                  <Input id="cn-ch-port" bind:value={port} type="text" inputmode="numeric" class={cn(inpNum, flashedFields.has('port') && flashCls)} />
                 </div>
               </div>
 
               <div>
                 <label for="cn-ch-db" class={lbl}>Database</label>
-                <Input id="cn-ch-db" bind:value={database} class={inp} />
+                <Input id="cn-ch-db" bind:value={database} class={cn(inp, flashedFields.has('database') && flashCls)} />
               </div>
 
               <div class="grid grid-cols-2 gap-2">
                 <div>
                   <label for="cn-ch-user" class={lbl}>Username</label>
-                  <Input id="cn-ch-user" bind:value={user} autocomplete="username" class={inp} />
+                  <Input id="cn-ch-user" bind:value={user} autocomplete="username" class={cn(inp, flashedFields.has('user') && flashCls)} />
                 </div>
                 <div>
                   <label for="cn-ch-pass" class={lbl}>Password</label>
-                  <Input id="cn-ch-pass" bind:value={password} type="password" autocomplete="current-password" class={inp} />
+                  <Input id="cn-ch-pass" bind:value={password} type="password" autocomplete="current-password" class={cn(inp, flashedFields.has('password') && flashCls)} />
                 </div>
               </div>
 
-              <label class="flex cursor-pointer select-none items-center gap-2 pt-0.5">
-                <Checkbox id="cn-ch-secure" checked={secure} onCheckedChange={(v) => { secure = v === true; if (secure && port === '8123') port = '8443'; else if (!secure && port === '8443') port = '8123' }} />
-                <span class="text-[12px] text-muted-foreground/65">Use HTTPS (TLS)</span>
-              </label>
-
             <!-- ── DuckDB (file) ──────────────────────────── -->
             {:else if dbType === 'duckdb'}
 
@@ -914,140 +1155,270 @@
             <!-- ── MS SQL Server ──────────────────────────── -->
             {:else if dbType === 'mssql'}
 
-              <div class="grid grid-cols-[1fr_80px] gap-2">
+              <div>
+                <label for="cn-mssql-uri" class={lbl}>Connection string</label>
+                <div class="flex gap-1.5">
+                  <Input id="cn-mssql-uri" bind:value={connectionUri}
+                    placeholder="sqlserver://sa:pass@host:1433/db"
+                    class={cn(inp, 'font-mono text-[11px]')}
+                    onpaste={() => requestAnimationFrame(applyConnectionUri)}
+                    onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), applyConnectionUri())}
+                  />
+                  <button type="button" onclick={applyConnectionUri} disabled={!connectionUri.trim()}
+                    class="h-9 shrink-0 rounded-lg border border-border/25 px-2.5 text-[11px] text-muted-foreground/60 transition-colors hover:bg-muted/40 hover:text-foreground disabled:opacity-25">
+                    Parse
+                  </button>
+                </div>
+                {#if uriHint}
+                  <p class={cn('mt-1 flex items-center gap-1 text-[10px]',
+                    uriHint.includes('Could') || uriHint.includes('Expected') ? 'text-destructive' : 'text-emerald-500')}>
+                    {#if uriHint.includes('Could') || uriHint.includes('Expected')}
+                      <Icon name="alert-circle" class="size-2.5" />
+                    {:else}
+                      <Icon name="check-circle-2" class="size-2.5" />
+                    {/if}
+                    {uriHint}
+                  </p>
+                {/if}
+              </div>
+
+              <div class="grid grid-cols-[1fr_110px] gap-2">
                 <div>
                   <label for="cn-mssql-host" class={lbl}>Host</label>
-                  <Input id="cn-mssql-host" bind:value={host} class={inp} />
+                  <Input id="cn-mssql-host" bind:value={host} class={cn(inp, flashedFields.has('host') && flashCls)} />
                 </div>
                 <div>
                   <label for="cn-mssql-port" class={lbl}>Port</label>
-                  <Input id="cn-mssql-port" bind:value={port} type="text" inputmode="numeric" class={inpNum} />
+                  <Input id="cn-mssql-port" bind:value={port} type="text" inputmode="numeric" class={cn(inpNum, flashedFields.has('port') && flashCls)} />
                 </div>
               </div>
 
               <div>
                 <label for="cn-mssql-db" class={lbl}>Database</label>
-                <Input id="cn-mssql-db" bind:value={database} class={inp} />
+                <Input id="cn-mssql-db" bind:value={database} class={cn(inp, flashedFields.has('database') && flashCls)} />
               </div>
 
               <div class="grid grid-cols-2 gap-2">
                 <div>
                   <label for="cn-mssql-user" class={lbl}>Username</label>
-                  <Input id="cn-mssql-user" bind:value={user} autocomplete="username" class={inp} />
+                  <Input id="cn-mssql-user" bind:value={user} autocomplete="username" class={cn(inp, flashedFields.has('user') && flashCls)} />
                 </div>
                 <div>
                   <label for="cn-mssql-pass" class={lbl}>Password</label>
-                  <Input id="cn-mssql-pass" bind:value={password} type="password" autocomplete="current-password" class={inp} />
+                  <Input id="cn-mssql-pass" bind:value={password} type="password" autocomplete="current-password" class={cn(inp, flashedFields.has('password') && flashCls)} />
                 </div>
               </div>
 
-              <div class="flex flex-col gap-3 pt-0.5">
-                <label class="flex cursor-pointer select-none items-start gap-2">
-                  <Checkbox id="cn-mssql-encrypt" checked={encrypt} onCheckedChange={(v) => (encrypt = v === true)} class="mt-px" />
-                  <span class="flex flex-col">
-                    <span class="text-[12px] text-muted-foreground/75">Encrypt connection (TLS)</span>
-                    <span class="text-[11px] leading-snug text-muted-foreground/40">Encrypts traffic between Stroke and the server.</span>
-                  </span>
-                </label>
-                <label class={cn('flex select-none items-start gap-2', encrypt ? 'cursor-pointer' : 'cursor-not-allowed opacity-45')}>
-                  <Checkbox id="cn-mssql-trust" checked={trustCert} disabled={!encrypt} onCheckedChange={(v) => (trustCert = v === true)} class="mt-px" />
-                  <span class="flex flex-col">
-                    <span class="text-[12px] text-muted-foreground/75">Trust server certificate</span>
-                    <span class="text-[11px] leading-snug text-muted-foreground/40">Accept self-signed or otherwise untrusted certificates. Needed for many local / dev servers.</span>
-                  </span>
-                </label>
-              </div>
-
             {/if}
 
-                <!-- Read-only mode — generic option for every driver -->
-                <label class="mt-1 flex cursor-pointer select-none items-center gap-2 border-t border-border/15 pt-3.5">
-                  <Checkbox id="cn-readonly" checked={readOnly} onCheckedChange={(v) => (readOnly = v === true)} />
-                  <span class="flex items-center gap-1.5 text-[12px] text-muted-foreground/75">
-                    <Icon name="lock" class="size-3 shrink-0" />
-                    Open in read-only mode
-                  </span>
-                </label>
+                  {@render advancedSection()}
+
+                </div>
+                {/key}
+
+              {:else}
+
+                <!-- ── Sign in with a hosting provider — one grouped, calm settings list ── -->
+                <div class="divide-y divide-border/25 overflow-hidden rounded-xl border border-border/40 bg-muted/[0.02]">
+                  {#each PROVIDERS as p, i (p.id)}
+                    {@const active = dbType === p.id}
+                    <button
+                      type="button"
+                      onclick={() => switchDriver(p.id)}
+                      style="animation-delay: {i * 45}ms"
+                      class={cn(
+                        'cn-stagger-in flex w-full items-center gap-3 px-3.5 py-3 text-left transition-[background-color] duration-150 ease-out',
+                        active ? 'bg-muted/50' : 'hover:bg-muted/25 active:bg-muted/40'
+                      )}
+                    >
+                      <div class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border/40 bg-background">
+                        <DbIcon id={p.id} class={cn('size-4', engineTint(p.id))} />
+                      </div>
+                      <div class="min-w-0 flex-1">
+                        <p class="truncate text-sm font-medium text-foreground">{p.name}</p>
+                        <p class="truncate text-xs text-muted-foreground">{p.blurb}</p>
+                      </div>
+                      {#if active}
+                        <Icon name="check" class="size-4 shrink-0 text-primary" />
+                      {/if}
+                    </button>
+                  {/each}
+                </div>
+
+                {#if isProvider}
+                  <div class="mt-6 flex flex-col gap-4">
+                    <ProviderConnect
+                      provider={dbType}
+                      resolvePassword={(host, user) => saved.find((s) => s.host === host && s.user === user && s.password)?.password}
+                      onselect={(conn) => connectProviderConnection(conn)}
+                    />
+                    {@render advancedSection()}
+                  </div>
+                {/if}
+
+              {/if}
 
-              </div>
             </div>
           </div>
         </ScrollArea>
 
-        <!-- ── Footer — feedback + actions only, so it stays compact and
-             the action buttons are always visible regardless of window height ── -->
-        <div class="shrink-0 border-t border-border/15 px-10 py-4 lg:px-16">
-          <div class="w-full">
+        <!-- ── Footer — inline error alert, status chip, then actions ── -->
+        <div class="shrink-0 border-t border-border/15 px-8 py-4">
+          <div class="mx-auto max-w-none">
 
-          <!-- Feedback slot — always occupies height, shows message when needed -->
-          <div class="mb-2.5 flex min-h-[18px] items-center">
+            <!-- Connection error — calm inline alert, aligned to the form column -->
             {#if error}
-              <p class="flex items-start gap-1 text-[11px] leading-snug text-destructive">
-                <Icon name="alert-circle" class="mt-px size-2.5 shrink-0" />{error}
-              </p>
-            {:else if testOk}
-              <p class="flex items-center gap-1 text-[11px] text-emerald-500">
-                <Icon name="check-circle-2" class="size-2.5 shrink-0" />Connected successfully
-              </p>
+              <div class="mb-3.5 max-w-[560px]">
+                <Alert variant="destructive" class="items-start gap-x-2.5 rounded-lg border-destructive/30 bg-destructive/10 p-3.5">
+                  <Icon name="alert-circle" class="size-4" />
+                  <AlertTitle class="text-sm font-medium">Couldn't connect</AlertTitle>
+                  <AlertDescription class="mt-1 break-words text-[13px] leading-snug text-destructive/80">{error}</AlertDescription>
+                </Alert>
+              </div>
             {/if}
-          </div>
 
-          <!-- Button row -->
-          <div class="flex items-center justify-between gap-1.5">
-            <!-- Resume last -->
-            <div class="min-w-0">
-              {#if lastId && saved.find(c => c.id === lastId)}
-                {@const lastConn = saved.find(c => c.id === lastId)}
-                <button type="button"
-                  onclick={() => connectWith(lastConn)}
-                  disabled={isBusy}
-                  class="inline-flex h-8 max-w-[200px] items-center gap-1.5 rounded-lg border border-border/25 px-3 text-[12px] text-muted-foreground/55 transition-colors hover:bg-muted/30 hover:text-foreground disabled:opacity-25"
-                >
-                  {#if connecting === lastConn.id}
-                    <Icon name="loader-2" class="size-3 animate-spin" />Resuming…
+            <div class="flex items-center gap-3">
+              <!-- Status chip + subtle target preview -->
+              <div class="flex min-w-0 flex-1 items-center gap-2 text-[11px]">
+                {#if connecting}
+                  <span class="flex shrink-0 items-center gap-1.5 font-medium text-muted-foreground/70"><Icon name="loader-2" class="size-3 animate-spin" />Connecting…</span>
+                {:else if testing}
+                  <span class="flex shrink-0 items-center gap-1.5 font-medium text-muted-foreground/70"><Icon name="loader-2" class="size-3 animate-spin" />Testing…</span>
+                {:else if error}
+                  <span class="flex shrink-0 items-center gap-1.5 font-medium text-destructive"><span class="size-1.5 rounded-full bg-destructive"></span>Failed</span>
+                {:else if testOk}
+                  <span class="flex shrink-0 items-center gap-1.5 font-medium text-emerald-500"><span class="size-1.5 rounded-full bg-emerald-500"></span>Connection OK</span>
+                {:else if isDirty}
+                  <span class="flex shrink-0 items-center gap-1.5 font-medium text-amber-500/90"><span class="size-1.5 rounded-full bg-amber-500"></span>Unsaved</span>
+                {:else}
+                  <span class="flex shrink-0 items-center gap-1.5 text-muted-foreground/50"><span class="size-1.5 rounded-full bg-muted-foreground/30"></span>Ready</span>
+                {/if}
+                <span class="min-w-0 truncate font-mono text-[10.5px] text-muted-foreground/40" title={statusTarget}>{statusTarget}</span>
+              </div>
+
+              <!-- Actions — Resume (ghost) · Test (outline) · Connect (filled) -->
+              <div class="ml-auto flex shrink-0 items-center gap-2.5">
+                {#if lastId && saved.find(c => c.id === lastId)}
+                  {@const lastConn = saved.find(c => c.id === lastId)}
+                  <button type="button"
+                    onclick={() => connectWith(lastConn)}
+                    disabled={isBusy}
+                    class="inline-flex h-8 max-w-[160px] items-center gap-1.5 rounded-lg px-3 text-[12px] text-muted-foreground/55 transition-[color,background-color,transform] duration-150 ease-out hover:bg-muted/30 hover:text-foreground active:scale-[0.97] disabled:opacity-25"
+                  >
+                    {#if connecting === lastConn.id}
+                      <Icon name="loader-2" class="size-3 animate-spin" />Resuming…
+                    {:else}
+                      Resume <span class="min-w-0 truncate text-foreground/70">{lastConn.name}</span>
+                    {/if}
+                  </button>
+                {/if}
+                {#if isBusy}
+                  <button type="button" onclick={stopOp}
+                    class="inline-flex h-8 items-center gap-1 rounded-lg border border-destructive/30 px-3 text-[12px] font-medium text-destructive transition-[color,background-color,border-color,transform] duration-150 ease-out hover:bg-destructive/10 active:scale-[0.97]">
+                    <Icon name="x" class="size-3" />Stop
+                  </button>
+                {/if}
+                {#if canTest}
+                  <button type="button" onclick={handleTest} disabled={isBusy}
+                    class="inline-flex h-8 items-center gap-1 rounded-lg border border-border/40 px-3.5 text-[12px] text-muted-foreground/70 transition-[color,background-color,border-color,transform] duration-150 ease-out hover:bg-muted/40 hover:text-foreground active:scale-[0.97] disabled:opacity-25">
+                    {#if testing}<Icon name="loader-2" class="size-3 animate-spin" />Testing…{:else}Test{/if}
+                  </button>
+                {/if}
+                <button type="button" onclick={handleConnect} disabled={isBusy || dbType === 'bigquery'}
+                  class="inline-flex h-8 items-center gap-1 rounded-lg bg-foreground px-5 text-[12px] font-semibold text-background shadow-sm transition-[color,background-color,transform,box-shadow] duration-150 ease-out hover:bg-foreground/85 active:scale-[0.97] disabled:opacity-40 disabled:shadow-none">
+                  {#if connecting === (editingId ?? '__new__')}
+                    <Icon name="loader-2" class="size-3 animate-spin" />Connecting…
                   {:else}
-                    Resume <span class="min-w-0 truncate text-foreground/70">{lastConn.name}</span>
+                    {editingId ? 'Save & connect' : 'Connect'}
                   {/if}
                 </button>
-              {/if}
-            </div>
-            <!-- Test + Connect -->
-            <div class="flex shrink-0 items-center gap-2">
-              {#if isBusy}
-                <button type="button" onclick={stopOp}
-                  class="inline-flex h-8 items-center gap-1 rounded-lg border border-destructive/30 px-3 text-[12px] font-medium text-destructive transition-colors hover:bg-destructive/10">
-                  <Icon name="x" class="size-3" />Stop
-                </button>
-              {/if}
-              {#if canTest}
-                <button type="button" onclick={handleTest} disabled={isBusy}
-                  class="inline-flex h-8 items-center gap-1 rounded-lg border border-border/30 px-3.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-muted/40 hover:text-foreground disabled:opacity-25">
-                  {#if testing}<Icon name="loader-2" class="size-3 animate-spin" />Testing…{:else}Test{/if}
-                </button>
-              {/if}
-              <button type="button" onclick={handleConnect} disabled={isBusy || dbType === 'bigquery'}
-                class="inline-flex h-8 items-center gap-1 rounded-lg bg-foreground px-5 text-[12px] font-semibold text-background transition-colors hover:bg-foreground/85 disabled:opacity-40">
-                {#if connecting === (editingId ?? '__new__')}
-                  <Icon name="loader-2" class="size-3 animate-spin" />Connecting…
-                {:else}
-                  {editingId ? 'Save & connect' : 'Connect'}
-                {/if}
-              </button>
+              </div>
             </div>
           </div>
-          </div>
         </div>
       </div>
 
     </div>
 
-    <!-- Close button -->
-    <DialogPrimitive.Close
-      class="absolute right-4 top-4 inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground/40 transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+    <!-- Close button — routes through the unsaved-changes guard -->
+    <button
+      type="button"
+      onclick={requestClose}
+      class="absolute right-4 top-4 inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground/40 transition-[color,background-color,transform] duration-150 ease-out hover:bg-muted/60 hover:text-foreground active:scale-[0.92] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
     >
       <Icon name="x" class="size-4" />
       <span class="sr-only">Close</span>
-    </DialogPrimitive.Close>
+    </button>
+
+    <!-- Discard-changes confirmation (styled, blocks close until answered) -->
+    {#if confirmDiscardOpen}
+      <div class="absolute inset-0 z-[60] flex items-center justify-center bg-black/50 p-6">
+        <div class="w-full max-w-sm rounded-xl border border-border/40 bg-background p-5 shadow-2xl">
+          <div class="flex items-start gap-3">
+            <div class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-amber-500/10 text-amber-500">
+              <Icon name="alert-circle" class="size-4" />
+            </div>
+            <div class="min-w-0">
+              <h3 class="text-[13px] font-semibold text-foreground">Discard unsaved changes?</h3>
+              <p class="mt-1 text-[12px] leading-relaxed text-muted-foreground/70">
+                You have unsaved edits in this connection. Closing now will lose them.
+              </p>
+            </div>
+          </div>
+          <div class="mt-4 flex justify-end gap-2">
+            <button type="button" onclick={() => (confirmDiscardOpen = false)}
+              class="inline-flex h-8 items-center rounded-lg border border-border/40 px-3.5 text-[12px] text-muted-foreground/80 transition-[color,background-color,border-color,transform] duration-150 ease-out hover:bg-muted/40 hover:text-foreground active:scale-[0.97]">
+              Keep editing
+            </button>
+            <button type="button" onclick={discardAndClose}
+              class="inline-flex h-8 items-center rounded-lg bg-destructive px-3.5 text-[12px] font-semibold text-white transition-[opacity,transform] duration-150 ease-out hover:opacity-90 active:scale-[0.97]">
+              Discard
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
     </DialogPrimitive.Content>
   </DialogPrimitive.Portal>
 </DialogPrimitive.Root>
+
+<style>
+  /* The modal is portalled to <body>, outside #app, so it never inherits the
+     app-wide `user-select: none`. Re-establish it here so chrome (labels, titles,
+     rows, buttons, status) can't be drag-selected — while real field VALUES stay
+     selectable. Scoped to this modal only via the data attribute. */
+  :global([data-connection-modal]),
+  :global([data-connection-modal] *) {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  :global([data-connection-modal] input),
+  :global([data-connection-modal] textarea) {
+    user-select: text;
+    -webkit-user-select: text;
+  }
+  /* Pointer cursor on every interactive control in the modal (toggles, Type
+     picker, rows, disclosure, footer buttons); disabled ones fall back. */
+  :global([data-connection-modal] button:not(:disabled)),
+  :global([data-connection-modal] [role='button']),
+  :global([data-connection-modal] summary) {
+    cursor: pointer;
+  }
+
+  /* Decorative entrance for saved / provider rows — fades + rises in.
+     Never blocks clicks (runs on the interactive element itself). */
+  @keyframes -global-cn-rise-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  :global(.cn-stagger-in) {
+    opacity: 0;
+    animation: cn-rise-in 250ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.cn-stagger-in) {
+      animation: none;
+      opacity: 1;
+    }
+  }
+</style>

From 0ee9a791ef959b7c842e2e0271a455448e018983 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 14/27] feat(connect): compact provider sign-in action

---
 src/lib/components/ProviderConnect.svelte | 77 ++++++++++-------------
 1 file changed, 34 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/ProviderConnect.svelte b/src/lib/components/ProviderConnect.svelte
index c4ae47c7..59a04c79 100644
--- a/src/lib/components/ProviderConnect.svelte
+++ b/src/lib/components/ProviderConnect.svelte
@@ -8,6 +8,7 @@
   import LogOut from '@lucide/svelte/icons/log-out'
   import AlertTriangle from '@lucide/svelte/icons/alert-triangle'
   import RefreshCw from '@lucide/svelte/icons/refresh-cw'
+  import ArrowRight from '@lucide/svelte/icons/arrow-right'
   import DbIcon from './DbIcon.svelte'
   import Search from '@lucide/svelte/icons/search'
   import KeyRound from '@lucide/svelte/icons/key-round'
@@ -171,50 +172,40 @@
 
 <div class="flex flex-col gap-3">
   {#if phase === 'idle'}
-    <!-- Not connected — left-aligned, no card -->
-    <div class="flex flex-col gap-5 py-1">
-      <div class="flex items-center gap-3.5">
-        <div class="flex size-12 shrink-0 items-center justify-center rounded-xl border border-border/50 bg-muted/25">
-          <DbIcon id={provider} class="size-6 text-foreground" />
-        </div>
-        <div class="min-w-0">
-          <p class="text-[15px] font-semibold text-foreground">Connect with {meta?.name}</p>
-          <p class="mt-0.5 text-[12.5px] leading-relaxed text-muted-foreground">{meta?.blurb}</p>
-        </div>
+    <!-- Not connected — compact CTA (the selected provider row above already
+         carries the icon + name + blurb, so no redundant hero here). -->
+    {#if meta?.mode === 'token'}
+      <div class="flex flex-col gap-2">
+        <input
+          type="text"
+          bind:value={tokenInput}
+          placeholder="postgres://…"
+          class="h-9 w-full rounded-lg border border-border/60 bg-muted/25 px-3 font-mono text-[11px] outline-none transition-[border-color,box-shadow] focus:border-ring focus:ring-2 focus:ring-ring/20"
+          onkeydown={(e) => { if (e.key === 'Enter') saveToken() }}
+        />
+        <button
+          type="button"
+          class="flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-foreground px-4 text-[13px] font-semibold text-background shadow-sm transition-[background-color,transform] duration-150 ease-out hover:bg-foreground/85 active:scale-[0.98] disabled:opacity-40 disabled:shadow-none"
+          disabled={!tokenInput.trim()}
+          onclick={saveToken}
+        >
+          <KeyRound class="size-4" /> Continue
+        </button>
+        <p class="text-xs text-muted-foreground">Paste your {meta?.name} connection string to continue.</p>
       </div>
-
-      {#if meta?.mode === 'token'}
-        <div class="flex flex-col gap-2">
-          <input
-            type="text"
-            bind:value={tokenInput}
-            placeholder="postgres://…"
-            class="h-9 w-full rounded-lg border border-border/60 bg-muted/25 px-3 font-mono text-[11px] outline-none transition-[border-color,box-shadow] focus:border-ring focus:ring-2 focus:ring-ring/20"
-            onkeydown={(e) => { if (e.key === 'Enter') saveToken() }}
-          />
-          <button
-            type="button"
-            class="flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-foreground px-4 text-[13px] font-semibold text-background transition-colors hover:bg-foreground/85 disabled:opacity-40"
-            disabled={!tokenInput.trim()}
-            onclick={saveToken}
-          >
-            <KeyRound class="size-4" /> Continue
-          </button>
-        </div>
-      {:else}
-        <div class="flex flex-col gap-2.5">
-          <button
-            type="button"
-            class="flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-foreground px-5 text-[13px] font-semibold text-background transition-colors hover:bg-foreground/85"
-            onclick={startAuth}
-          >
-            <DbIcon id={provider} class="size-4" />
-            Sign in with {meta?.name}
-          </button>
-          <p class="text-[11px] text-muted-foreground/45">Opens your browser to authorize · secure PKCE flow</p>
-        </div>
-      {/if}
-    </div>
+    {:else}
+      <div class="flex flex-col gap-2">
+        <button
+          type="button"
+          class="group flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-foreground px-5 text-[13px] font-semibold text-background shadow-sm transition-[background-color,transform] duration-150 ease-out hover:bg-foreground/85 active:scale-[0.98]"
+          onclick={startAuth}
+        >
+          Sign in with {meta?.name}
+          <ArrowRight class="size-4 transition-transform duration-150 ease-out group-hover:translate-x-0.5" />
+        </button>
+        <p class="text-xs text-muted-foreground">Opens your browser to authorize · secure PKCE flow</p>
+      </div>
+    {/if}
 
   {:else if phase === 'authorizing'}
     <div class="flex flex-col gap-4 py-2">

From 4a2fcc14852a0548bd7b7b906c3e4f2a06ae08a2 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 15/27] feat(settings): tighten spacing and control feedback

---
 src/lib/components/SettingsDialog.svelte | 74 ++++++++++++++++--------
 1 file changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/SettingsDialog.svelte b/src/lib/components/SettingsDialog.svelte
index c2ce1d67..c9d26745 100644
--- a/src/lib/components/SettingsDialog.svelte
+++ b/src/lib/components/SettingsDialog.svelte
@@ -189,7 +189,7 @@
               type="button"
               onclick={() => { category = c.id; query = ''; }}
               class={cn(
-                'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors',
+                'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-[13px] transition-[background-color,color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.98]',
                 !searching && category === c.id
                   ? 'bg-muted/60 font-medium text-foreground'
                   : 'text-muted-foreground hover:bg-muted/30 hover:text-foreground',
@@ -205,24 +205,28 @@
       <!-- ── Right: content ──────────────────────────────────────── -->
       <div class="app-scroll min-h-0 overflow-y-auto">
         <div class="mx-auto max-w-[42rem] px-8 py-7">
-          <h2 class="mb-6 text-[15px] font-semibold tracking-tight text-foreground">
-            {searching ? 'Search results' : activeCategory.label}
-          </h2>
-
-          {#if searching}
-            {@render generalContent()}
-            {@render appearanceContent()}
-            {@render integrationsContent()}
-            {@render aboutContent()}
-          {:else if category === 'general'}
-            {@render generalContent()}
-          {:else if category === 'appearance'}
-            {@render appearanceContent()}
-          {:else if category === 'integrations'}
-            {@render integrationsContent()}
-          {:else}
-            {@render aboutContent()}
-          {/if}
+          {#key searching ? '__search__' : category}
+            <div class="settings-pane">
+              <h2 class="mb-6 text-[15px] font-semibold tracking-tight text-foreground">
+                {searching ? 'Search results' : activeCategory.label}
+              </h2>
+
+              {#if searching}
+                {@render generalContent()}
+                {@render appearanceContent()}
+                {@render integrationsContent()}
+                {@render aboutContent()}
+              {:else if category === 'general'}
+                {@render generalContent()}
+              {:else if category === 'appearance'}
+                {@render appearanceContent()}
+              {:else if category === 'integrations'}
+                {@render integrationsContent()}
+              {:else}
+                {@render aboutContent()}
+              {/if}
+            </div>
+          {/key}
         </div>
       </div>
     </div>
@@ -247,11 +251,11 @@
       type="button" role="switch" aria-checked={checked} aria-label={label}
       onclick={ontoggle}
       class={cn(
-        'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors',
+        'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-[background-color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.98]',
         checked ? 'bg-primary' : 'bg-muted',
       )}
     >
-      <span class={cn('pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform', checked ? 'translate-x-4' : 'translate-x-0.5')}></span>
+      <span class={cn('pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]', checked ? 'translate-x-4' : 'translate-x-0.5')}></span>
     </button>
   </div>
 {/snippet}
@@ -445,7 +449,7 @@
         <Button type="button" variant="ghost" size="icon" class="size-7" aria-label="Zoom out" disabled={!canDecreaseZoom(settings.zoom)} onclick={() => bumpZoom(-1)}>
           <Minus class="size-3.5" />
         </Button>
-        <button type="button" class="min-w-12 rounded-md px-2 py-1 font-mono text-xs tabular-nums text-foreground hover:bg-muted" onclick={() => (settings = resetZoom())} title="Reset to 100%">{zoomLabel}</button>
+        <button type="button" class="min-w-12 rounded-md px-2 py-1 font-mono text-xs tabular-nums text-foreground transition-[background-color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted active:scale-[0.98]" onclick={() => (settings = resetZoom())} title="Reset to 100%">{zoomLabel}</button>
         <Button type="button" variant="ghost" size="icon" class="size-7" aria-label="Zoom in" disabled={!canIncreaseZoom(settings.zoom)} onclick={() => bumpZoom(1)}>
           <Plus class="size-3.5" />
         </Button>
@@ -483,7 +487,7 @@
         <p class="text-[13px] font-medium text-foreground">Website</p>
         <p class="mt-0.5 text-[12px] leading-relaxed text-muted-foreground">Docs, licensing, and support.</p>
       </div>
-      <a href="https://stroke.click" target="_blank" rel="noopener noreferrer" class="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 text-ui-xs font-medium text-foreground transition-colors hover:bg-muted">
+      <a href="https://stroke.click" target="_blank" rel="noopener noreferrer" class="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 text-ui-xs font-medium text-foreground transition-[background-color,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted active:scale-[0.98]">
         stroke.click <Icon name="external-link" class="size-3.5" />
       </a>
     </div>
@@ -507,3 +511,27 @@
     {action}
   </span>
 {/snippet}
+
+<style>
+  /* Section/search switch: opacity + subtle lift, ease-out, <250ms */
+  .settings-pane {
+    animation: settings-pane-in 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+
+  @keyframes settings-pane-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .settings-pane {
+      animation: none;
+    }
+  }
+</style>

From 353262f0306a4da0b5c0cd0329d73b90315b9ae4 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 16/27] chore(status-bar): update status bar

---
 src/lib/components/StatusBar.svelte | 76 +++++++++++++++++++----------
 1 file changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index 47112a0b..6bc9fdbd 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -8,6 +8,7 @@
   import { providerListDatabases } from '$lib/providers.js'
   import { engineFamily } from '$lib/stores/connections.js'
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
+  import * as Dialog from '$lib/components/ui/dialog/index.js'
   import AppearanceMenu from './AppearanceMenu.svelte'
   import CreateDatabaseDialog from './CreateDatabaseDialog.svelte'
 
@@ -309,19 +310,21 @@
   /** Shared label+icon button */
   const labelBtn = 'flex items-center gap-1.5 rounded-md px-2 py-1 transition-colors hover:bg-muted/50 hover:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground'
 
-  // Tools menu — built from one list so every row renders identically.
+  let toolsOpen = $state(false)
+
+  // Tools launcher — built from one list so every card renders identically.
   const toolItems = $derived.by(() => {
     const t = connection?.type ?? 'postgres'
-    /** @type {{ label: string, icon: string, onclick: () => void }[]} */
+    /** @type {{ label: string, desc: string, icon: string, onclick: () => void }[]} */
     const items = []
-    if (t === 'postgres' || t === 'mysql') items.push({ label: 'Schema Explorer', icon: 'layout-template', onclick: onopenSchema })
-    items.push({ label: 'Activity Log', icon: 'history', onclick: onopenlogs })
-    if (t === 'postgres') items.push({ label: 'Security', icon: 'shield-check', onclick: onopensecurity })
-    items.push({ label: 'ORM Runner', icon: 'code-2', onclick: onopenorm })
-    items.push({ label: 'Backup & Restore', icon: 'archive', onclick: onopenbackup })
-    items.push({ label: 'Charts', icon: 'bar-chart-2', onclick: onopenchartspage })
-    items.push({ label: 'Dashboard', icon: 'layout-dashboard', onclick: onopendashboard })
-    items.push({ label: 'Diagrams', icon: 'git-branch', onclick: onopendiagrams })
+    if (t === 'postgres' || t === 'mysql') items.push({ label: 'Schema Explorer', desc: 'Tables, columns & types', icon: 'layout-template', onclick: onopenSchema })
+    items.push({ label: 'Activity Log', desc: 'Recent queries & events', icon: 'history', onclick: onopenlogs })
+    if (t === 'postgres') items.push({ label: 'Security', desc: 'Roles, policies & RLS', icon: 'shield-check', onclick: onopensecurity })
+    items.push({ label: 'ORM Runner', desc: 'Run typed ORM queries', icon: 'code-2', onclick: onopenorm })
+    items.push({ label: 'Backup & Restore', desc: 'Export & import data', icon: 'archive', onclick: onopenbackup })
+    items.push({ label: 'Charts', desc: 'Visualize query results', icon: 'bar-chart-2', onclick: onopenchartspage })
+    items.push({ label: 'Dashboard', desc: 'Saved metrics at a glance', icon: 'layout-dashboard', onclick: onopendashboard })
+    items.push({ label: 'Diagrams', desc: 'Entity-relationship map', icon: 'git-branch', onclick: onopendiagrams })
     return items
   })
 </script>
@@ -665,24 +668,43 @@
       {@render sep()}
     {/if}
 
-    <!-- Tools overflow (all navigation tools in one dropdown) -->
+    <!-- Tools launcher (all navigation tools in one panel) -->
     {#if connection}
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger class={iconBtn} title="Tools">
-          <Icon name="more-horizontal" class="size-3.5" />
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content side="top" align="end" class="w-52">
-          <DropdownMenu.Label>Tools</DropdownMenu.Label>
-          {#each toolItems as item (item.label)}
-            {@const iconName = item.icon}
-            <DropdownMenu.Item class="cursor-pointer" onclick={item.onclick}>
-              <Icon name={iconName} class="size-3.5 shrink-0 text-muted-foreground/45" />
-              <span class="truncate">{item.label}</span>
-              {#if !hasPro}{@render proBadge()}{/if}
-            </DropdownMenu.Item>
-          {/each}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <Dialog.Root bind:open={toolsOpen}>
+        <Dialog.Trigger class={cn(iconBtn, toolsOpen && 'bg-muted/50 text-foreground')} title="Tools">
+          <Icon name="layout-list" class="size-3.5" />
+        </Dialog.Trigger>
+        <Dialog.Content showCloseButton={false} class="gap-0 overflow-hidden p-0 sm:max-w-lg">
+          <div class="flex items-center justify-between border-b border-border/50 px-4 py-3">
+            <div class="flex items-center gap-2">
+              <Icon name="layout-list" class="size-4 text-muted-foreground/50" />
+              <Dialog.Title class="text-ui-sm font-semibold tracking-tight">Tools</Dialog.Title>
+            </div>
+            <span class="font-mono text-ui-2xs text-muted-foreground/40">{toolItems.length} features</span>
+          </div>
+          <div class="grid grid-cols-2 gap-1.5 p-3">
+            {#each toolItems as item (item.label)}
+              {@const iconName = item.icon}
+              <button
+                type="button"
+                class="group/tool flex items-center gap-3 rounded-lg border border-transparent p-2.5 text-left transition-colors hover:border-border/60 hover:bg-accent focus-visible:border-border/60 focus-visible:bg-accent focus-visible:outline-none"
+                onclick={() => { toolsOpen = false; item.onclick() }}
+              >
+                <span class="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-muted/40 text-muted-foreground/70 transition-colors group-hover/tool:border-border group-hover/tool:bg-muted group-hover/tool:text-foreground">
+                  <Icon name={iconName} class="size-4" />
+                </span>
+                <span class="flex min-w-0 flex-1 flex-col">
+                  <span class="flex items-center gap-1.5">
+                    <span class="truncate text-ui-xs font-medium text-foreground">{item.label}</span>
+                    {#if !hasPro}{@render proBadge()}{/if}
+                  </span>
+                  <span class="truncate text-ui-2xs text-muted-foreground/50">{item.desc}</span>
+                </span>
+              </button>
+            {/each}
+          </div>
+        </Dialog.Content>
+      </Dialog.Root>
       {@render sep()}
     {/if}
 

From 27575ac8da3bd8e32cbbe080fc0191f4c319f646 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 17/27] chore: update keyboard shortcuts dialog

---
 src/lib/components/KeyboardShortcutsDialog.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/components/KeyboardShortcutsDialog.svelte b/src/lib/components/KeyboardShortcutsDialog.svelte
index 24c95561..38b1d375 100644
--- a/src/lib/components/KeyboardShortcutsDialog.svelte
+++ b/src/lib/components/KeyboardShortcutsDialog.svelte
@@ -116,6 +116,9 @@
       label: "Appearance",
       icon: Palette,
       shortcuts: [
+        { keys: [mod, "B"], desc: "Toggle sidebar" },
+        { keys: [mod, "⇧", "T"], desc: "Toggle tab bar" },
+        { keys: [mod, "⇧", "B"], desc: "Toggle status bar" },
         { keys: [mod, "M"], desc: "Cycle theme" },
         { keys: [mod, "⇧", "M"], desc: "Previous theme" },
         { keys: [mod, "+"], desc: "Zoom in" },
@@ -127,6 +130,7 @@
       label: "General",
       icon: Settings,
       shortcuts: [
+        { keys: [mod, "?"], desc: "Keyboard shortcuts" },
         { keys: ["?"], desc: "Keyboard shortcuts" },
         { keys: [mod, ","], desc: "Settings" },
         { keys: ["Esc"], desc: "Dismiss / close" },

From 091bc703a3b44a1380f15cf56abb5242a16af743 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 18/27] refactor: connection URI parsing

---
 src/lib/connection-uri.js | 126 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 2 deletions(-)

diff --git a/src/lib/connection-uri.js b/src/lib/connection-uri.js
index 48597e72..961e12ea 100644
--- a/src/lib/connection-uri.js
+++ b/src/lib/connection-uri.js
@@ -42,6 +42,124 @@ export function parsePostgresUri(uri) {
   }
 }
 
+/**
+ * MySQL / MariaDB connection URI, e.g. `mysql://user:pass@host:3306/db`.
+ * @param {string} uri
+ * @returns {ParsedPostgresUri | { error: string } | null}
+ */
+export function parseMysqlUri(uri) {
+  const trimmed = uri.trim()
+  if (!trimmed) return null
+
+  let normalized = trimmed
+  if (/^(mysql|mariadb):\/\//i.test(normalized)) {
+    // Normalize any recognized scheme to mysql:// so the URL parser is happy.
+    normalized = `mysql://${normalized.replace(/^[a-z]+:\/\//i, '')}`
+  } else if (trimmed.includes('@') || /^[^/]+:\d+\//.test(trimmed)) {
+    normalized = `mysql://${trimmed}`
+  } else {
+    return { error: 'Expected a mysql:// connection URI' }
+  }
+
+  try {
+    const url = new URL(normalized)
+    const sslMode = url.searchParams.get('ssl-mode')?.toLowerCase()
+    const ssl =
+      sslMode === 'required' ||
+      sslMode === 'verify_ca' ||
+      sslMode === 'verify_identity' ||
+      url.searchParams.get('ssl') === 'true'
+
+    return {
+      host: url.hostname || '127.0.0.1',
+      port: url.port || '3306',
+      database: decodeURIComponent(url.pathname.replace(/^\//, '')),
+      user: decodeURIComponent(url.username),
+      password: decodeURIComponent(url.password),
+      ssl,
+    }
+  } catch {
+    return { error: 'Could not parse connection URI' }
+  }
+}
+
+/**
+ * SQL Server URI, e.g. `sqlserver://sa:pass@host:1433/db?encrypt=true`.
+ * @param {string} uri
+ * @returns {{ host: string, port: string, database: string, user: string, password: string, encrypt: boolean, trustCert: boolean } | { error: string } | null}
+ */
+export function parseMssqlUri(uri) {
+  const trimmed = uri.trim()
+  if (!trimmed) return null
+
+  let normalized = trimmed
+  if (/^(sqlserver|mssql):\/\//i.test(normalized)) {
+    normalized = `mssql://${normalized.replace(/^[a-z]+:\/\//i, '')}`
+  } else if (trimmed.includes('@') || /^[^/]+:\d+\//.test(trimmed)) {
+    normalized = `mssql://${trimmed}`
+  } else {
+    return { error: 'Expected a sqlserver:// connection URI' }
+  }
+
+  const truthy = (v) => v === 'true' || v === '1' || v === 'yes'
+  try {
+    const url = new URL(normalized)
+    const trust = url.searchParams.get('trustservercertificate')?.toLowerCase()
+    return {
+      host: url.hostname || '127.0.0.1',
+      port: url.port || '1433',
+      database: decodeURIComponent(url.pathname.replace(/^\//, '')),
+      user: decodeURIComponent(url.username),
+      password: decodeURIComponent(url.password),
+      encrypt: truthy(url.searchParams.get('encrypt')?.toLowerCase() ?? ''),
+      // Default to trusting the cert (matches the form default; most local/dev
+      // SQL Servers use a self-signed cert), unless the URI explicitly says false.
+      trustCert: trust == null ? true : truthy(trust),
+    }
+  } catch {
+    return { error: 'Could not parse connection URI' }
+  }
+}
+
+/**
+ * ClickHouse URI: `clickhouse://user:pass@host:8123/db` or an http(s):// URL.
+ * @param {string} uri
+ * @returns {{ host: string, port: string, database: string, user: string, password: string, secure: boolean } | { error: string } | null}
+ */
+export function parseClickhouseUri(uri) {
+  const trimmed = uri.trim()
+  if (!trimmed) return null
+
+  const m = trimmed.match(/^(clickhouse|https?):\/\//i)
+  const scheme = m?.[1]?.toLowerCase() ?? null
+  let normalized
+  if (scheme === 'clickhouse') {
+    normalized = `http://${trimmed.replace(/^clickhouse:\/\//i, '')}`
+  } else if (scheme) {
+    normalized = trimmed
+  } else if (trimmed.includes('@') || /^[^/]+:\d+\//.test(trimmed)) {
+    normalized = `http://${trimmed}`
+  } else {
+    return { error: 'Expected a clickhouse:// or http(s):// URI' }
+  }
+
+  try {
+    const url = new URL(normalized)
+    const secure = scheme === 'https' || url.port === '8443'
+    return {
+      host: url.hostname || '127.0.0.1',
+      port: url.port || (secure ? '8443' : '8123'),
+      database:
+        decodeURIComponent(url.pathname.replace(/^\//, '')) || url.searchParams.get('database') || '',
+      user: decodeURIComponent(url.username) || url.searchParams.get('user') || '',
+      password: decodeURIComponent(url.password) || url.searchParams.get('password') || '',
+      secure,
+    }
+  } catch {
+    return { error: 'Could not parse connection URI' }
+  }
+}
+
 /**
  * @param {string} uri
  * @returns {ParsedSqliteUri | { error: string } | null}
@@ -66,10 +184,14 @@ export function parseSqliteUri(uri) {
 }
 
 /**
- * @param {'postgres'|'sqlite'} type
+ * @param {'postgres'|'sqlite'|'mysql'|'mssql'|'clickhouse'} type
  * @param {string} uri
  * @returns {ParsedPostgresUri | ParsedSqliteUri | { error: string } | null}
  */
 export function parseConnectionUri(type, uri) {
-  return type === 'sqlite' ? parseSqliteUri(uri) : parsePostgresUri(uri)
+  if (type === 'sqlite') return parseSqliteUri(uri)
+  if (type === 'mysql') return parseMysqlUri(uri)
+  if (type === 'mssql') return parseMssqlUri(uri)
+  if (type === 'clickhouse') return parseClickhouseUri(uri)
+  return parsePostgresUri(uri)
 }

From 7844141b56ad9f3d9702807a8cddfb371c524c81 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 19/27] chore: update database capabilities

---
 src/lib/db-capabilities.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/lib/db-capabilities.js b/src/lib/db-capabilities.js
index c4ea37eb..c04cc7c6 100644
--- a/src/lib/db-capabilities.js
+++ b/src/lib/db-capabilities.js
@@ -38,6 +38,24 @@ const SUPPORT = {
   editStructure: new Set(['postgres']),
 }
 
+/**
+ * Saved-connection type aliases → the backend driver the capabilities map keys
+ * on. MariaDB is driven by the MySQL backend, and CockroachDB by the Postgres
+ * one, but the frontend keeps their distinct type so the UI can label them —
+ * so map them back here before any capability lookup.
+ * @type {Record<string, string>}
+ */
+const ENGINE_ALIAS = {
+  mariadb: 'mysql',
+  cockroachdb: 'postgres',
+}
+
+/** @param {string | null | undefined} engine */
+export function normalizeEngine(engine) {
+  if (!engine) return engine
+  return ENGINE_ALIAS[engine] ?? engine
+}
+
 /**
  * Is `feature` available on the given engine?
  * Unknown/missing engine → false (fail closed, so we never call an unsupported command).
@@ -46,8 +64,9 @@ const SUPPORT = {
  * @returns {boolean}
  */
 export function engineSupports(feature, engine) {
-  if (!engine) return false
-  return SUPPORT[feature]?.has(engine) ?? false
+  const e = normalizeEngine(engine)
+  if (!e) return false
+  return SUPPORT[feature]?.has(e) ?? false
 }
 
 /** Human-friendly engine name for messages. */
@@ -60,6 +79,8 @@ const ENGINE_LABEL = /** @type {Record<string, string>} */ ({
   clickhouse: 'ClickHouse',
   duckdb: 'DuckDB',
   mssql: 'SQL Server',
+  mariadb: 'MariaDB',
+  cockroachdb: 'CockroachDB',
 })
 
 /** @param {string | null | undefined} engine */

From b2b9557e9f65689e4c9daa719c6733420e7738ce Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 20/27] chore: update data diff page

---
 src/lib/components/DataDiffPage.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/DataDiffPage.svelte b/src/lib/components/DataDiffPage.svelte
index 03327141..17690ab0 100644
--- a/src/lib/components/DataDiffPage.svelte
+++ b/src/lib/components/DataDiffPage.svelte
@@ -39,6 +39,20 @@
   // svelte-ignore state_referenced_locally
   const _init = activeSchema
 
+  // System/catalog schemas that sort ahead of the user's real schema (e.g.
+  // Cockroach's crdb_internal, PG's pg_catalog) — picking schemas[0] would land
+  // on one of these and every table lookup fails ("relation X does not exist").
+  const SYSTEM_SCHEMAS = new Set([
+    'crdb_internal', 'information_schema', 'pg_catalog', 'pg_toast', 'pg_extension',
+    'sys', 'mysql', 'performance_schema', 'sys_catalog',
+  ])
+  /** Best default schema: prefer `public`, then any non-system schema, else the first. */
+  function pickDefaultSchema(/** @type {string[]} */ list) {
+    if (!list.length) return ''
+    if (list.includes('public')) return 'public'
+    return list.find((s) => !SYSTEM_SCHEMAS.has(s.toLowerCase())) ?? list[0]
+  }
+
   /** @param {string} connId @param {string} database @param {string} schema @returns {SourceState} */
   function makeSource(connId, database, schema) {
     return { connId, database, databases: [], loadingDbs: false, schema, schemas: [], loadingSchemas: false, table: '', tables: [], loadingTables: false, mode: 'table', sql: '' }
@@ -256,14 +270,14 @@
   async function loadSchemas(/** @type {SourceState} */ src, /** @type {SavedConnection} */ cfg, /** @type {(s:SourceState)=>void} */ set) {
     if (!cfg) return
     if (isCurrent(src.connId) && cfg.database === connById(src.connId)?.database) {
-      const schema = schemas[0] ?? ''
+      const schema = pickDefaultSchema(schemas)
       const next = { ...src, schemas, schema, tables: [], table: '', loadingSchemas: false }
       set(next); await loadTables(next, cfg, set); return
     }
     set({ ...src, loadingSchemas: true, schemas: [], schema: '', tables: [], table: '' })
     try {
       const s = await listSchemasOnConnection(cfg)
-      const schema = s[0] ?? ''
+      const schema = pickDefaultSchema(s)
       const next = { ...src, loadingSchemas: false, schemas: s, schema, tables: [], table: '' }
       set(next)
       if (schema) await loadTables(next, cfg, set)

From 04e1347e6c774a5967f9b8c27507bd99c5b21ea7 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 21/27] refactor(erd): consolidate ERD into a single canvas
 component

---
 src/lib/components/EntityRelationPage.svelte | 169 +++---
 src/lib/components/ErdCanvas.svelte          | 570 +++++++++++++++++++
 src/lib/components/ErdFocusController.svelte |  15 -
 src/lib/components/ErdRelationEdge.svelte    |  71 ---
 src/lib/components/ErdTableNode.svelte       | 136 -----
 5 files changed, 652 insertions(+), 309 deletions(-)
 create mode 100644 src/lib/components/ErdCanvas.svelte
 delete mode 100644 src/lib/components/ErdFocusController.svelte
 delete mode 100644 src/lib/components/ErdRelationEdge.svelte
 delete mode 100644 src/lib/components/ErdTableNode.svelte

diff --git a/src/lib/components/EntityRelationPage.svelte b/src/lib/components/EntityRelationPage.svelte
index b66350cd..06fffcb5 100644
--- a/src/lib/components/EntityRelationPage.svelte
+++ b/src/lib/components/EntityRelationPage.svelte
@@ -1,12 +1,8 @@
 <script>
   import { tick, untrack } from 'svelte'
-  import { SvelteFlow, Background, Controls, MiniMap, Panel } from '@xyflow/svelte'
-  import '@xyflow/svelte/dist/style.css'
   import dagre from '@dagrejs/dagre'
   import { listTables, getTableColumnStructure, listIndexes } from '$lib/api.js'
-  import ErdTableNode from './ErdTableNode.svelte'
-  import ErdRelationEdge from './ErdRelationEdge.svelte'
-  import ErdFocusController from './ErdFocusController.svelte'
+  import ErdCanvas from './ErdCanvas.svelte'
   import Loader from '@lucide/svelte/icons/loader'
   import RefreshCw from '@lucide/svelte/icons/refresh-cw'
   import Search from '@lucide/svelte/icons/search'
@@ -42,8 +38,10 @@
   const BATCH     = 16
   const WARN_MANY = 60
 
-  const nodeTypes = { tableNode: ErdTableNode }
-  const edgeTypes = { relation: ErdRelationEdge }
+  const cfg = { NODE_W, ROW_H, HDR_H, PAD_B }
+
+  /** @type {ErdCanvas|null} */
+  let erd = $state(null)
 
   // ── State ─────────────────────────────────────────────────────────────────
   let loading       = $state(false)
@@ -91,17 +89,48 @@
 
     if (conn.length) {
       const g = new dagre.graphlib.Graph()
-      g.setGraph({ rankdir: 'LR', ranksep: 200, nodesep: 72, marginx: 64, marginy: 64 })
+      g.setGraph({ rankdir: 'LR', ranksep: 220, nodesep: 48, marginx: 60, marginy: 60 })
       g.setDefaultEdgeLabel(() => ({}))
       for (const n of conn) {
         g.setNode(n.id, { width: NODE_W, height: n.data ? nodeH(n.data) : HDR_H })
       }
       for (const e of es) g.setEdge(e.source, e.target)
       dagre.layout(g)
-      laidConn = conn.map(n => {
+
+      // Dagre lays each rank as a single vertical line — for a hub referenced by
+      // dozens of tables that becomes an unreadable tall smear. Re-flow each rank
+      // (nodes share an x in LR mode) into multiple sub-columns capped at a target
+      // height, so a big fan spreads into a readable grid. Generous gaps keep the
+      // cards from crowding and give the edges room to fan without overlapping.
+      const COL_GAP = 96, ROW_GAP = 52, RANK_GAP = 260, TARGET_H = 3200
+      /** @type {Map<number, {n:any,y:number,h:number}[]>} */
+      const ranks = new Map()
+      for (const n of conn) {
         const p = g.node(n.id)
+        const key = Math.round(p.x)
+        if (!ranks.has(key)) ranks.set(key, [])
+        ranks.get(key)?.push({ n, y: p.y, h: n.data ? nodeH(n.data) : HDR_H })
+      }
+      /** @type {Map<string, {x:number,y:number}>} */
+      const placed = new Map()
+      let cursorX = 40
+      for (const key of [...ranks.keys()].sort((a, b) => a - b)) {
+        const items = (ranks.get(key) ?? []).sort((a, b) => a.y - b.y)
+        const maxH = items.reduce((m, it) => Math.max(m, it.h), HDR_H)
+        const rows = Math.max(1, Math.floor(TARGET_H / (maxH + ROW_GAP)))
+        const cols = Math.ceil(items.length / rows)
+        const colY = new Array(cols).fill(40) // per sub-column running Y (packs tight)
+        for (let i = 0; i < items.length; i++) {
+          const col = Math.floor(i / rows)
+          placed.set(items[i].n.id, { x: cursorX + col * (NODE_W + COL_GAP), y: colY[col] })
+          colY[col] += items[i].h + ROW_GAP
+        }
+        cursorX += cols * (NODE_W + COL_GAP) + RANK_GAP
+      }
+
+      laidConn = conn.map(n => {
         const h = n.data ? nodeH(n.data) : HDR_H
-        const pos = { x: p.x - NODE_W / 2, y: p.y - h / 2 }
+        const pos = placed.get(n.id) ?? { x: 0, y: 0 }
         bottomY = Math.max(bottomY, pos.y + h)
         return { ...n, position: pos }
       })
@@ -134,13 +163,14 @@
         if (!col.foreignKey) continue
         const parts    = col.foreignKey.split('.')
         const refTable = parts.length >= 3 ? parts[1] : parts[0]
+        const refCol   = parts.length >= 3 ? parts[2] : parts[1]
         if (!tableMeta.has(refTable)) continue
         rawEdges.push({
           id:           `${t.name}__${col.name}__${refTable}`,
           source:       t.name,
           target:       refTable,
           sourceHandle: `src-${col.name}`,
-          targetHandle: 'tgt',
+          targetHandle: refCol ? `tgt-${refCol}` : 'tgt',
           type:         'relation',
         })
         connected.add(t.name)
@@ -208,6 +238,13 @@
   function reLayout() {
     _posCache.clear()
     buildGraph(true)
+    tick().then(() => erd?.fit())
+  }
+
+  /** Persist a dragged node's new position so rebuilds and exports keep it. */
+  function onNodeMoved(/** @type {string} */ id, /** @type {number} */ x, /** @type {number} */ y) {
+    _posCache.set(id, { x, y })
+    nodes = nodes.map((n) => (n.id === id ? { ...n, position: { x, y } } : n))
   }
 
   // ── Load ──────────────────────────────────────────────────────────────────
@@ -311,6 +348,11 @@
     return hits.length === 1 ? hits[0] : null
   })
 
+  $effect(() => {
+    const id = focusNodeId
+    if (id) untrack(() => erd?.focus(id))
+  })
+
   const selMeta = $derived(selectedTable ? (tableMeta.get(selectedTable) ?? null) : null)
   const selFks  = $derived(selMeta?.columns.filter(c => c.foreignKey) ?? [])
   const refBy   = $derived(
@@ -681,40 +723,35 @@
       </div>
 
     {:else}
-      <SvelteFlow
-        bind:nodes
-        bind:edges
-        {nodeTypes}
-        {edgeTypes}
-        fitView
-        fitViewOptions={{ padding: 0.12 }}
-        minZoom={0.04}
-        maxZoom={2.5}
-        nodesDraggable={true}
-        nodesConnectable={false}
-        elementsSelectable={true}
-        onlyRenderVisibleElements={nodes.length > 40}
-        class="erd-canvas"
-        style="background: hsl(var(--background))"
-        onpaneclick={() => (selectedTable = null)}
-      >
-        <Background variant="dots" gap={22} size={1} class="opacity-[0.12]" />
-        <Controls showInteractive={false} />
-        <MiniMap
-          nodeColor={() => 'hsl(var(--muted))'}
-          maskColor="hsl(var(--background)/0.75)"
-          style="background:hsl(var(--panel)); border:1px solid hsl(var(--border)/0.5); border-radius:8px; right:16px; bottom:16px;"
-        />
-        <ErdFocusController {focusNodeId} />
-
-        {#if tableMeta.size === 0 && !loading}
-          <Panel position="top-center">
-            <div class="mt-4 rounded-lg border border-border/50 bg-panel px-4 py-3 font-mono text-ui-xs text-muted-foreground/60">
-              No tables found in <span class="text-foreground/70">{activeSchema}</span>
-            </div>
-          </Panel>
-        {/if}
-      </SvelteFlow>
+      <ErdCanvas
+        bind:this={erd}
+        {nodes}
+        {edges}
+        {cfg}
+        selectedId={selectedTable}
+        onselect={(id) => (selectedTable = id)}
+        onopen={(name) => onopentable?.(activeSchema, name)}
+        onnodemoved={onNodeMoved}
+      />
+
+      {#if tableMeta.size === 0 && !loading}
+        <div class="pointer-events-none absolute inset-x-0 top-4 flex justify-center">
+          <div class="rounded-lg border border-border/50 bg-panel px-4 py-3 font-mono text-ui-xs text-muted-foreground/60">
+            No tables found in <span class="text-foreground/70">{activeSchema}</span>
+          </div>
+        </div>
+      {/if}
+
+      <!-- ── Legend ───────────────────────────────────────────────────────── -->
+      {#if tableMeta.size > 0}
+        <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center">
+          <div class="flex items-center gap-4 rounded-full border border-border/50 bg-panel/90 px-4 py-1.5 font-mono text-ui-2xs text-muted-foreground/70 shadow-lg backdrop-blur">
+            <span class="flex items-center gap-1.5"><span class="inline-block size-2 rounded-sm" style="background:hsl(38 92% 55%)"></span>Primary key</span>
+            <span class="flex items-center gap-1.5"><span class="inline-block size-2 rounded-sm" style="background:hsl(217 91% 65%)"></span>Foreign key</span>
+            <span class="flex items-center gap-1.5"><span class="inline-block h-px w-4" style="background:hsl(var(--border))"></span>Relationship</span>
+          </div>
+        </div>
+      {/if}
 
       <!-- ── Detail panel ───────────────────────────────────────────────── -->
       {#if selMeta}
@@ -788,45 +825,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  :global(.erd-canvas .svelte-flow__node) {
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-  }
-  :global(.erd-canvas .svelte-flow__node.selected) {
-    box-shadow: none !important;
-  }
-  :global(.erd-canvas .svelte-flow__edge-path) {
-    stroke-width: 1.5;
-  }
-  :global(.erd-canvas .svelte-flow__controls) {
-    background: hsl(var(--panel));
-    border: 1px solid hsl(var(--border)/0.5);
-    border-radius: 8px;
-    overflow: hidden;
-    gap: 0;
-  }
-  :global(.erd-canvas .svelte-flow__controls-button) {
-    background: hsl(var(--panel));
-    border-bottom: 1px solid hsl(var(--border)/0.4);
-    color: hsl(var(--muted-foreground));
-    padding: 7px;
-  }
-  :global(.erd-canvas .svelte-flow__controls-button:hover) {
-    background: hsl(var(--accent));
-    color: hsl(var(--foreground));
-  }
-  :global(.erd-canvas .svelte-flow__controls-button svg) {
-    fill: currentColor;
-  }
-  :global(.erd-canvas .svelte-flow__handle) {
-    pointer-events: none;
-  }
-  :global(.erd-canvas .svelte-flow__attribution) {
-    display: none;
-  }
-</style>
diff --git a/src/lib/components/ErdCanvas.svelte b/src/lib/components/ErdCanvas.svelte
new file mode 100644
index 00000000..eb53c76b
--- /dev/null
+++ b/src/lib/components/ErdCanvas.svelte
@@ -0,0 +1,570 @@
+<script>
+  import { onMount, onDestroy } from 'svelte'
+  import Plus from '@lucide/svelte/icons/plus'
+  import Minus from '@lucide/svelte/icons/minus'
+  import Maximize from '@lucide/svelte/icons/maximize'
+
+  /**
+   * High-FPS canvas ER renderer. Consumes the same node/edge model the page
+   * builds for Dagre and draws it on a single 2D canvas with viewport culling
+   * and level-of-detail, so large schemas stay smooth where a DOM graph chokes.
+   *
+   * @typedef {{ id:string, position:{x:number,y:number}, data:any }} FlowNode
+   * @typedef {{ id:string, source:string, target:string, sourceHandle?:string }} FlowEdge
+   */
+
+  let {
+    nodes = /** @type {FlowNode[]} */ ([]),
+    edges = /** @type {FlowEdge[]} */ ([]),
+    cfg = { NODE_W: 230, ROW_H: 22, HDR_H: 34, PAD_B: 4 },
+    selectedId = /** @type {string|null} */ (null),
+    onselect = /** @type {(id:string|null)=>void} */ (() => {}),
+    onopen = /** @type {(id:string)=>void} */ (() => {}),
+    onnodemoved = /** @type {(id:string,x:number,y:number)=>void} */ (() => {}),
+  } = $props()
+
+  const { NODE_W, ROW_H, HDR_H, PAD_B } = cfg
+
+  // Match the app's type system (Geist / Geist Mono) — the generic ui-monospace
+  // fallback renders poorly on Linux/WebKitGTK. Names use sans, types use mono.
+  const FONT_SANS = '"Geist Variable", ui-sans-serif, system-ui, sans-serif'
+  const FONT_MONO = '"Geist Mono Variable", ui-monospace, monospace'
+
+  // ── Element / context ───────────────────────────────────────────────────
+  let host = $state(/** @type {HTMLDivElement|null} */ (null))
+  let canvas = $state(/** @type {HTMLCanvasElement|null} */ (null))
+  let mini = $state(/** @type {HTMLCanvasElement|null} */ (null))
+  /** @type {CanvasRenderingContext2D|null} */
+  let ctx = null
+  let dpr = 1
+  let cssW = 0
+  let cssH = 0
+
+  // ── Camera (world→screen: sx = wx*zoom + panX) ──────────────────────────
+  const MIN_ZOOM = 0.04
+  const MAX_ZOOM = 2.5
+  let cam = { panX: 0, panY: 0, zoom: 1 }
+
+  // Level-of-detail thresholds (world→screen zoom).
+  const LOD_ROWS = 0.5   // draw full column rows at/above this
+  const LOD_NAME = 0.16  // draw only the table name below LOD_ROWS
+
+  // ── Interaction state ────────────────────────────────────────────────────
+  let hoveredId = $state(/** @type {string|null} */ (null))
+  /** @type {{ mode:'none'|'pan'|'drag'|'mini', id?:string, ox:number, oy:number, sx:number, sy:number, moved:boolean }} */
+  let drag = { mode: 'none', ox: 0, oy: 0, sx: 0, sy: 0, moved: false }
+  /** Local position override for the node being dragged (avoids parent churn per frame). */
+  let dragPos = /** @type {{id:string,x:number,y:number}|null} */ (null)
+
+  // ── Theme palette (resolved from CSS tokens to concrete rgb) ─────────────
+  /** @type {Record<string,string>} */
+  let pal = {}
+  const PK = '251,191,36'
+  const FK = '96,165,250'
+  /** @type {HTMLSpanElement|null} */
+  let probe = null
+
+  /** @type {CanvasRenderingContext2D|null} */
+  let probeCtx = null
+  /**
+   * Resolve a CSS custom property (e.g. '--card') to concrete "r,g,b".
+   * Themes store tokens as full oklch() colors; the canvas fillStyle getter
+   * preserves the oklch string rather than converting it, so we rasterize a
+   * single pixel and read it back — that always yields device sRGB bytes,
+   * correct for oklch / hsl / hex alike.
+   * @param {string} name
+   */
+  function resolveRgb(name) {
+    const el = probe || host || document.documentElement
+    const raw = getComputedStyle(el).getPropertyValue(name).trim()
+    if (!raw) return '128,128,128'
+    if (!probeCtx) {
+      const cv = document.createElement('canvas')
+      cv.width = cv.height = 1
+      probeCtx = cv.getContext('2d', { willReadFrequently: true })
+    }
+    if (!probeCtx) return '128,128,128'
+    probeCtx.clearRect(0, 0, 1, 1)
+    probeCtx.fillStyle = '#808080' // fallback if `raw` is not a valid color
+    probeCtx.fillStyle = raw
+    probeCtx.fillRect(0, 0, 1, 1)
+    const d = probeCtx.getImageData(0, 0, 1, 1).data
+    return `${d[0]},${d[1]},${d[2]}`
+  }
+  function refreshTheme() {
+    pal = {
+      bg: resolveRgb('--background'),
+      card: resolveRgb('--card'),
+      panel: resolveRgb('--panel'),
+      border: resolveRgb('--border'),
+      fg: resolveRgb('--foreground'),
+      mfg: resolveRgb('--muted-foreground'),
+      muted: resolveRgb('--muted'),
+      primary: resolveRgb('--primary'),
+    }
+    markDirty()
+  }
+  /** @param {string} name @param {number} a */
+  const c = (name, a = 1) => `rgba(${pal[name] ?? '128,128,128'},${a})`
+
+  // ── Geometry helpers ───────────────────────────────────────────────────
+  /** @param {any} data */
+  const nodeH = (data) => HDR_H + (data?.columns?.length ?? 0) * ROW_H + PAD_B
+  /** @param {FlowNode} n */
+  const posOf = (n) => (dragPos && dragPos.id === n.id ? dragPos : n.position)
+
+  /** @type {Map<string,FlowNode>} */
+  let byId = new Map()
+  // Auto-fit the first time nodes populate (they load async, after mount), then
+  // never again until the graph empties — so search/rebuild doesn't reset the view.
+  let _fitted = false
+  function ensureFit() {
+    if (_fitted || !cssW || !nodes.length) return
+    _fitted = true
+    fit()
+    // A huge/star schema fits down to an unreadable sliver — instead land the
+    // user at a readable zoom centred on the graph so they can pan around.
+    if (cam.zoom < 0.4) zoomBy(0.55 / cam.zoom, cssW / 2, cssH / 2)
+  }
+  $effect(() => {
+    byId = new Map(nodes.map((n) => [n.id, n]))
+    if (!nodes.length) _fitted = false
+    ensureFit()
+    markDirty()
+  })
+  $effect(() => { void edges; void selectedId; markDirty() })
+
+  // ── Render scheduling ───────────────────────────────────────────────────
+  let rafId = 0
+  function markDirty() {
+    if (rafId || !ctx) return
+    rafId = requestAnimationFrame(() => { rafId = 0; draw() })
+  }
+
+  function draw() {
+    if (!ctx) return
+    const { panX, panY, zoom } = cam
+
+    // Clear to transparent — the themed page background shows through, so we
+    // never depend on resolving --background (which can misparse per webview).
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, cssW, cssH)
+
+    // World transform — everything below is drawn in world coordinates.
+    ctx.setTransform(dpr * zoom, 0, 0, dpr * zoom, dpr * panX, dpr * panY)
+    const vx0 = -panX / zoom, vy0 = -panY / zoom
+    const vx1 = (cssW - panX) / zoom, vy1 = (cssH - panY) / zoom
+
+    if (zoom > 0.45) drawGrid(vx0, vy0, vx1, vy1)
+
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+    for (const e of edges) drawEdge(e, vx0, vy0, vx1, vy1)
+    for (const n of nodes) {
+      const p = posOf(n), h = nodeH(n.data)
+      if (p.x > vx1 || p.x + NODE_W < vx0 || p.y > vy1 || p.y + h < vy0) continue
+      drawNode(n, p, h, zoom)
+    }
+    drawMinimap()
+  }
+
+  /** @param {number} x0 @param {number} y0 @param {number} x1 @param {number} y1 */
+  function drawGrid(x0, y0, x1, y1) {
+    const G = 22
+    ctx.fillStyle = c('mfg', 0.14)
+    const sx = Math.floor(x0 / G) * G, sy = Math.floor(y0 / G) * G
+    for (let x = sx; x < x1; x += G)
+      for (let y = sy; y < y1; y += G) ctx.fillRect(x, y, 1, 1)
+  }
+
+  /** @param {number} x @param {number} y @param {number} w @param {number} h @param {number} r */
+  function roundRect(x, y, w, h, r) {
+    r = Math.min(r, w / 2, h / 2)
+    ctx.beginPath()
+    ctx.moveTo(x + r, y)
+    ctx.arcTo(x + w, y, x + w, y + h, r)
+    ctx.arcTo(x + w, y + h, x, y + h, r)
+    ctx.arcTo(x, y + h, x, y, r)
+    ctx.arcTo(x, y, x + w, y, r)
+    ctx.closePath()
+  }
+
+  /** @param {FlowEdge} e */
+  function drawEdge(e, vx0, vy0, vx1, vy1) {
+    const s = byId.get(e.source), t = byId.get(e.target)
+    if (!s || !t) return
+    const sp = posOf(s), tp = posOf(t)
+    const sh = nodeH(s.data), th = nodeH(t.data)
+    const scols = s.data?.columns ?? []
+    const tcols = t.data?.columns ?? []
+    const ci = e.sourceHandle ? scols.findIndex((/** @type {any} */ col) => `src-${col.name}` === e.sourceHandle) : -1
+    const ti = e.targetHandle ? tcols.findIndex((/** @type {any} */ col) => `tgt-${col.name}` === e.targetHandle) : -1
+
+    // Anchor each end to its column row (FK column → referenced key column). Past
+    // the row LOD the rows aren't drawn, so fall back to the card's centre.
+    const rowsShown = cam.zoom >= LOD_ROWS
+    const rowY = (/** @type {number} */ y, /** @type {number} */ i, /** @type {number} */ h) =>
+      rowsShown && i >= 0 ? y + HDR_H + i * ROW_H + ROW_H / 2 : y + (rowsShown ? HDR_H / 2 : h / 2)
+
+    // Exit whichever side of each card faces the other, so the elbow reads cleanly.
+    const leftToRight = tp.x >= sp.x
+    const sx = leftToRight ? sp.x + NODE_W : sp.x
+    const sy = rowY(sp.y, ci, sh)
+    const tx = leftToRight ? tp.x : tp.x + NODE_W
+    const ty = rowY(tp.y, ti, th)
+
+    // Cull: skip when the edge's bounding box misses the viewport.
+    if (Math.max(sx, tx) < vx0 || Math.min(sx, tx) > vx1 || Math.max(sy, ty) < vy0 || Math.min(sy, ty) > vy1) return
+
+    const active = e.source === selectedId || e.target === selectedId
+    const dim = s.data?.highlighted === false && t.data?.highlighted === false
+
+    // Smooth horizontal-tangent curve from the FK row to the referenced key row.
+    // Each edge bows on its own control points, so a hub with many FKs fans out
+    // cleanly instead of bundling into overlapping right-angle corridors.
+    const dirS = leftToRight ? 1 : -1
+    const dirT = leftToRight ? -1 : 1
+    const off = Math.max(60, Math.abs(tx - sx) * 0.5)
+    ctx.beginPath()
+    ctx.moveTo(sx, sy)
+    ctx.bezierCurveTo(sx + off * dirS, sy, tx + off * dirT, ty, tx, ty)
+    ctx.lineWidth = (active ? 2 : 1.3) / cam.zoom
+    ctx.strokeStyle = active ? c('primary', 0.95) : dim ? c('mfg', 0.12) : `rgba(${FK},0.6)`
+    ctx.stroke()
+
+    // Endpoint nubs on both column rows.
+    const dr = 2.8 / cam.zoom
+    ctx.fillStyle = active ? c('primary', 0.95) : dim ? c('mfg', 0.15) : `rgba(${FK},0.85)`
+    ctx.beginPath(); ctx.arc(sx, sy, dr, 0, Math.PI * 2); ctx.fill()
+    ctx.beginPath(); ctx.arc(tx, ty, dr, 0, Math.PI * 2); ctx.fill()
+  }
+
+  /** @param {FlowNode} n @param {{x:number,y:number}} p @param {number} h @param {number} zoom */
+  function drawNode(n, p, h, zoom) {
+    const d = n.data ?? {}
+    const dim = d.highlighted === false
+    const sel = n.id === selectedId
+    const hov = n.id === hoveredId
+    ctx.globalAlpha = dim ? 0.18 : 1
+
+    // Card + border.
+    roundRect(p.x, p.y, NODE_W, h, 8)
+    ctx.fillStyle = c('card', 1)
+    ctx.fill()
+    ctx.lineWidth = (sel ? 2 : 1) / zoom
+    ctx.strokeStyle = sel ? c('primary', 0.85) : hov ? c('border', 1) : c('border', 0.45)
+    ctx.stroke()
+
+    // Header band.
+    ctx.save()
+    roundRect(p.x, p.y, NODE_W, Math.min(HDR_H + 8, h), 8)
+    ctx.clip()
+    ctx.fillStyle = c('muted', 0.6)
+    ctx.fillRect(p.x, p.y, NODE_W, HDR_H)
+    ctx.restore()
+    ctx.beginPath()
+    ctx.moveTo(p.x, p.y + HDR_H); ctx.lineTo(p.x + NODE_W, p.y + HDR_H)
+    ctx.lineWidth = 1 / zoom; ctx.strokeStyle = c('border', 0.4); ctx.stroke()
+
+    ctx.textBaseline = 'middle'
+    if (zoom >= LOD_NAME) {
+      ctx.font = `600 13px ${FONT_SANS}`
+      ctx.fillStyle = c('fg', 1)
+      ctx.textAlign = 'left'
+      fillClipped(d.name ?? '', p.x + 12, p.y + HDR_H / 2, NODE_W - 24, 13)
+    }
+
+    if (zoom < LOD_ROWS) { ctx.globalAlpha = 1; return }
+
+    // Column rows.
+    const pk = d.pkCols ?? new Set()
+    const cols = d.columns ?? []
+    for (let i = 0; i < cols.length; i++) {
+      const col = cols[i]
+      const isPk = pk.has(col.name)
+      const isFk = !!col.foreignKey
+      const cy = p.y + HDR_H + i * ROW_H
+      if (i > 0) {
+        ctx.beginPath()
+        ctx.moveTo(p.x, cy); ctx.lineTo(p.x + NODE_W, cy)
+        ctx.lineWidth = 0.75 / zoom; ctx.strokeStyle = c('border', 0.12); ctx.stroke()
+      }
+      const midY = cy + ROW_H / 2
+      const badge = isPk ? 'pk' : isFk ? 'fk' : ''
+      const typeRight = p.x + NODE_W - (badge ? 42 : 12)
+
+      // Column name.
+      ctx.font = `${isPk ? '600 ' : ''}11px ${FONT_SANS}`
+      ctx.fillStyle = isPk ? `rgba(${PK},0.95)` : isFk ? `rgba(${FK},0.95)` : c('fg', 0.82)
+      ctx.textAlign = 'left'
+      fillClipped(col.name ?? '', p.x + 12, midY, typeRight - (p.x + 16), 11)
+
+      // Data type.
+      ctx.font = `10px ${FONT_MONO}`
+      ctx.fillStyle = c('mfg', 0.6)
+      ctx.textAlign = 'right'
+      fillClipped(String(col.dataType ?? ''), typeRight, midY, 64, 10, true)
+
+      // PK / FK badge.
+      if (badge) {
+        const bx = p.x + NODE_W - 34, bw = 22
+        roundRect(bx, cy + 5, bw, ROW_H - 10, 3)
+        ctx.fillStyle = isPk ? `rgba(${PK},0.16)` : `rgba(${FK},0.14)`
+        ctx.fill()
+        ctx.font = `700 8px ${FONT_MONO}`
+        ctx.fillStyle = isPk ? `rgba(${PK},1)` : `rgba(${FK},1)`
+        ctx.textAlign = 'center'
+        ctx.fillText(badge, bx + bw / 2, midY + 0.5)
+      }
+    }
+    ctx.globalAlpha = 1
+  }
+
+  /**
+   * Draw monospace text clipped to a max pixel width (ellipsis by char count).
+   * @param {string} text @param {number} x @param {number} y @param {number} maxW @param {number} size @param {boolean} [rightAlign]
+   */
+  function fillClipped(text, x, y, maxW, size, rightAlign = false) {
+    const charW = size * 0.6
+    const max = Math.max(1, Math.floor(maxW / charW))
+    let s = text
+    if (s.length > max) s = s.slice(0, Math.max(1, max - 1)) + '…'
+    ctx.fillText(s, x, y)
+    void rightAlign
+  }
+
+  // ── Minimap ──────────────────────────────────────────────────────────────
+  const MINI_W = 168, MINI_H = 116, MINI_PAD = 8
+  /** @type {{s:number,ox:number,oy:number}|null} */
+  let miniXf = null
+  function drawMinimap() {
+    if (!mini || !nodes.length) return
+    const mctx = mini.getContext('2d')
+    if (!mctx) return
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity
+    for (const n of nodes) {
+      const p = posOf(n), h = nodeH(n.data)
+      x0 = Math.min(x0, p.x); y0 = Math.min(y0, p.y)
+      x1 = Math.max(x1, p.x + NODE_W); y1 = Math.max(y1, p.y + h)
+    }
+    const bw = x1 - x0 || 1, bh = y1 - y0 || 1
+    const s = Math.min((MINI_W - MINI_PAD * 2) / bw, (MINI_H - MINI_PAD * 2) / bh)
+    const ox = MINI_PAD - x0 * s + (MINI_W - MINI_PAD * 2 - bw * s) / 2
+    const oy = MINI_PAD - y0 * s + (MINI_H - MINI_PAD * 2 - bh * s) / 2
+    miniXf = { s, ox, oy }
+
+    mini.width = MINI_W * dpr; mini.height = MINI_H * dpr
+    mini.style.width = MINI_W + 'px'; mini.style.height = MINI_H + 'px'
+    mctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    mctx.fillStyle = c('panel', 1); mctx.fillRect(0, 0, MINI_W, MINI_H)
+    for (const n of nodes) {
+      const p = posOf(n), h = nodeH(n.data)
+      mctx.fillStyle = n.id === selectedId ? c('primary', 0.9) : c('mfg', n.data?.highlighted === false ? 0.15 : 0.4)
+      mctx.fillRect(p.x * s + ox, p.y * s + oy, NODE_W * s, h * s)
+    }
+    // Viewport rectangle.
+    const { panX, panY, zoom } = cam
+    const rx = (-panX / zoom) * s + ox, ry = (-panY / zoom) * s + oy
+    const rw = (cssW / zoom) * s, rh = (cssH / zoom) * s
+    mctx.strokeStyle = c('fg', 0.5); mctx.lineWidth = 1
+    mctx.strokeRect(rx, ry, rw, rh)
+  }
+
+  // ── Camera ops ─────────────────────────────────────────────────────────
+  export function fit(padding = 0.12) {
+    if (!nodes.length || !cssW) return
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity
+    for (const n of nodes) {
+      const p = posOf(n), h = nodeH(n.data)
+      x0 = Math.min(x0, p.x); y0 = Math.min(y0, p.y)
+      x1 = Math.max(x1, p.x + NODE_W); y1 = Math.max(y1, p.y + h)
+    }
+    const bw = x1 - x0 || 1, bh = y1 - y0 || 1
+    const z = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, Math.min(cssW / bw, cssH / bh) * (1 - padding)))
+    cam.zoom = z
+    cam.panX = (cssW - bw * z) / 2 - x0 * z
+    cam.panY = (cssH - bh * z) / 2 - y0 * z
+    markDirty()
+  }
+
+  /** @param {string} id */
+  export function focus(id) {
+    const n = byId.get(id)
+    if (!n || !cssW) return
+    const p = posOf(n), h = nodeH(n.data)
+    const z = Math.max(cam.zoom, 0.8)
+    cam.zoom = z
+    cam.panX = cssW / 2 - (p.x + NODE_W / 2) * z
+    cam.panY = cssH / 2 - (p.y + h / 2) * z
+    markDirty()
+  }
+
+  /** @param {number} factor @param {number} [cx] @param {number} [cy] */
+  function zoomBy(factor, cx = cssW / 2, cy = cssH / 2) {
+    const z = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, cam.zoom * factor))
+    const wx = (cx - cam.panX) / cam.zoom, wy = (cy - cam.panY) / cam.zoom
+    cam.zoom = z
+    cam.panX = cx - wx * z; cam.panY = cy - wy * z
+    markDirty()
+  }
+  export function zoomIn() { zoomBy(1.25) }
+  export function zoomOut() { zoomBy(0.8) }
+
+  // ── Hit testing ───────────────────────────────────────────────────────
+  /** @param {number} sx @param {number} sy */
+  function hitNode(sx, sy) {
+    const wx = (sx - cam.panX) / cam.zoom, wy = (sy - cam.panY) / cam.zoom
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      const n = nodes[i], p = posOf(n), h = nodeH(n.data)
+      if (wx >= p.x && wx <= p.x + NODE_W && wy >= p.y && wy <= p.y + h) return n
+    }
+    return null
+  }
+
+  // ── Pointer / wheel handlers ──────────────────────────────────────────
+  /** @param {PointerEvent} e */
+  function onPointerDown(e) {
+    if (!canvas) return
+    canvas.setPointerCapture(e.pointerId)
+    const r = canvas.getBoundingClientRect()
+    const sx = e.clientX - r.left, sy = e.clientY - r.top
+    const hit = hitNode(sx, sy)
+    drag = { mode: hit ? 'drag' : 'pan', id: hit?.id, ox: sx, oy: sy, sx, sy, moved: false }
+    if (hit) {
+      const p = hit.position
+      drag.ox = (sx - cam.panX) / cam.zoom - p.x
+      drag.oy = (sy - cam.panY) / cam.zoom - p.y
+    }
+  }
+  /** @param {PointerEvent} e */
+  function onPointerMove(e) {
+    if (!canvas) return
+    const r = canvas.getBoundingClientRect()
+    const sx = e.clientX - r.left, sy = e.clientY - r.top
+    if (drag.mode === 'none') {
+      const hit = hitNode(sx, sy)
+      const id = hit?.id ?? null
+      if (id !== hoveredId) { hoveredId = id; canvas.style.cursor = id ? 'pointer' : 'default'; markDirty() }
+      return
+    }
+    if (Math.abs(sx - drag.sx) + Math.abs(sy - drag.sy) > 3) drag.moved = true
+    if (drag.mode === 'pan') {
+      cam.panX += sx - drag.ox; cam.panY += sy - drag.oy
+      drag.ox = sx; drag.oy = sy; markDirty()
+    } else if (drag.mode === 'drag' && drag.id) {
+      dragPos = { id: drag.id, x: (sx - cam.panX) / cam.zoom - drag.ox, y: (sy - cam.panY) / cam.zoom - drag.oy }
+      markDirty()
+    }
+  }
+  /** @param {PointerEvent} e */
+  function onPointerUp(e) {
+    if (canvas?.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId)
+    if (drag.mode === 'drag' && drag.id) {
+      if (drag.moved && dragPos) onnodemoved(drag.id, dragPos.x, dragPos.y)
+      else onselect(drag.id)
+      dragPos = null
+    } else if (drag.mode === 'pan' && !drag.moved) {
+      onselect(null)
+    }
+    drag = { mode: 'none', ox: 0, oy: 0, sx: 0, sy: 0, moved: false }
+    markDirty()
+  }
+  /** @param {MouseEvent} e */
+  function onDblClick(e) {
+    if (!canvas) return
+    const r = canvas.getBoundingClientRect()
+    const hit = hitNode(e.clientX - r.left, e.clientY - r.top)
+    if (hit) onopen(hit.id)
+  }
+  /** @param {WheelEvent} e */
+  function onWheel(e) {
+    e.preventDefault()
+    if (!canvas) return
+    const r = canvas.getBoundingClientRect()
+    zoomBy(Math.exp(-e.deltaY * 0.0015), e.clientX - r.left, e.clientY - r.top)
+  }
+
+  // Click the minimap to recenter there.
+  /** @param {PointerEvent} e */
+  function onMiniDown(e) {
+    if (!mini || !miniXf) return
+    const r = mini.getBoundingClientRect()
+    const wx = (e.clientX - r.left - miniXf.ox) / miniXf.s
+    const wy = (e.clientY - r.top - miniXf.oy) / miniXf.s
+    cam.panX = cssW / 2 - wx * cam.zoom
+    cam.panY = cssH / 2 - wy * cam.zoom
+    markDirty()
+  }
+
+  // ── Resize ────────────────────────────────────────────────────────────
+  /** @type {ResizeObserver|null} */
+  let ro = null
+  function resize() {
+    if (!host || !canvas) return
+    dpr = window.devicePixelRatio || 1
+    cssW = host.clientWidth; cssH = host.clientHeight
+    canvas.width = Math.round(cssW * dpr); canvas.height = Math.round(cssH * dpr)
+    canvas.style.width = cssW + 'px'; canvas.style.height = cssH + 'px'
+    ensureFit()
+    markDirty()
+  }
+
+  /** @type {MutationObserver|null} */
+  let themeObs = null
+  onMount(() => {
+    ctx = canvas?.getContext('2d') ?? null
+    refreshTheme()
+    resize()
+    ro = new ResizeObserver(resize)
+    if (host) ro.observe(host)
+    themeObs = new MutationObserver(refreshTheme)
+    themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] })
+    // Fit once positions are in (nodes may already be present, or arrive later).
+    requestAnimationFrame(ensureFit)
+    // Webfonts (Geist) load async; redraw once ready so text isn't stuck on the
+    // fallback face.
+    document.fonts?.ready?.then(() => markDirty())
+  })
+  onDestroy(() => {
+    ro?.disconnect()
+    themeObs?.disconnect()
+    if (rafId) cancelAnimationFrame(rafId)
+  })
+</script>
+
+<div bind:this={host} class="absolute inset-0 overflow-hidden">
+  <span bind:this={probe} class="pointer-events-none absolute size-0 opacity-0" aria-hidden="true"></span>
+
+  <canvas
+    bind:this={canvas}
+    class="block touch-none select-none"
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onpointercancel={onPointerUp}
+    ondblclick={onDblClick}
+    onwheel={onWheel}
+  ></canvas>
+
+  <!-- Zoom controls -->
+  <div class="absolute left-4 bottom-4 flex flex-col overflow-hidden rounded-lg border border-border/50 bg-panel shadow-lg">
+    <button type="button" class="flex size-8 items-center justify-center border-b border-border/40 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" onclick={zoomIn} title="Zoom in">
+      <Plus class="size-3.5" />
+    </button>
+    <button type="button" class="flex size-8 items-center justify-center border-b border-border/40 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" onclick={zoomOut} title="Zoom out">
+      <Minus class="size-3.5" />
+    </button>
+    <button type="button" class="flex size-8 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" onclick={() => fit()} title="Fit to view">
+      <Maximize class="size-3.5" />
+    </button>
+  </div>
+
+  <!-- Minimap -->
+  {#if nodes.length}
+    <canvas
+      bind:this={mini}
+      class="absolute right-4 bottom-4 cursor-pointer rounded-lg border border-border/50 shadow-lg"
+      onpointerdown={onMiniDown}
+    ></canvas>
+  {/if}
+</div>
diff --git a/src/lib/components/ErdFocusController.svelte b/src/lib/components/ErdFocusController.svelte
deleted file mode 100644
index f71a8fca..00000000
--- a/src/lib/components/ErdFocusController.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { useSvelteFlow } from '@xyflow/svelte'
-
-  let { focusNodeId = /** @type {string|null} */ (null) } = $props()
-
-  const { fitView } = useSvelteFlow()
-
-  $effect(() => {
-    const id = focusNodeId
-    if (!id) return
-    setTimeout(() => {
-      fitView({ nodes: [{ id }], duration: 500, maxZoom: 1.5, padding: 0.25 })
-    }, 60)
-  })
-</script>
diff --git a/src/lib/components/ErdRelationEdge.svelte b/src/lib/components/ErdRelationEdge.svelte
deleted file mode 100644
index af2bd34e..00000000
--- a/src/lib/components/ErdRelationEdge.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-  import { getBezierPath } from '@xyflow/svelte'
-
-  let {
-    id,
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-    selected = false,
-  } = $props()
-
-  const pathResult = $derived(
-    getBezierPath({
-      sourceX, sourceY, sourcePosition,
-      targetX, targetY, targetPosition,
-      curvature: 0.35,
-    }),
-  )
-  const edgePath = $derived(pathResult[0])
-
-  // midpoint for label positioning
-  const midX = $derived((sourceX + targetX) / 2)
-  const midY = $derived((sourceY + targetY) / 2)
-</script>
-
-<!-- Wider transparent hit area -->
-<path
-  d={edgePath}
-  fill="none"
-  stroke="transparent"
-  stroke-width="10"
-  pointer-events="stroke"
-/>
-
-<!-- Visible edge -->
-<path
-  {id}
-  d={edgePath}
-  fill="none"
-  class="svelte-flow__edge-path"
-  stroke={selected ? 'hsl(var(--primary)/0.85)' : 'hsl(var(--border)/0.45)'}
-  stroke-width={selected ? 1.5 : 1.2}
-  stroke-linecap="round"
-/>
-
-<!-- * = many side (FK / source) -->
-<text
-  x={sourceX + (targetX > sourceX ? 14 : -14)}
-  y={sourceY - 6}
-  font-size="9"
-  font-family="ui-monospace,monospace"
-  fill={selected ? 'hsl(var(--primary)/0.7)' : 'hsl(var(--muted-foreground)/0.4)'}
-  text-anchor="middle"
-  dominant-baseline="auto"
-  pointer-events="none"
->*</text>
-
-<!-- 1 = one side (PK / target) -->
-<text
-  x={targetX + (sourceX > targetX ? 14 : -14)}
-  y={targetY - 6}
-  font-size="9"
-  font-family="ui-monospace,monospace"
-  fill={selected ? 'hsl(var(--primary)/0.7)' : 'hsl(var(--muted-foreground)/0.4)'}
-  text-anchor="middle"
-  dominant-baseline="auto"
-  pointer-events="none"
->1</text>
diff --git a/src/lib/components/ErdTableNode.svelte b/src/lib/components/ErdTableNode.svelte
deleted file mode 100644
index c8cc9056..00000000
--- a/src/lib/components/ErdTableNode.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script>
-  import { Handle, Position } from '@xyflow/svelte'
-  import Table2 from '@lucide/svelte/icons/table-2'
-
-  let { data = {} } = $props()
-
-  const NODE_W = 230
-</script>
-
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<div
-  class="erd-card flex flex-col overflow-visible rounded-lg border shadow-lg transition-all duration-100
-    {data.selected
-      ? 'border-primary/70 shadow-primary/10 ring-1 ring-primary/25'
-      : !data.highlighted
-        ? 'border-border/10 opacity-20'
-        : 'border-border/40 hover:border-border/70 hover:shadow-xl'}"
-  style="width:{NODE_W}px; cursor:pointer; background:hsl(var(--card))"
-  role="button"
-  onclick={() => data.onSelect?.(data.name)}
-  ondblclick={() => data.onOpen?.(data.name)}
-  onkeydown={(e) => { if (e.key === 'Enter') data.onOpen?.(data.name) }}
->
-  <!--
-    Target handle — invisible 1×1 px anchor at the vertical center of the left edge.
-    Uses !important to beat XYFlow's base CSS `min-width/min-height: 5px` rule.
-  -->
-  <Handle
-    type="target"
-    position={Position.Left}
-    id="tgt"
-    style="position:absolute; left:0; top:50%; transform:translateY(-50%);
-           width:1px!important; height:1px!important;
-           min-width:0!important; min-height:0!important;
-           background:transparent!important; border:none!important;
-           box-shadow:none!important; border-radius:0!important; opacity:0"
-  />
-
-  <!-- Header -->
-  <div
-    class="flex items-center gap-2 border-b px-3 py-2"
-    style="background:hsl(var(--muted)/0.45); border-color:hsl(var(--border)/0.5)"
-  >
-    <span
-      class="min-w-0 flex-1 truncate font-mono text-[11px] font-semibold tracking-tight"
-      style="color:hsl(var(--foreground))"
-    >{data.name}</span>
-    <Table2 class="size-3.5 shrink-0" style="color:hsl(var(--muted-foreground)/0.3)" />
-  </div>
-
-  <!-- Column rows -->
-  <div class="flex flex-col divide-y" style="divide-color:hsl(var(--border)/0.1)">
-    {#each (data.columns ?? []) as col (col.name)}
-      {@const isPk = data.pkCols?.has(col.name)}
-      {@const isFk = !!col.foreignKey}
-      <div class="relative flex items-center gap-1 px-3 py-[4px]">
-        <!--
-          Source handle — invisible 1×1 px anchor at vertical center of THIS column row.
-          Placed inside the row div so getBoundingClientRect() returns the row's y.
-        -->
-        {#if isFk}
-          <Handle
-            type="source"
-            position={Position.Right}
-            id="src-{col.name}"
-            style="position:absolute; right:0; top:50%; transform:translateY(-50%);
-                   width:1px!important; height:1px!important;
-                   min-width:0!important; min-height:0!important;
-                   background:transparent!important; border:none!important;
-                   box-shadow:none!important; border-radius:0!important; opacity:0"
-          />
-        {/if}
-
-        <!-- Column name -->
-        <span
-          class="min-w-0 flex-1 truncate font-mono text-[10px] leading-[1.45]"
-          style="color:{isPk
-            ? 'hsl(var(--foreground)/0.9)'
-            : isFk
-              ? 'hsl(var(--foreground)/0.72)'
-              : 'hsl(var(--muted-foreground)/0.75)'}"
-        >{col.name}</span>
-
-        <!-- Data type — always right-aligned, clipped when long -->
-        <span
-          class="ml-1 max-w-[80px] shrink-0 truncate font-mono text-[9px] leading-[1.45] text-right"
-          style="color:hsl(var(--muted-foreground)/0.38)"
-        >{col.dataType}</span>
-
-        <!-- PK / FK badge -->
-        {#if isPk}
-          <span
-            class="ml-1 shrink-0 rounded px-[5px] py-[1px] font-mono text-[7.5px] font-bold uppercase tracking-wide"
-            style="background:hsl(38 92% 50% / 0.18); color:hsl(38 92% 65%); letter-spacing:0.04em"
-          >pk</span>
-        {:else if isFk}
-          <span
-            class="ml-1 shrink-0 rounded px-[5px] py-[1px] font-mono text-[7.5px] font-semibold uppercase tracking-wide"
-            style="background:hsl(217 91% 60% / 0.14); color:hsl(217 91% 67% / 0.8); letter-spacing:0.04em"
-          >fk</span>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  /* Remove all XYFlow default node chrome */
-  :global(.svelte-flow__node-tableNode) {
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-  }
-  :global(.svelte-flow__node-tableNode.selected) {
-    box-shadow: none !important;
-    outline: none !important;
-  }
-  /* Nuke ALL handle visuals — !important here works because these are stylesheet rules */
-  :global(.svelte-flow__node-tableNode .svelte-flow__handle) {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-    opacity: 0 !important;
-    min-width: 0 !important;
-    min-height: 0 !important;
-  }
-  :global(.svelte-flow__node-tableNode .svelte-flow__handle:hover),
-  :global(.svelte-flow__node-tableNode .svelte-flow__handle.connectingfrom),
-  :global(.svelte-flow__node-tableNode .svelte-flow__handle.valid) {
-    background: transparent !important;
-    border: none !important;
-  }
-</style>

From 3916392ffe7e8887370ee49f18bb12d3a41667eb Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 22/27] refactor(db): update query handling

---
 src-tauri/src/db/query.rs | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src-tauri/src/db/query.rs b/src-tauri/src/db/query.rs
index 57652535..20d738db 100644
--- a/src-tauri/src/db/query.rs
+++ b/src-tauri/src/db/query.rs
@@ -1578,6 +1578,29 @@ fn bind_typed_value<'a>(
     let t = normalize_pg_type(data_type);
 
     if value.is_null() {
+        // Bind a NULL whose parameter type matches the column family. The base
+        // SET clause is `"col" = $1` with no cast, so a text-typed NULL against a
+        // non-text column (e.g. int4) fails assignment-cast checking with
+        // "column is of type integer but expression is of type text".
+        if t.contains("int") || t == "serial" || t.ends_with("serial") || t == "oid" {
+            return Ok(q.bind(None::<i64>));
+        }
+        if t == "bool" || t == "boolean" {
+            return Ok(q.bind(None::<bool>));
+        }
+        if t == "uuid" {
+            return Ok(q.bind(None::<Uuid>));
+        }
+        if t.contains("numeric")
+            || t.contains("decimal")
+            || t.contains("real")
+            || t.contains("double")
+            || t.contains("float")
+        {
+            return Ok(q.bind(None::<f64>));
+        }
+        // text/varchar/char, plus json/jsonb and datetime types whose SET clause
+        // already carries an explicit `$1::type` cast that absorbs a text NULL.
         return Ok(q.bind(None::<String>));
     }
 

From ab29a4f50a5871fb401af8dbcc07229a8c6b1d2c Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 23/27] refactor(db): update MySQL layer

---
 src-tauri/src/db/mysql.rs | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src-tauri/src/db/mysql.rs b/src-tauri/src/db/mysql.rs
index 218d19a9..0dc20236 100644
--- a/src-tauri/src/db/mysql.rs
+++ b/src-tauri/src/db/mysql.rs
@@ -237,10 +237,12 @@ pub async fn get_table_rows(
     };
 
     let table_ref = format!("{}.{}", bt(schema), bt(table));
-    let count_sql = format!("SELECT COUNT(*) FROM {table_ref}{}", where_clause.sql);
-    // MySQL returns COUNT(*) as BIGINT UNSIGNED (u64). Decoding as i64 causes a
-    // type-mismatch error; fetch as u64 then cast.
-    let mut count_q = sqlx::query_scalar::<_, u64>(&count_sql);
+    // MySQL types COUNT(*) as BIGINT UNSIGNED, but MariaDB types it as signed
+    // BIGINT — decoding the wrong signedness is a hard type-mismatch in sqlx.
+    // CAST(... AS SIGNED) normalizes both to i64, which comfortably holds any
+    // real row count.
+    let count_sql = format!("SELECT CAST(COUNT(*) AS SIGNED) FROM {table_ref}{}", where_clause.sql);
+    let mut count_q = sqlx::query_scalar::<_, i64>(&count_sql);
     for b in &where_clause.binds {
         count_q = count_q.bind(b.as_str());
     }
@@ -264,7 +266,7 @@ pub async fn get_table_rows(
         data_q.fetch_all(pool),
         meta_q.fetch_all(pool),
     );
-    let total: i64 = total_res.map_err(|e| format!("Failed to count rows: {e}"))? as i64;
+    let total: i64 = total_res.map_err(|e| format!("Failed to count rows: {e}"))?;
     let rows = rows_res.map_err(|e| format!("Failed to fetch rows: {e}"))?;
     let meta_rows = meta_res.unwrap_or_default();
 

From 64b2f1be2535d769ea403ced591bd887499f5023 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 24/27] refactor(db): update MSSQL layer

---
 src-tauri/src/db/mssql.rs | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src-tauri/src/db/mssql.rs b/src-tauri/src/db/mssql.rs
index f0c3b332..cf55d5f2 100644
--- a/src-tauri/src/db/mssql.rs
+++ b/src-tauri/src/db/mssql.rs
@@ -491,9 +491,20 @@ pub async fn insert_table_row(
     let val_list = cols.iter().map(|c| sql_literal(&values[c])).collect::<Vec<_>>().join(", ");
     let tq = format!("{}.{}", quote_ident(schema), quote_ident(table));
     // OUTPUT INSERTED.* returns the full new row (including server-generated columns).
+    // This INSERT yields a result set, so it must go through simple_query — not
+    // execute_sql, whose DML branch uses execute() and discards returned rows
+    // (which left the grid showing an all-NULL row after insert).
     let sql = format!("INSERT INTO {tq} ({col_list}) OUTPUT INSERTED.* VALUES ({val_list})");
-    let res = execute_sql(handle, &sql).await?;
-    Ok(res.rows.into_iter().next().unwrap_or_default())
+    let mut client = handle.lock().await;
+    let results = client
+        .simple_query(&sql)
+        .await
+        .map_err(|e| format!("MS SQL error: {e}"))?
+        .into_results()
+        .await
+        .map_err(|e| format!("MS SQL error: {e}"))?;
+    let rows = results.into_iter().next().unwrap_or_default();
+    Ok(rows_to_result(&rows, 0).rows.into_iter().next().unwrap_or_default())
 }
 
 pub async fn delete_table_rows(

From 3676af4cbaa3ff8c5880ff4f4a0ec48dece986a3 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 25/27] refactor(db): update EXPLAIN handling

---
 src-tauri/src/db/explain.rs | 135 +++++++++++++++++++++++++++++++++---
 1 file changed, 127 insertions(+), 8 deletions(-)

diff --git a/src-tauri/src/db/explain.rs b/src-tauri/src/db/explain.rs
index 03adfd4b..9d6ad86e 100644
--- a/src-tauri/src/db/explain.rs
+++ b/src-tauri/src/db/explain.rs
@@ -37,16 +37,23 @@ fn strip_sql(sql: &str) -> &str {
 }
 
 pub async fn explain_pg(pool: &sqlx::PgPool, sql: &str) -> Result<ExplainResult, String> {
-    let sql = strip_sql(sql);
-    let q = format!("EXPLAIN (ANALYZE, BUFFERS, FORMAT JSON) {sql}");
-
-    let row: (serde_json::Value,) = sqlx::query_as(&q)
-        .fetch_one(pool)
-        .await
-        .map_err(|e| format!("EXPLAIN failed: {e}"))?;
+    let stripped = strip_sql(sql);
+    let q = format!("EXPLAIN (ANALYZE, BUFFERS, FORMAT JSON) {stripped}");
 
     // PG returns [{Plan: {...}, "Planning Time": x, "Execution Time": y}]
-    let arr = row.0;
+    let arr = match sqlx::query_as::<_, (serde_json::Value,)>(&q).fetch_one(pool).await {
+        Ok(row) => row.0,
+        // CockroachDB speaks the PG wire protocol but rejects PG's EXPLAIN option
+        // syntax (`at or near "analyze"`). Fall back to its indented text plan; if
+        // that also fails, surface the original error — it's the meaningful one for
+        // a genuine query fault on real PostgreSQL.
+        Err(e) => {
+            return match explain_cockroach(pool, sql).await {
+                Ok(res) => Ok(res),
+                Err(_) => Err(format!("EXPLAIN failed: {e}")),
+            };
+        }
+    };
     let entry = arr
         .as_array()
         .and_then(|a| a.first())
@@ -65,6 +72,118 @@ pub async fn explain_pg(pool: &sqlx::PgPool, sql: &str) -> Result<ExplainResult,
     })
 }
 
+/// CockroachDB has no JSON plan format, so parse its indented `• node` text tree
+/// into the same `{ "Node Type", "Plans" }` shape the PG/SQLite renderer draws.
+/// Uses plain `EXPLAIN` (not `ANALYZE`) so the query is never executed.
+pub async fn explain_cockroach(pool: &sqlx::PgPool, sql: &str) -> Result<ExplainResult, String> {
+    let sql = strip_sql(sql);
+    let q = format!("EXPLAIN {sql}");
+
+    let rows = sqlx::query(&q)
+        .fetch_all(pool)
+        .await
+        .map_err(|e| format!("EXPLAIN failed: {e}"))?;
+
+    let lines: Vec<String> = rows
+        .iter()
+        .filter_map(|r| r.try_get::<String, _>(0).ok())
+        .collect();
+
+    let plan = parse_cockroach_plan(&lines).ok_or_else(|| "Empty EXPLAIN result".to_string())?;
+
+    Ok(ExplainResult {
+        plan,
+        planning_time: 0.0,
+        execution_time: 0.0,
+        driver: "cockroach".into(),
+    })
+}
+
+/// Turn Cockroach's `EXPLAIN` text (one plan line per row) into a nested plan
+/// tree. Node lines carry a `•` bullet whose indentation encodes depth; the
+/// `key: value` lines that follow describe the node just above them.
+fn parse_cockroach_plan(lines: &[String]) -> Option<serde_json::Value> {
+    use serde_json::{json, Map, Value};
+
+    struct Frame {
+        depth: usize,
+        node: Map<String, Value>,
+        children: Vec<Value>,
+    }
+    fn finalize(mut f: Frame) -> Value {
+        if !f.children.is_empty() {
+            f.node.insert("Plans".into(), Value::Array(f.children));
+        }
+        Value::Object(f.node)
+    }
+    // Attach a finished frame to its parent (or the root list if there is none).
+    fn attach(stack: &mut Vec<Frame>, roots: &mut Vec<Value>, done: Value) {
+        match stack.last_mut() {
+            Some(p) => p.children.push(done),
+            None => roots.push(done),
+        }
+    }
+
+    let mut stack: Vec<Frame> = Vec::new();
+    let mut roots: Vec<Value> = Vec::new();
+
+    for line in lines {
+        if let Some((prefix, rest)) = line.split_once('•') {
+            let depth = prefix.chars().count();
+            let name = rest.trim();
+            if name.is_empty() {
+                continue;
+            }
+            while stack.last().is_some_and(|f| f.depth >= depth) {
+                let done = finalize(stack.pop().unwrap());
+                attach(&mut stack, &mut roots, done);
+            }
+            let mut node = Map::new();
+            node.insert("Node Type".into(), json!(name));
+            node.insert("Total Cost".into(), json!(0.0));
+            node.insert("Startup Cost".into(), json!(0.0));
+            node.insert("Plan Rows".into(), json!(0));
+            stack.push(Frame { depth, node, children: Vec::new() });
+        } else if let Some((k, v)) = line.split_once(':') {
+            // A detail line for the current node (header lines like
+            // "distribution: full" arrive before any bullet and are ignored).
+            if let Some(f) = stack.last_mut() {
+                let key = k.trim_matches(|c: char| "│└├─ \t".contains(c)).to_ascii_lowercase();
+                let val = v.trim();
+                match key.as_str() {
+                    "table" => {
+                        f.node.insert("Relation Name".into(), json!(val.split('@').next().unwrap_or(val)));
+                    }
+                    "estimated row count" => {
+                        let digits: String =
+                            val.chars().take_while(|c| c.is_ascii_digit() || *c == ',').filter(|c| *c != ',').collect();
+                        if let Ok(n) = digits.parse::<i64>() {
+                            f.node.insert("Plan Rows".into(), json!(n));
+                        }
+                    }
+                    _ => {}
+                }
+            }
+        }
+    }
+    while let Some(f) = stack.pop() {
+        let done = finalize(f);
+        attach(&mut stack, &mut roots, done);
+    }
+
+    match roots.len() {
+        0 => None,
+        1 => roots.into_iter().next(),
+        _ => Some(json!({
+            "Node Type": "Query Plan",
+            "Total Cost": 0.0,
+            "Startup Cost": 0.0,
+            "Plan Rows": 0,
+            "Plans": roots,
+        })),
+    }
+}
+
 pub async fn explain_mysql(pool: &sqlx::MySqlPool, sql: &str) -> Result<ExplainResult, String> {
     let sql = strip_sql(sql);
     let q = format!("EXPLAIN FORMAT=JSON {sql}");

From 5d9186485fa3d5249020cddea0d0910b9330b29d Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 26/27] chore: update package-lock

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 608c6a0c..63b53fc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "stroke",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "stroke",
-      "version": "1.5.0",
+      "version": "1.7.0",
       "dependencies": {
         "@dagrejs/dagre": "^3.0.0",
         "@fontsource-variable/geist": "^5.2.9",

From 1801e0c531e51bae12805303289ebe88e7ed5dcc Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 10 Jul 2026 12:10:16 +0545
Subject: [PATCH 27/27] docs(changelog): add unreleased entry

---
 CHANGELOG.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9bb5767e..a70decb7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,30 @@ All notable changes to Stroke are listed here, newest first.
 
 ---
 
+## [Unreleased]
+
+### Changes
+
+#### Connect experience (redesigned)
+- Rebuilt the connection screen as a **two-pane layout** — choose your connection type, driver, and saved connections in a left rail while editing details in a focused right pane, so the fields are reachable without scrolling.
+- **Pick one input method** — a segmented switch toggles between pasting a **connection string** and filling **manual fields**, instead of showing both at once. Pasting a string auto-fills the fields and validates on connect.
+- **Cleaner provider picker** — Neon, Supabase, PlanetScale, and Prisma Postgres now appear as a single calm list with a clear selected state and a compact sign-in action, replacing the bulky cards.
+- Redesigned the **connection error** as a readable inline alert and gave the footer a clear status chip (Ready / Unsaved / Connection OK / Failed) alongside unambiguous Test and Connect actions.
+- Inputs now use a **crisp outline and a single accent focus ring**, consistent across the app.
+- Widened the connections rail and stopped the connection screen from flickering when switching between saved connections or drivers.
+
+#### Interface polish
+- Added **press feedback** to buttons and gave menus, selects, popovers, tooltips, and dialogs consistent, snappier open/close motion; menus now scale from the control that opened them.
+- The app now respects the system **"reduce motion"** setting — movement is minimized while feedback is preserved.
+- **Sidebar** table rows: names and row counts sit on a shared baseline, resting contrast is higher for easier scanning, and section headers are refined.
+- Tightened **Settings** spacing and control feedback.
+
+### Bug Fixes
+- Fixed **"Limit must be at least 1"** when opening a table after choosing "All" rows — the page size now falls back to a valid default (50) instead of erroring.
+- The data grid no longer offers **Set NULL** on NOT NULL columns; it shows a clear message instead of attempting a write that would fail.
+- Text on the connection screen is no longer accidentally selectable, and the cursor now shows a pointer on every clickable control.
+
+
 ## [1.7.0] - 2026-07-06
 
 ### New Features