foldkit 0.35.2 → 0.36.1

package/dist/task/dom.js

@@ -1,11 +1,14 @@
-import { Array, Effect, Equal, Match as M, Number, Option } from 'effect';
+import { Array, Effect, Equal, Function, Match as M, Number, Option, } from 'effect';
 import { ElementNotFound } from './error';
+const BASE_DIALOG_Z_INDEX = 2147483600;
+let openDialogCount = 0;
+const dialogCleanups = new WeakMap();
 const FOCUSABLE_SELECTOR = Array.join([
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
     '[tabindex]:not([tabindex="-1"])',
 ], ', ');
 /**
@@ -31,7 +34,10 @@ export const focus = (selector) => Effect.async(resume => {
     });
 });
 /**
- * Opens a dialog element as a modal using `showModal()`.
+ * Opens a dialog element using `show()` with high z-index, focus trapping,
+ * and Escape key handling. Uses `show()` instead of `showModal()` so that
+ * DevTools (and any other high-z-index overlay) remains interactive — the
+ * Dialog component provides its own backdrop, scroll locking, and transitions.
  * Uses requestAnimationFrame to ensure the DOM is updated before attempting to show.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLDialogElement`.
  *
@@ -44,7 +50,27 @@ export const showModal = (selector) => Effect.async(resume => {
     requestAnimationFrame(() => {
         const element = document.querySelector(selector);
         if (element instanceof HTMLDialogElement) {
-            element.showModal();
+            element.style.position = 'fixed';
+            element.style.inset = '0';
+            openDialogCount++;
+            element.style.zIndex = String(BASE_DIALOG_Z_INDEX + openDialogCount);
+            element.show();
+            const handleKeydown = (event) => {
+                if (!element.open) {
+                    return;
+                }
+                M.value(event.key).pipe(M.when('Escape', () => {
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+                    event.preventDefault();
+                    element.dispatchEvent(new Event('cancel', { cancelable: true }));
+                }), M.when('Tab', () => {
+                    trapFocusWithinDialog(event, element);
+                }), M.orElse(Function.constVoid));
+            };
+            document.addEventListener('keydown', handleKeydown);
+            dialogCleanups.set(element, () => document.removeEventListener('keydown', handleKeydown));
             resume(Effect.void);
         }
         else {
@@ -52,8 +78,24 @@ export const showModal = (selector) => Effect.async(resume => {
         }
     });
 });
+const trapFocusWithinDialog = (event, dialog) => {
+    const focusable = Array.fromIterable(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
+    if (Array.isNonEmptyArray(focusable)) {
+        const first = Array.headNonEmpty(focusable);
+        const last = Array.lastNonEmpty(focusable);
+        if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+};
 /**
  * Closes a dialog element using `.close()`.
+ * Cleans up the keyboard handlers installed by `showModal`.
  * Uses requestAnimationFrame to ensure the DOM is updated before attempting to close.
  * Fails with `ElementNotFound` if the selector does not match an `HTMLDialogElement`.
  *
@@ -67,6 +109,12 @@ export const closeModal = (selector) => Effect.async(resume => {
         const element = document.querySelector(selector);
         if (element instanceof HTMLDialogElement) {
             element.close();
+            openDialogCount = Math.max(0, openDialogCount - 1);
+            const cleanup = dialogCleanups.get(element);
+            if (cleanup) {
+                cleanup();
+                dialogCleanups.delete(element);
+            }
             resume(Effect.void);
         }
         else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.35.2",
+  "version": "0.36.1",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",

package/dist/runtime/errorUI.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"errorUI.d.ts","sourceRoot":"","sources":["../../src/runtime/errorUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,OAAO,EAAE,IAAI,EAAQ,MAAM,SAAS,CAAA;AAEpC,eAAO,MAAM,YAAY;8BACG,OAAO;6BACR,OAAO;CACjC,CAAA;AAmBD,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,YAAY,OAAO,KAAG,IA4LpE,CAAA"}