From 38ec834f072dc513f7dddae3fdd470c307943df5 Mon Sep 17 00:00:00 2001
From: KhaledQasim <khaled.qasim183@gmail.com>
Date: Tue, 22 Sep 2026 22:07:47 +0300
Subject: [PATCH 1/2] fix: scope preview toolbar's path fill rule to #toolbar

The global `path { fill: ... }` rule in previewPage.html, added to color
the toolbar's zoom/refresh icons, also overrode the fill on the injected
D2 diagram's own paths. Since a CSS rule beats an SVG presentation
attribute, every edge (fill="none") got painted solid instead of staying
stroke-only, corrupting the preview of any diagram with connections.
---
 pages/previewPage.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/previewPage.html b/pages/previewPage.html
index 67e940e..382381c 100644
--- a/pages/previewPage.html
+++ b/pages/previewPage.html
@@ -66,7 +66,7 @@
         height: 100%;
       }
 
-      path {
+      #toolbar path {
         fill: var(--vscode-button-foreground);
       }
 

From ad3a50cb69a4d998e15f7a4b069e33690f753633 Mon Sep 17 00:00:00 2001
From: KhaledQasim <khaled.qasim183@gmail.com>
Date: Tue, 22 Sep 2026 22:08:41 +0300
Subject: [PATCH 2/2] feat: offer TALA layout when d2 reports it as available

TALA now ships bundled with d2, so the layout picker only offering it
when a standalone `d2plugin-tala` binary is on PATH hid it from most
users. Ask d2 directly via `d2 layout`, which lists every engine it can
use (bundled or plugin), and keep the PATH check as a fallback.
---
 package.json        |  2 +-
 src/layoutPicker.ts |  5 +++--
 src/utility.ts      | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index ead3bae..af069d3 100644
--- a/package.json
+++ b/package.json
@@ -192,7 +192,7 @@
           "enumDescriptions": [
             "The directed graph layout library Dagre",
             "Eclipse Layout Kernel (ELK) with the Layered algorithm",
-            "Terrastruct's AutoLayout Approach - available if installed"
+            "Terrastruct's AutoLayout Approach"
           ],
           "description": "Layout used for preview."
         },
diff --git a/src/layoutPicker.ts b/src/layoutPicker.ts
index 3023383..2925e78 100644
--- a/src/layoutPicker.ts
+++ b/src/layoutPicker.ts
@@ -33,8 +33,9 @@ const talaPluginName: string =
  */
 export class layoutPicker {
   constructor() {
-    // If the plugin file exists, add the option if it hasn't been added before
-    if (util.isFileOnPath(talaPluginName)) {
+    // If d2 reports TALA (bundled or as a plugin), or the plugin file exists,
+    // add the option if it hasn't been added before
+    if (util.isLayoutAvailable("tala") || util.isFileOnPath(talaPluginName)) {
       if (layouts.indexOf(layoutTala) === -1) {
         layouts.push(layoutTala);
       }
diff --git a/src/utility.ts b/src/utility.ts
index 982296a..94b0953 100644
--- a/src/utility.ts
+++ b/src/utility.ts
@@ -122,6 +122,21 @@ class Utility {
       util.showErrorToolsNotFound("");
     }
   }
+
+  /**
+   * isLayoutAvailable - returns true if `d2 layout` reports the given
+   *   layout engine, whether it is bundled with d2 or installed as a
+   *   plugin on the path.
+   */
+  isLayoutAvailable(layout: string): boolean {
+    const d2Path: string = ws.get("execPath", "d2");
+    const result = spawnSync(d2Path, ["layout"], { encoding: "utf-8" });
+    if (result.error || result.status !== 0) {
+      return false;
+    }
+
+    return new RegExp(`^${layout}\\b`, "m").test(result.stdout);
+  }
 }
 
 export class VT {