@jxsuite/studio 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -24,15 +24,16 @@
   "scripts": {
     "build": "bun build ./src/studio.js --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
     "gen:webdata": "bun run scripts/gen-webdata.js",
-    "test": "bun test",
+    "test": "bun test --isolate",
+    "test:coverage": "bun test --isolate --coverage",
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/parser": "^0.20.0",
-    "@jxsuite/runtime": "^0.20.0",
-    "@jxsuite/schema": "^0.20.0",
+    "@jxsuite/parser": "^0.21.0",
+    "@jxsuite/runtime": "^0.21.0",
+    "@jxsuite/schema": "^0.21.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

package/src/browse/browse-modal.js

@@ -4,6 +4,7 @@
  */
 
 import { html } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { renderBrowse } from "./browse.js";
 import { openFileInTab } from "../files/files.js";
 import { openModal } from "../ui/layers.js";
@@ -31,23 +32,25 @@ export function openBrowseModal() {
           <sp-icon-close slot="icon"></sp-icon-close>
         </sp-action-button>
       </div>
-      <div class="browse-modal-content"></div>
+      <div
+        class="browse-modal-content"
+        ${ref((el) => {
+          if (el) {
+            requestAnimationFrame(() => {
+              renderBrowse(/** @type {HTMLElement} */ (el), {
+                openFile: (/** @type {string} */ path) => {
+                  closeBrowseModal();
+                  openFileInTab(path);
+                },
+              });
+            });
+          }
+        })}
+      ></div>
     </div>
   `;
 
   _handle = openModal(tpl);
-
-  requestAnimationFrame(() => {
-    const container = _handle?.host.querySelector(".browse-modal-content");
-    if (container) {
-      renderBrowse(/** @type {HTMLElement} */ (container), {
-        openFile: (/** @type {string} */ path) => {
-          closeBrowseModal();
-          openFileInTab(path);
-        },
-      });
-    }
-  });
 }
 
 export function closeBrowseModal() {

package/src/browse/browse.js

@@ -154,7 +154,7 @@ function contentTypeFor(filePath) {
   for (const [name, def] of Object.entries(config.contentTypes)) {
     const d = /** @type {ContentTypeDef} */ (def);
     if (!d.source) continue;
-    const prefix = d.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    const prefix = d.source.replace(/^\.\//, "").replace(/\/$/, "");
     if (filePath.startsWith(prefix + "/") || filePath === prefix) {
       return name.charAt(0).toUpperCase() + name.slice(1);
     }
@@ -233,12 +233,12 @@ function getContentTypeTypes() {
   if (!config?.contentTypes) return [];
   return Object.entries(config.contentTypes).map(([name, def]) => {
     const d = /** @type {ContentTypeDef} */ (def);
-    const dir = d.source ? d.source.replace(/^\.\//, "").split("/")[0] : name;
+    const dir = d.source ? d.source.replace(/^\.\//, "").replace(/\/$/, "") : name;
     return {
       key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
-      ext: ".md",
+      ext: `.${d.format || "md"}`,
       contentTypeName: name,
     };
   });
@@ -362,7 +362,22 @@ function showBrowseContextMenu(e, file, container, ctx) {
     y = e.clientY;
 
   _browseCtxHandle = renderPopover(
-    html`<sp-popover open style="position:fixed;left:${x}px;top:${y}px">
+    html`<sp-popover
+      open
+      style="position:fixed;left:${x}px;top:${y}px"
+      ${ref((el) => {
+        if (!el) return;
+        requestAnimationFrame(() => {
+          const popover = /** @type {HTMLElement} */ (el);
+          const menuRect = popover.getBoundingClientRect();
+          if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
+          if (y + menuRect.height > window.innerHeight)
+            y = window.innerHeight - menuRect.height - 4;
+          popover.style.left = `${x}px`;
+          popover.style.top = `${y}px`;
+        });
+      })}
+    >
       <sp-menu>
         ${items.map((item) =>
           item.label === "\u2014"
@@ -386,18 +401,6 @@ function showBrowseContextMenu(e, file, container, ctx) {
       layer: "dialog",
     },
   );
-
-  requestAnimationFrame(() => {
-    const popover = /** @type {HTMLElement | null} */ (
-      _browseCtxHandle?.host.querySelector("sp-popover")
-    );
-    if (!popover) return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight) y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }
 
 /**

package/src/canvas/canvas-live-render.js

@@ -13,6 +13,7 @@ import {
   buildScope,
   defineElement,
   setSkipServerFunctions,
+  setSkipContentResolution,
 } from "@jxsuite/runtime";
 import {
   getEffectiveElements,
@@ -30,6 +31,16 @@ import { buildNestedSiteCSS } from "./nested-site-style.js";
 
 export { buildNestedSiteCSS } from "./nested-site-style.js";
 
+/** @param {Event} e */
+function _preventNav(e) {
+  if (/** @type {HTMLElement} */ (e.target).closest("a[href]")) {
+    e.preventDefault();
+  }
+}
+
+/** Canvas elements that already have the delegated nav guard listener. */
+const _navGuarded = new WeakSet();
+
 /** @type {{ getCanvasMode: () => string } | null} */
 let _ctx = null;
 
@@ -128,6 +139,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
   // failed proxy calls and infinite reactive retries (also covers
   // async custom element connectedCallbacks that run after this function returns)
   setSkipServerFunctions(canvasMode !== "preview");
+  setSkipContentResolution(canvasMode !== "preview");
 
   let renderDoc =
     canvasMode === "preview"
@@ -460,6 +472,13 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
 
     canvasEl.appendChild(el);
 
+    // Delegated click handler prevents link navigation in all canvas modes.
+    // Attached once per canvasEl (survives reactive re-renders that replace children).
+    if (!_navGuarded.has(canvasEl)) {
+      canvasEl.addEventListener("click", _preventNav);
+      _navGuarded.add(canvasEl);
+    }
+
     if (canvasMode === "design" || canvasMode === "edit") {
       requestAnimationFrame(() => {
         const editingEl = getActiveElement();

package/src/canvas/canvas-utils.js

@@ -25,6 +25,9 @@ import { getActivePanel, findCanvasElement } from "./canvas-helpers.js";
  */
 let _ctx;
 
+/** @type {HTMLElement | null} */
+let _zoomIndicatorEl = null;
+
 /**
  * Initialize the canvas utils module.
  *
@@ -288,7 +291,12 @@ export function renderZoomIndicator() {
   const host = getLayerSlot("popover", "zoom-indicator");
   litRender(
     html`
-      <div class="zoom-indicator">
+      <div
+        class="zoom-indicator"
+        ${ref((el) => {
+          _zoomIndicatorEl = /** @type {HTMLElement | null} */ (el || null);
+        })}
+      >
         <span class="zoom-indicator-action" title="Reset to 100%" @click=${resetZoom}>
           <svg
             width="14"
@@ -325,12 +333,11 @@ export function renderZoomIndicator() {
 
 /** Position the zoom indicator relative to canvas-wrap bounds. */
 export function positionZoomIndicator() {
-  const indicator = /** @type {HTMLElement | null} */ (document.querySelector(".zoom-indicator"));
-  if (!indicator) return;
+  if (!_zoomIndicatorEl) return;
   const rect = canvasWrap.getBoundingClientRect();
-  indicator.style.left = `${rect.left + rect.width / 2}px`;
-  indicator.style.top = `${rect.bottom - 32}px`;
-  indicator.style.transform = "translateX(-50%)";
+  _zoomIndicatorEl.style.left = `${rect.left + rect.width / 2}px`;
+  _zoomIndicatorEl.style.top = `${rect.bottom - 32}px`;
+  _zoomIndicatorEl.style.transform = "translateX(-50%)";
 }
 
 /** Toggle "active" class on canvas panel headers based on activeMedia. */

package/src/editor/context-menu.js

@@ -1,5 +1,6 @@
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
 import { activeTab, workspace } from "../workspace/workspace.js";
 import {
@@ -12,6 +13,7 @@ import {
 } from "../tabs/transact.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { convertToComponent } from "./convert-to-component.js";
+import { convertToRepeater } from "./convert-to-repeater.js";
 import { componentRegistry } from "../files/components.js";
 import { renderPopover } from "../ui/layers.js";
 import { startLayerTitleEdit } from "../panels/layers-panel.js";
@@ -169,6 +171,15 @@ export function showContextMenu(e, path, opts = {}) {
       label: "Wrap in Div",
       action: () => transactDoc(activeTab.value, (t) => mutateWrapNode(t, path)),
     });
+    // Don't show Repeat if already inside a repeater (path ends with "children", "map")
+    if (
+      !(path.length >= 2 && path[path.length - 2] === "children" && path[path.length - 1] === "map")
+    ) {
+      items.push({
+        label: "Repeat...",
+        action: () => convertToRepeater(),
+      });
+    }
     items.push({
       label: "Set Title",
       action: () => {
@@ -231,7 +242,22 @@ export function showContextMenu(e, path, opts = {}) {
     y = e.clientY;
 
   _ctxHandle = renderPopover(
-    html`<sp-popover open style="position:fixed;z-index:10000;left:${x}px;top:${y}px">
+    html`<sp-popover
+      open
+      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
+      ${ref((el) => {
+        if (!el) return;
+        requestAnimationFrame(() => {
+          const popover = /** @type {HTMLElement} */ (el);
+          const menuRect = popover.getBoundingClientRect();
+          if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
+          if (y + menuRect.height > window.innerHeight)
+            y = window.innerHeight - menuRect.height - 4;
+          popover.style.left = `${x}px`;
+          popover.style.top = `${y}px`;
+        });
+      })}
+    >
       <sp-menu>
         ${items.map((item) =>
           item.label === "—"
@@ -254,16 +280,4 @@ export function showContextMenu(e, path, opts = {}) {
       },
     },
   );
-
-  requestAnimationFrame(() => {
-    const popover = /** @type {HTMLElement | null} */ (
-      _ctxHandle?.host.querySelector("sp-popover")
-    );
-    if (!popover) return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight) y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }

package/src/editor/convert-targets.js

@@ -0,0 +1,60 @@
+import elementsMeta from "../../data/elements-meta.json";
+
+/** @typedef {{ label: string; tag: string; description: string }} SlashCommand */
+
+const TAG_LABELS = /** @type {Record<string, string>} */ ({
+  p: "Paragraph",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+  blockquote: "Blockquote",
+  div: "Div",
+  section: "Section",
+  article: "Article",
+  aside: "Aside",
+  main: "Main",
+  header: "Header",
+  footer: "Footer",
+  nav: "Nav",
+  search: "Search",
+  ul: "Bulleted List",
+  ol: "Numbered List",
+});
+
+const groups = /** @type {Record<string, string[]>} */ (elementsMeta.$convertGroups || {});
+
+/**
+ * Get the list of tags the current element can be converted to.
+ *
+ * @param {string} currentTag
+ * @param {boolean} isEmpty
+ * @returns {SlashCommand[]}
+ */
+export function getConvertTargets(currentTag, isEmpty) {
+  const def = /** @type {Record<string, unknown> | undefined} */ (
+    /** @type {Record<string, Record<string, unknown>>} */ (elementsMeta.$defs)?.[currentTag]
+  );
+  if (!def?.$convertTo) return [];
+
+  const groupNames =
+    isEmpty && def.$convertToWhenEmpty
+      ? /** @type {string[]} */ (def.$convertToWhenEmpty)
+      : [/** @type {string} */ (def.$convertTo)];
+
+  /** @type {Set<string>} */
+  const tags = new Set();
+  for (const name of groupNames) {
+    for (const tag of groups[name] || []) {
+      if (tag !== currentTag) tags.add(tag);
+    }
+  }
+
+  return [...tags].map((tag) => ({
+    label: TAG_LABELS[tag] || tag.charAt(0).toUpperCase() + tag.slice(1),
+    tag,
+    description: "",
+  }));
+}

package/src/editor/convert-to-component.js

@@ -1,5 +1,6 @@
 // ─── Convert to Component ─────────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transact } from "../tabs/transact.js";
@@ -172,6 +173,14 @@ function promptComponentName(defaultName) {
             ?negative=${!!error}
             @input=${onInput}
             @keydown=${onKeydown}
+            ${ref((el) => {
+              if (el)
+                requestAnimationFrame(() => {
+                  /** @type {HTMLElement} */ (el).focus();
+                  const input = /** @type {HTMLElement} */ (el).shadowRoot?.querySelector("input");
+                  if (input) input.select();
+                });
+            })}
           >
             <sp-help-text slot="negative-help-text">${error}</sp-help-text>
           </sp-textfield>
@@ -179,16 +188,6 @@ function promptComponentName(defaultName) {
       `;
     }
 
-    requestAnimationFrame(() => {
-      const layer = document.getElementById("layer-dialog");
-      const tf = /** @type {HTMLElement | null} */ (layer?.querySelector("sp-textfield"));
-      if (tf) {
-        tf.focus();
-        const input = tf.shadowRoot?.querySelector("input");
-        if (input) input.select();
-      }
-    });
-
     return buildTpl();
   });
 }

package/src/editor/convert-to-repeater.js

@@ -0,0 +1,226 @@
+// ─── Convert to Repeater ──────────────────────────────────────────────────────
+import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc } from "../tabs/transact.js";
+import { showDialog } from "../ui/layers.js";
+import { defCategory } from "../panels/signals-panel.js";
+
+/**
+ * @typedef {{
+ *   items: { $ref: string } | unknown[];
+ *   filter?: { $ref: string };
+ *   sort?: { $ref: string };
+ *   newDef?: { name: string };
+ * }} RepeaterConfig
+ */
+
+/** Convert the currently selected element into a repeater template. */
+export async function convertToRepeater() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+
+  const path = tab.session.selection;
+  const node = getNodeAtPath(tab.doc.document, path);
+  if (!node) return;
+
+  const defs = tab.doc.document.state || {};
+  const config = await promptRepeaterConfig(defs);
+  if (!config) return;
+
+  transactDoc(tab, (t) => {
+    const doc = t.doc.document;
+    if (config.newDef) {
+      if (!doc.state) doc.state = {};
+      doc.state[config.newDef.name] = { type: "array", default: [] };
+    }
+    const pp = parentElementPath(path);
+    if (!pp) return;
+    const idx = /** @type {number} */ (childIndex(path));
+    const parent = getNodeAtPath(doc, pp);
+    if (!parent?.children) return;
+    const element = parent.children[idx];
+
+    /** @type {Record<string, unknown>} */
+    const repeater = {
+      $prototype: "Array",
+      items: config.items,
+      map: element,
+    };
+    if (config.filter) repeater.filter = config.filter;
+    if (config.sort) repeater.sort = config.sort;
+
+    /** @type {(string | JxMutableNode)[]} */ (parent.children)[idx] = {
+      tagName: "div",
+      children: /** @type {any} */ (repeater),
+    };
+  });
+}
+
+/**
+ * @param {Record<string, unknown>} defs
+ * @returns {Promise<RepeaterConfig | null>}
+ */
+function promptRepeaterConfig(defs) {
+  const arrayDefs = Object.entries(defs).filter(
+    ([, d]) =>
+      /** @type {any} */ (d)?.type === "array" ||
+      Array.isArray(/** @type {any} */ (d)?.default) ||
+      /** @type {any} */ (d)?.$prototype === "Array",
+  );
+  const fnDefs = Object.entries(defs).filter(([, d]) => defCategory(d) === "function");
+
+  let source = arrayDefs.length > 0 ? arrayDefs[0][0] : "__new__";
+  let newDefName = "";
+  let filterDef = "";
+  let sortDef = "";
+  let error = "";
+
+  return showDialog((done) => {
+    function confirm() {
+      if (source === "__new__") {
+        const name = newDefName.trim();
+        if (!name) {
+          error = "Enter a name for the new state definition.";
+          rerender();
+          return;
+        }
+        if (defs[name]) {
+          error = `"${name}" already exists.`;
+          rerender();
+          return;
+        }
+        if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name)) {
+          error = "Invalid identifier name.";
+          rerender();
+          return;
+        }
+        done({
+          items: { $ref: `#/$defs/${name}` },
+          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
+          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+          newDef: { name },
+        });
+      } else {
+        done({
+          items: { $ref: `#/$defs/${source}` },
+          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
+          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+        });
+      }
+    }
+
+    function rerender() {
+      const layer = document.getElementById("layer-dialog");
+      const slot = layer?.lastElementChild;
+      if (slot) litRender(buildTpl(), /** @type {HTMLElement} */ (slot));
+    }
+
+    function buildTpl() {
+      return html`
+        <sp-dialog-wrapper
+          open
+          underlay
+          headline="Repeat..."
+          confirm-label="Create Repeater"
+          cancel-label="Cancel"
+          size="s"
+          @confirm=${confirm}
+          @cancel=${() => done(null)}
+          @close=${() => done(null)}
+        >
+          <div style="display:flex;flex-direction:column;gap:12px">
+            <label>
+              <sp-field-label size="s">Items source</sp-field-label>
+              <sp-picker
+                label="Items source"
+                size="s"
+                .value=${source}
+                @change=${(/** @type {Event} */ e) => {
+                  source = /** @type {HTMLInputElement} */ (e.target).value;
+                  error = "";
+                  rerender();
+                }}
+              >
+                ${arrayDefs.map(
+                  ([name]) => html`<sp-menu-item value=${name}>${name}</sp-menu-item>`,
+                )}
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item value="__new__">Create new...</sp-menu-item>
+              </sp-picker>
+            </label>
+
+            ${source === "__new__"
+              ? html`
+                  <label>
+                    <sp-field-label size="s">New definition name</sp-field-label>
+                    <sp-textfield
+                      size="s"
+                      placeholder="myItems"
+                      .value=${newDefName}
+                      ?negative=${!!error}
+                      @input=${(/** @type {Event} */ e) => {
+                        newDefName = /** @type {HTMLInputElement} */ (e.target).value || "";
+                        error = "";
+                        rerender();
+                      }}
+                      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+                        if (e.key === "Enter") confirm();
+                      }}
+                      ${ref((el) => {
+                        if (el && source === "__new__")
+                          requestAnimationFrame(() => /** @type {HTMLElement} */ (el).focus());
+                      })}
+                    >
+                      <sp-help-text slot="negative-help-text">${error}</sp-help-text>
+                    </sp-textfield>
+                  </label>
+                `
+              : nothing}
+            ${fnDefs.length > 0
+              ? html`
+                  <label>
+                    <sp-field-label size="s">Filter (optional)</sp-field-label>
+                    <sp-picker
+                      label="Filter"
+                      size="s"
+                      .value=${filterDef}
+                      @change=${(/** @type {Event} */ e) => {
+                        filterDef = /** @type {HTMLInputElement} */ (e.target).value;
+                        rerender();
+                      }}
+                    >
+                      <sp-menu-item value="">None</sp-menu-item>
+                      ${fnDefs.map(
+                        ([name]) => html`<sp-menu-item value=${name}>${name}</sp-menu-item>`,
+                      )}
+                    </sp-picker>
+                  </label>
+                  <label>
+                    <sp-field-label size="s">Sort (optional)</sp-field-label>
+                    <sp-picker
+                      label="Sort"
+                      size="s"
+                      .value=${sortDef}
+                      @change=${(/** @type {Event} */ e) => {
+                        sortDef = /** @type {HTMLInputElement} */ (e.target).value;
+                        rerender();
+                      }}
+                    >
+                      <sp-menu-item value="">None</sp-menu-item>
+                      ${fnDefs.map(
+                        ([name]) => html`<sp-menu-item value=${name}>${name}</sp-menu-item>`,
+                      )}
+                    </sp-picker>
+                  </label>
+                `
+              : nothing}
+          </div>
+        </sp-dialog-wrapper>
+      `;
+    }
+
+    return buildTpl();
+  });
+}

package/src/editor/inline-edit.js

@@ -56,6 +56,9 @@ const EDITABLE_BLOCKS = new Set([
   "td",
   "th",
   "blockquote",
+  "span",
+  "a",
+  "label",
 ]);
 
 // ─── Context-aware inline scoping ─────────────────────────────────────────

package/src/editor/shortcuts.js

@@ -18,6 +18,7 @@ import {
 import { isEditing, stopEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
 import { openQuickSearch } from "../panels/quick-search.js";
+import { showConfirmDialog } from "../ui/layers.js";
 
 /** @typedef {import("../state.js").JxPath} JxPath */
 
@@ -160,9 +161,16 @@ export function initShortcuts(getContext) {
             const tab = workspace.tabs.get(workspace.activeTabId);
             if (tab?.doc.dirty) {
               const name = tab.documentPath?.split("/").pop() || "Untitled";
-              if (!window.confirm(`"${name}" has unsaved changes. Close without saving?`)) break;
+              showConfirmDialog(
+                "Unsaved Changes",
+                `"${name}" has unsaved changes. Close without saving?`,
+                { confirmLabel: "Close", destructive: true },
+              ).then((confirmed) => {
+                if (confirmed && workspace.activeTabId) closeTab(workspace.activeTabId);
+              });
+            } else {
+              closeTab(workspace.activeTabId);
             }
-            closeTab(workspace.activeTabId);
           }
           break;
         case "o":