@floegence/floe-webapp-core 0.36.1 → 0.36.2

package/dist/components/deck/DeckCell.js

@@ -6,9 +6,9 @@ import { useWidgetRegistry as R } from "../../context/WidgetRegistry.js";
 import { WidgetStateProvider as k } from "../../context/WidgetStateContext.js";
 import { positionToGridArea as $ } from "../../utils/gridLayout.js";
 import { WidgetFrame as M } from "./WidgetFrame.js";
-var _ = /* @__PURE__ */ l("<div>"), A = /* @__PURE__ */ l('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
+var _ = /* @__PURE__ */ l("<div data-floe-dialog-surface-host=true>"), A = /* @__PURE__ */ l('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
 function q(e) {
-  const i = z(), g = R(), m = () => i.editMode(), o = () => e.widget.type, a = d(() => g.getWidget(o())), f = d(() => $(e.position)), w = () => i.getWidgetState(e.widget.id), h = (t, r) => {
+  const i = z(), g = R(), f = () => i.editMode(), o = () => e.widget.type, a = d(() => g.getWidget(o())), m = d(() => $(e.position)), w = () => i.getWidgetState(e.widget.id), h = (t, r) => {
     i.updateWidgetState(e.widget.id, t, r);
   }, s = () => a()?.component, v = d(() => {
     if (!e.isDragging || !e.pixelOffset) return {};
@@ -66,7 +66,7 @@ function q(e) {
                     return e.widget.config;
                   },
                   get isEditMode() {
-                    return m();
+                    return f();
                   }
                 });
               }
@@ -86,7 +86,7 @@ function q(e) {
         "select-none",
         e.isDragging && "cursor-grabbing"
       ), y = {
-        "grid-area": f(),
+        "grid-area": m(),
         ...v()
       };
       return c !== r.e && W(t, r.e = c), r.t = S(t, y, r.t), r;

package/dist/components/ui/Dialog.js

@@ -1,98 +1,127 @@
-import { createComponent as n, Portal as C, insert as l, effect as g, setAttribute as u, className as $, template as o, use as k, delegateEvents as w } 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`, v = () => `dialog-${a}-description`;
-  let s;
-  return D({
+import { createComponent as n, Portal as z, setAttribute as c, spread as O, mergeProps as B, memo as D, insert as a, effect as x, className as A, template as s, use as E } from "solid-js/web";
+import { createUniqueId as M, createMemo as R, Show as f } from "solid-js";
+import { cn as C } from "../../utils/cn.js";
+import { Button as $ } from "./Button.js";
+import { X as F } from "../icons/index.js";
+import { useResolvedFloeConfig as N } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as j } from "../../hooks/useOverlayMask.js";
+import { resolveDialogSurfaceHost as H, DIALOG_SURFACE_BOUNDARY_ATTR as m } from "./dialogSurfaceScope.js";
+var U = /* @__PURE__ */ s('<h2 class="text-sm font-semibold">'), P = /* @__PURE__ */ s('<p class="mt-0.5 text-xs text-muted-foreground">'), W = /* @__PURE__ */ s('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), q = /* @__PURE__ */ s('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), G = /* @__PURE__ */ s('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), L = /* @__PURE__ */ s("<div>");
+function X(e) {
+  const i = M(), _ = () => `dialog-${i}-title`, w = () => `dialog-${i}-description`;
+  let h;
+  const v = R(() => e.open ? H() : {
+    host: null,
+    mode: "global"
+  }), g = () => `dialog-boundary-${i}`, o = () => v().mode === "surface" && !!v().host?.isConnected, I = () => v().host ?? void 0, S = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${m}="${g()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${m}="${g()}"]`) : !1;
+  return j({
     open: () => e.open,
-    root: () => s,
+    root: () => h,
+    containsTarget: (t) => o() && S(t),
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: !0,
+    lockBodyScroll: () => !o(),
     trapFocus: !0,
-    closeOnEscape: !0,
+    closeOnEscape: () => o() ? "inside" : !0,
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: "outside",
-    blockTouchMove: "outside",
+    blockWheel: () => o() ? "none" : "outside",
+    blockTouchMove: () => o() ? "none" : "outside",
     restoreFocus: !0
-  }), n(c, {
+  }), n(f, {
     get when() {
       return e.open;
     },
     get children() {
-      return n(C, {
+      return n(z, {
+        get mount() {
+          return I();
+        },
         get children() {
-          return [(() => {
-            var r = I();
-            return r.$$click = () => e.onOpenChange(!1), r;
-          })(), (() => {
-            var r = E(), h = r.firstChild, b = s;
-            return typeof b == "function" ? k(b, r) : s = r, l(r, n(c, {
-              get when() {
-                return e.title || e.description;
-              },
-              get children() {
-                var t = j(), d = t.firstChild;
-                return l(d, n(c, {
-                  get when() {
-                    return e.title;
-                  },
-                  get children() {
-                    var i = F();
-                    return l(i, () => e.title), g(() => u(i, "id", m())), i;
-                  }
-                }), null), l(d, n(c, {
-                  get when() {
-                    return e.description;
-                  },
-                  get children() {
-                    var i = T();
-                    return l(i, () => e.description), g(() => u(i, "id", v())), i;
-                  }
-                }), null), l(t, n(f, {
-                  variant: "ghost-destructive",
-                  size: "icon",
-                  class: "h-6 w-6 -mr-1",
-                  onClick: () => e.onOpenChange(!1),
-                  "aria-label": "Close",
-                  get children() {
-                    return n(O, {
-                      class: "w-3.5 h-3.5"
-                    });
-                  }
-                }), null), t;
-              }
-            }), h), l(h, () => e.children), l(r, n(c, {
-              get when() {
-                return e.footer;
-              },
-              get children() {
-                var t = B();
-                return l(t, () => e.footer), t;
-              }
-            }), null), g((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 ? v() : 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
-            }), r;
-          })()];
+          var t = G(), b = t.firstChild, T = b.nextSibling, d = T.firstChild, y = d.firstChild;
+          c(t, "data-floe-dialog-overlay-root", i), c(b, "data-floe-dialog-backdrop", i), O(b, B(() => ({
+            [m]: g()
+          }), {
+            get class() {
+              return C("absolute inset-0 cursor-pointer animate-in fade-in", o() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+            },
+            onClick: () => e.onOpenChange(!1)
+          }), !1, !1);
+          var k = h;
+          return typeof k == "function" ? E(k, d) : h = d, c(d, "data-floe-dialog-panel", i), O(d, B(() => ({
+            [m]: g()
+          }), {
+            get class() {
+              return C(o() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "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);
+            },
+            role: "dialog",
+            get "aria-modal"() {
+              return o() ? void 0 : "true";
+            },
+            get "aria-labelledby"() {
+              return D(() => !!e.title)() ? _() : void 0;
+            },
+            get "aria-describedby"() {
+              return D(() => !!e.description)() ? w() : void 0;
+            },
+            tabIndex: -1
+          }), !1, !0), a(d, n(f, {
+            get when() {
+              return e.title || e.description;
+            },
+            get children() {
+              var r = W(), u = r.firstChild;
+              return a(u, n(f, {
+                get when() {
+                  return e.title;
+                },
+                get children() {
+                  var l = U();
+                  return a(l, () => e.title), x(() => c(l, "id", _())), l;
+                }
+              }), null), a(u, n(f, {
+                get when() {
+                  return e.description;
+                },
+                get children() {
+                  var l = P();
+                  return a(l, () => e.description), x(() => c(l, "id", w())), l;
+                }
+              }), null), a(r, n($, {
+                variant: "ghost-destructive",
+                size: "icon",
+                class: "h-6 w-6 -mr-1",
+                onClick: () => e.onOpenChange(!1),
+                "aria-label": "Close",
+                get children() {
+                  return n(F, {
+                    class: "w-3.5 h-3.5"
+                  });
+                }
+              }), null), r;
+            }
+          }), y), a(y, () => e.children), a(d, n(f, {
+            get when() {
+              return e.footer;
+            },
+            get children() {
+              var r = q();
+              return a(r, () => e.footer), r;
+            }
+          }), null), x((r) => {
+            var u = o() ? "surface" : "global", l = C(o() ? "absolute inset-0 z-20 p-3" : "fixed inset-0 z-50 p-4");
+            return u !== r.e && c(t, "data-floe-dialog-mode", r.e = u), l !== r.t && A(t, r.t = l), r;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
         }
       });
     }
   });
 }
-function W(e) {
-  const a = z();
-  return n(R, {
+function te(e) {
+  const i = N();
+  return n(X, {
     get open() {
       return e.open;
     },
@@ -106,16 +135,16 @@ function W(e) {
       return e.description;
     },
     get footer() {
-      return [n(f, {
+      return [n($, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? a.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? i.config.strings.confirmDialog.cancel;
         }
-      }), n(f, {
+      }), n($, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -126,17 +155,16 @@ function W(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? a.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? i.config.strings.confirmDialog.confirm;
         }
       })];
     },
     get children() {
-      return e.children ?? M();
+      return e.children ?? L();
     }
   });
 }
-w(["click"]);
 export {
-  W as ConfirmDialog,
-  R as Dialog
+  te as ConfirmDialog,
+  X as Dialog
 };