@floegence/floe-webapp-core 0.36.1 → 0.36.3

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