Add closeNow and overlay pointer-events fix (#504)

Handle immediate dialog teardown and interaction blocking: register a 'tools-dismiss' listener to call closeNow, call closeNow during disconnectedCallback, and add a closeNow() method that clears any close timeout, removes 'show' classes from overlay/container, and invokes overlay.close(). Also update CSS to disable pointer events by default and enable them only when .show is present so the hidden overlay doesn't intercept clicks.

Co-authored-by: Bryan Haberberger <bryan.j.haberberger@slu.edu>

Author: cubap

components/quicktype-tool/quicktype-editor-dialog.js

@@ -28,6 +28,7 @@ class QuickTypeEditorDialog extends HTMLElement {
 
     connectedCallback() {
         this.render()
+        this.cleanup.onEvent(eventDispatcher, 'tools-dismiss', () => this.closeNow())
     }
 
     disconnectedCallback() {
@@ -36,6 +37,7 @@ class QuickTypeEditorDialog extends HTMLElement {
             clearTimeout(this.#closeAnimationTimeout)
             this.#closeAnimationTimeout = null
         }
+        this.closeNow()
         this.dialogCleanup.run()
         this.cleanup.run()
     }
@@ -76,6 +78,20 @@ class QuickTypeEditorDialog extends HTMLElement {
         }, 300)
     }
 
+    closeNow() {
+        const overlay = this.shadowRoot.querySelector('.dialog-overlay')
+        const container = this.shadowRoot.querySelector('.dialog-container')
+
+        if (this.#closeAnimationTimeout) {
+            clearTimeout(this.#closeAnimationTimeout)
+            this.#closeAnimationTimeout = null
+        }
+
+        overlay?.classList?.remove('show')
+        container?.classList?.remove('show')
+        overlay?.close?.()
+    }
+
     addEventListeners() {
         // Clear previous dialog-specific listeners before adding new ones
         this.dialogCleanup.run()
@@ -402,13 +418,15 @@ class QuickTypeEditorDialog extends HTMLElement {
                 max-width: 100vw;
                 height: 100vh;
                 max-height: 100vh;
+                pointer-events: none;
             }
 
             .dialog-overlay::backdrop {
                 background: rgba(0, 0, 0, 0.6);
             }
 
             .dialog-overlay.show {
+                pointer-events: auto;
                 background: rgba(0, 0, 0, 0.6);
                 backdrop-filter: blur(2px);
             }