@floegence/floe-webapp-core 0.26.2 → 0.26.5

package/dist/components/ui/CommandPalette.js

@@ -1,146 +1,160 @@
-import { createComponent as i, Portal as M, insert as l, use as O, Dynamic as L, effect as y, className as C, setAttribute as z, template as c, delegateEvents as F } from "solid-js/web";
-import { createSignal as I, createEffect as w, onCleanup as S, createMemo as K, Show as g, For as D } from "solid-js";
-import { cn as E } from "../../utils/cn.js";
-import { useCommand as R } from "../../context/CommandContext.js";
-import { Search as j } from "../icons/index.js";
-import { lockBodyStyle as B } from "../../utils/bodyStyleLock.js";
-import { useResolvedFloeConfig as N } from "../../context/FloeConfigContext.js";
-var T = /* @__PURE__ */ c('<div class="fixed inset-0 z-50 bg-background/60 backdrop-blur-sm animate-in fade-in">'), U = /* @__PURE__ */ c('<div><div class="flex items-center gap-3 px-4 pt-1 border-b border-border"><input type=text><kbd class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted font-mono"></kbd></div><div class="max-h-80 overflow-y-auto py-2">'), q = /* @__PURE__ */ c('<div class="px-4 py-8 text-center text-sm text-muted-foreground">'), G = /* @__PURE__ */ c('<div><div class="px-4 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">'), H = /* @__PURE__ */ c('<span class="w-5 h-5 flex items-center justify-center text-muted-foreground">'), J = /* @__PURE__ */ c('<span class="ml-2 text-muted-foreground text-xs">'), Q = /* @__PURE__ */ c('<kbd class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted font-mono">'), V = /* @__PURE__ */ c('<button type=button><div class="flex-1 text-left"><span>');
-function ne() {
-  const t = R(), $ = N();
-  let x;
-  const [k, f] = I(0);
-  w(() => {
-    t.isOpen() && x && (x.focus(), f(0));
-  }), w(() => {
-    t.search(), f(0);
-  }), w(() => {
-    if (!t.isOpen()) return;
-    const n = (o) => {
-      const e = t.filteredCommands();
-      switch (o.key) {
-        case "Escape":
-          o.preventDefault(), t.close();
-          break;
-        case "ArrowDown":
-          o.preventDefault(), f((a) => Math.min(a + 1, e.length - 1));
-          break;
-        case "ArrowUp":
-          o.preventDefault(), f((a) => Math.max(a - 1, 0));
-          break;
-        case "Enter":
-          o.preventDefault(), e[k()] && t.execute(e[k()].id);
-          break;
-      }
-    };
-    window.addEventListener("keydown", n), S(() => window.removeEventListener("keydown", n));
-  }), w(() => {
-    if (!t.isOpen()) return;
-    const n = B({
-      overflow: "hidden"
-    });
-    S(n);
+import { createComponent as s, Portal as K, insert as o, use as S, Dynamic as R, effect as y, className as C, setAttribute as z, template as d, delegateEvents as I } from "solid-js/web";
+import { createSignal as T, createEffect as E, createMemo as j, Show as g, For as O } from "solid-js";
+import { cn as D } from "../../utils/cn.js";
+import { useCommand as B } from "../../context/CommandContext.js";
+import { Search as H } from "../icons/index.js";
+import { useResolvedFloeConfig as L } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as N } from "../../hooks/useOverlayMask.js";
+import { matchKeybind as U } from "../../utils/keybind.js";
+var W = /* @__PURE__ */ d('<div class="fixed inset-0 z-50 bg-background/60 backdrop-blur-sm animate-in fade-in">'), q = /* @__PURE__ */ d('<div><div class="flex items-center gap-3 px-4 pt-1 border-b border-border"><input type=text><kbd class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted font-mono"></kbd></div><div class="max-h-80 overflow-y-auto overscroll-contain py-2">'), G = /* @__PURE__ */ d('<div class="px-4 py-8 text-center text-sm text-muted-foreground">'), J = /* @__PURE__ */ d('<div><div class="px-4 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">'), Q = /* @__PURE__ */ d('<span class="w-5 h-5 flex items-center justify-center text-muted-foreground">'), V = /* @__PURE__ */ d('<span class="ml-2 text-muted-foreground text-xs">'), X = /* @__PURE__ */ d('<kbd class="text-xs text-muted-foreground px-1.5 py-0.5 rounded bg-muted font-mono">'), Y = /* @__PURE__ */ d('<button type=button><div class="flex-1 text-left"><span>');
+function se() {
+  const r = B(), x = L();
+  let h, k;
+  const [w, f] = T(0);
+  N({
+    open: r.isOpen,
+    root: () => k,
+    onClose: () => r.close(),
+    lockBodyScroll: !0,
+    trapFocus: !0,
+    closeOnEscape: !0,
+    blockHotkeys: !0,
+    // Prevent scroll bleed on the backdrop while keeping the results list scrollable.
+    blockWheel: "outside",
+    blockTouchMove: "outside",
+    restoreFocus: !0
+  }), E(() => {
+    r.isOpen() && h && (h.focus(), f(0));
+  }), E(() => {
+    r.search(), f(0);
   });
-  const P = K(() => {
-    const n = t.filteredCommands(), o = /* @__PURE__ */ new Map();
-    return n.forEach((e, a) => {
-      const h = e.category ?? "Commands", p = o.get(h);
+  const P = (e) => {
+    if (U(e, x.config.commands.palette.keybind)) {
+      e.preventDefault(), r.close();
+      return;
+    }
+    const l = r.filteredCommands();
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const t = l.length;
+        if (t <= 0) return;
+        f((i) => Math.max(0, Math.min(i + 1, t - 1)));
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const t = l.length;
+        if (t <= 0) return;
+        f((i) => Math.max(0, Math.min(i - 1, t - 1)));
+        break;
+      }
+      case "Enter":
+        e.preventDefault(), l[w()] && r.execute(l[w()].id);
+        break;
+    }
+  }, A = j(() => {
+    const e = r.filteredCommands(), l = /* @__PURE__ */ new Map();
+    return e.forEach((t, i) => {
+      const v = t.category ?? "Commands", p = l.get(v);
       p ? p.push({
-        cmd: e,
-        index: a
-      }) : o.set(h, [{
-        cmd: e,
-        index: a
+        cmd: t,
+        index: i
+      }) : l.set(v, [{
+        cmd: t,
+        index: i
       }]);
-    }), Array.from(o.entries());
+    }), Array.from(l.entries());
   });
-  return i(g, {
+  return s(g, {
     get when() {
-      return t.isOpen();
+      return r.isOpen();
     },
     get children() {
-      return i(M, {
+      return s(K, {
         get children() {
           return [(() => {
-            var n = T();
-            return n.$$click = () => t.close(), n;
+            var e = W();
+            return e.$$click = () => r.close(), e;
           })(), (() => {
-            var n = U(), o = n.firstChild, e = o.firstChild, a = e.nextSibling, h = o.nextSibling;
-            l(o, i(j, {
+            var e = q(), l = e.firstChild, t = l.firstChild, i = t.nextSibling, v = l.nextSibling;
+            e.$$keydown = P;
+            var p = k;
+            typeof p == "function" ? S(p, e) : k = e, o(l, s(H, {
               class: "w-5 h-5 text-muted-foreground flex-shrink-0"
-            }), e), e.$$input = (r) => t.setSearch(r.currentTarget.value);
-            var p = x;
-            return typeof p == "function" ? O(p, e) : x = e, l(a, () => $.config.strings.commandPalette.esc), l(h, i(g, {
+            }), t), t.$$input = (n) => r.setSearch(n.currentTarget.value);
+            var M = h;
+            return typeof M == "function" ? S(M, t) : h = t, o(i, () => x.config.strings.commandPalette.esc), o(v, s(g, {
               get when() {
-                return t.filteredCommands().length > 0;
+                return r.filteredCommands().length > 0;
               },
               get fallback() {
                 return (() => {
-                  var r = q();
-                  return l(r, () => $.config.strings.commandPalette.empty), r;
+                  var n = G();
+                  return o(n, () => x.config.strings.commandPalette.empty), n;
                 })();
               },
               get children() {
-                return i(D, {
+                return s(O, {
                   get each() {
-                    return P();
+                    return A();
                   },
-                  children: ([r, v]) => (() => {
-                    var m = G(), b = m.firstChild;
-                    return l(b, r), l(m, i(D, {
-                      each: v,
-                      children: (d) => (() => {
-                        var u = V(), _ = u.firstChild, A = _.firstChild;
-                        return u.addEventListener("mouseenter", () => f(d.index)), u.$$click = () => t.execute(d.cmd.id), l(u, i(g, {
+                  children: ([n, b]) => (() => {
+                    var m = J(), $ = m.firstChild;
+                    return o($, n), o(m, s(O, {
+                      each: b,
+                      children: (c) => (() => {
+                        var u = Y(), _ = u.firstChild, F = _.firstChild;
+                        return u.addEventListener("mouseenter", () => f(c.index)), u.$$click = () => r.execute(c.cmd.id), o(u, s(g, {
                           get when() {
-                            return d.cmd.icon;
+                            return c.cmd.icon;
                           },
                           get children() {
-                            var s = H();
-                            return l(s, i(L, {
+                            var a = Q();
+                            return o(a, s(R, {
                               get component() {
-                                return d.cmd.icon;
+                                return c.cmd.icon;
                               },
                               class: "w-5 h-5"
-                            })), s;
+                            })), a;
                           }
-                        }), _), l(A, () => d.cmd.title), l(_, i(g, {
+                        }), _), o(F, () => c.cmd.title), o(_, s(g, {
                           get when() {
-                            return d.cmd.description;
+                            return c.cmd.description;
                           },
                           get children() {
-                            var s = J();
-                            return l(s, () => d.cmd.description), s;
+                            var a = V();
+                            return o(a, () => c.cmd.description), a;
                           }
-                        }), null), l(u, i(g, {
+                        }), null), o(u, s(g, {
                           get when() {
-                            return d.cmd.keybind;
+                            return c.cmd.keybind;
                           },
                           get children() {
-                            var s = Q();
-                            return l(s, () => t.getKeybindDisplay(d.cmd.keybind)), s;
+                            var a = X();
+                            return o(a, () => r.getKeybindDisplay(c.cmd.keybind)), a;
                           }
-                        }), null), y(() => C(u, E("w-full flex items-center gap-3 px-4 py-2 text-sm cursor-pointer", "transition-colors duration-75", "focus:outline-none", k() === d.index ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"))), u;
+                        }), null), y(() => C(u, D("w-full flex items-center gap-3 px-4 py-2 text-sm cursor-pointer", "transition-colors duration-75", "focus:outline-none", w() === c.index ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"))), u;
                       })()
                     }), null), m;
                   })()
                 });
               }
-            })), y((r) => {
-              var v = E("fixed left-1/2 top-[20%] z-50 -translate-x-1/2", "w-full max-w-xl", "bg-popover text-popover-foreground rounded-lg shadow-2xl", "border border-border", "animate-in fade-in slide-in-from-top-4", "overflow-hidden"), m = $.config.strings.commandPalette.placeholder, b = E("flex-1 h-12 bg-transparent text-sm", "placeholder:text-muted-foreground", "focus:outline-none");
-              return v !== r.e && C(n, r.e = v), m !== r.t && z(e, "placeholder", r.t = m), b !== r.a && C(e, r.a = b), r;
+            })), y((n) => {
+              var b = D("fixed left-1/2 top-[20%] z-50 -translate-x-1/2", "w-full max-w-xl", "bg-popover text-popover-foreground rounded-lg shadow-2xl", "border border-border", "animate-in fade-in slide-in-from-top-4", "overflow-hidden"), m = x.config.strings.commandPalette.placeholder, $ = D("flex-1 h-12 bg-transparent text-sm", "placeholder:text-muted-foreground", "focus:outline-none");
+              return b !== n.e && C(e, n.e = b), m !== n.t && z(t, "placeholder", n.t = m), $ !== n.a && C(t, n.a = $), n;
             }, {
               e: void 0,
               t: void 0,
               a: void 0
-            }), y(() => e.value = t.search()), n;
+            }), y(() => t.value = r.search()), e;
           })()];
         }
       });
     }
   });
 }
-F(["click", "input"]);
+I(["click", "keydown", "input"]);
 export {
-  ne as CommandPalette
+  se as CommandPalette
 };

package/dist/components/ui/Dialog.js

@@ -1,121 +1,98 @@
-import { createComponent as o, Portal as E, insert as l, effect as b, setAttribute as v, className as _, template as c, use as D, delegateEvents as T } from "solid-js/web";
-import { createUniqueId as O, createEffect as $, onCleanup as x, Show as s } from "solid-js";
-import { cn as L } from "../../utils/cn.js";
-import { Button as w } from "./Button.js";
-import { X as z } from "../icons/index.js";
-import { lockBodyStyle as A } from "../../utils/bodyStyleLock.js";
-import { useResolvedFloeConfig as F } from "../../context/FloeConfigContext.js";
-var I = /* @__PURE__ */ c('<div class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in cursor-pointer">'), j = /* @__PURE__ */ c('<h2 class="text-sm font-semibold">'), H = /* @__PURE__ */ c('<p class="mt-0.5 text-xs text-muted-foreground">'), M = /* @__PURE__ */ c('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), S = /* @__PURE__ */ c('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), q = /* @__PURE__ */ c('<div role=dialog aria-modal=true tabindex=-1><div class="flex-1 overflow-auto p-3">'), B = /* @__PURE__ */ c("<div>");
-function k(e) {
-  const a = ["a[href]", "button:not([disabled])", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]'].join(",");
-  return Array.from(e.querySelectorAll(a)).filter((f) => f instanceof HTMLElement);
-}
-function K(e) {
-  const a = O(), f = () => `dialog-${a}-title`, y = () => `dialog-${a}-description`;
-  let m;
-  return $(() => {
-    if (!e.open || typeof document > "u") return;
-    const n = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    setTimeout(() => {
-      const t = m;
-      if (!t) return;
-      (k(t)[0] ?? t).focus();
-    }, 0);
-    const d = (t) => {
-      if (t.key === "Escape") {
-        e.onOpenChange(!1);
-        return;
-      }
-      if (t.key !== "Tab") return;
-      const i = m;
-      if (!i) return;
-      const r = k(i);
-      if (!r.length) {
-        t.preventDefault(), i.focus();
-        return;
-      }
-      const u = r[0], C = r[r.length - 1], g = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-      t.shiftKey ? (g === u || !g || !i.contains(g)) && (t.preventDefault(), C.focus()) : g === C && (t.preventDefault(), u.focus());
-    };
-    document.addEventListener("keydown", d, !0), x(() => document.removeEventListener("keydown", d, !0)), x(() => n?.focus());
-  }), $(() => {
-    if (!e.open) return;
-    const n = A({
-      overflow: "hidden"
-    });
-    x(n);
-  }), o(s, {
+import { createComponent as n, Portal as C, insert as l, effect as s, setAttribute as u, className as $, template as o, use as w, delegateEvents as k } from "solid-js/web";
+import { createUniqueId as _, Show as c } from "solid-js";
+import { cn as y } from "../../utils/cn.js";
+import { Button as f } from "./Button.js";
+import { X as O } from "../icons/index.js";
+import { useResolvedFloeConfig as z } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as D } from "../../hooks/useOverlayMask.js";
+var I = /* @__PURE__ */ o('<div class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm animate-in fade-in cursor-pointer">'), F = /* @__PURE__ */ o('<h2 class="text-sm font-semibold">'), T = /* @__PURE__ */ o('<p class="mt-0.5 text-xs text-muted-foreground">'), j = /* @__PURE__ */ o('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), B = /* @__PURE__ */ o('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), E = /* @__PURE__ */ o('<div role=dialog aria-modal=true tabindex=-1><div class="flex-1 overflow-auto overscroll-contain p-3">'), M = /* @__PURE__ */ o("<div>");
+function R(e) {
+  const a = _(), m = () => `dialog-${a}-title`, h = () => `dialog-${a}-description`;
+  let g;
+  return D({
+    open: () => e.open,
+    root: () => g,
+    onClose: () => e.onOpenChange(!1),
+    lockBodyScroll: !0,
+    trapFocus: !0,
+    closeOnEscape: !0,
+    blockHotkeys: !0,
+    // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
+    blockWheel: "outside",
+    blockTouchMove: "outside",
+    restoreFocus: !0
+  }), n(c, {
     get when() {
       return e.open;
     },
     get children() {
-      return o(E, {
+      return n(C, {
         get children() {
           return [(() => {
-            var n = I();
-            return n.$$click = () => e.onOpenChange(!1), n;
+            var r = I();
+            return r.$$click = () => e.onOpenChange(!1), r;
           })(), (() => {
-            var n = q(), h = n.firstChild, d = m;
-            return typeof d == "function" ? D(d, n) : m = n, l(n, o(s, {
+            var r = E(), v = r.firstChild, b = g;
+            return typeof b == "function" ? w(b, r) : g = r, l(r, n(c, {
               get when() {
                 return e.title || e.description;
               },
               get children() {
-                var t = M(), i = t.firstChild;
-                return l(i, o(s, {
+                var t = j(), d = t.firstChild;
+                return l(d, n(c, {
                   get when() {
                     return e.title;
                   },
                   get children() {
-                    var r = j();
-                    return l(r, () => e.title), b(() => v(r, "id", f())), r;
+                    var i = F();
+                    return l(i, () => e.title), s(() => u(i, "id", m())), i;
                   }
-                }), null), l(i, o(s, {
+                }), null), l(d, n(c, {
                   get when() {
                     return e.description;
                   },
                   get children() {
-                    var r = H();
-                    return l(r, () => e.description), b(() => v(r, "id", y())), r;
+                    var i = T();
+                    return l(i, () => e.description), s(() => u(i, "id", h())), i;
                   }
-                }), null), l(t, o(w, {
+                }), null), l(t, n(f, {
                   variant: "ghost",
                   size: "icon",
                   class: "h-6 w-6 -mr-1 bg-transparent text-muted-foreground hover:bg-red-500 hover:text-white",
                   onClick: () => e.onOpenChange(!1),
                   "aria-label": "Close",
                   get children() {
-                    return o(z, {
+                    return n(O, {
                       class: "w-3.5 h-3.5"
                     });
                   }
                 }), null), t;
               }
-            }), h), l(h, () => e.children), l(n, o(s, {
+            }), v), l(v, () => e.children), l(r, n(c, {
               get when() {
                 return e.footer;
               },
               get children() {
-                var t = S();
+                var t = B();
                 return l(t, () => e.footer), t;
               }
-            }), null), b((t) => {
-              var i = L("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class), r = e.title ? f() : void 0, u = e.description ? y() : void 0;
-              return i !== t.e && _(n, t.e = i), r !== t.t && v(n, "aria-labelledby", t.t = r), u !== t.a && v(n, "aria-describedby", t.a = u), t;
+            }), null), s((t) => {
+              var d = y("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class), i = e.title ? m() : void 0, x = e.description ? h() : void 0;
+              return d !== t.e && $(r, t.e = d), i !== t.t && u(r, "aria-labelledby", t.t = i), x !== t.a && u(r, "aria-describedby", t.a = x), t;
             }, {
               e: void 0,
               t: void 0,
               a: void 0
-            }), n;
+            }), r;
           })()];
         }
       });
     }
   });
 }
-function Q(e) {
-  const a = F();
-  return o(K, {
+function W(e) {
+  const a = z();
+  return n(R, {
     get open() {
       return e.open;
     },
@@ -129,7 +106,7 @@ function Q(e) {
       return e.description;
     },
     get footer() {
-      return [o(w, {
+      return [n(f, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
@@ -138,7 +115,7 @@ function Q(e) {
         get children() {
           return e.cancelText ?? a.config.strings.confirmDialog.cancel;
         }
-      }), o(w, {
+      }), n(f, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -154,12 +131,12 @@ function Q(e) {
       })];
     },
     get children() {
-      return e.children ?? B();
+      return e.children ?? M();
     }
   });
 }
-T(["click"]);
+k(["click"]);
 export {
-  Q as ConfirmDialog,
-  K as Dialog
+  W as ConfirmDialog,
+  R as Dialog
 };