@floegence/floe-webapp-core 0.90.3 → 0.90.4

package/dist/components/ui/FloatingWindow.js

@@ -1,5 +1,5 @@
-import { createComponent as l, Portal as lt, use as Q, spread as ke, mergeProps as Oe, memo as Z, insert as c, effect as g, setAttribute as Te, addEventListener as P, className as x, template as a, delegateEvents as at } from "solid-js/web";
-import { createSignal as y, createUniqueId as st, onCleanup as D, onMount as dt, createEffect as I, untrack as W, Show as w, batch as ge } from "solid-js";
+import { createComponent as l, Portal as lt, use as Q, spread as ke, mergeProps as Oe, memo as Z, addEventListener as m, insert as c, effect as g, setAttribute as Te, className as y, template as a, delegateEvents as at } from "solid-js/web";
+import { createSignal as b, createUniqueId as st, onCleanup as D, onMount as dt, createEffect as I, untrack as W, Show as w, batch as ge } from "solid-js";
 import { cn as J } from "../../utils/cn.js";
 import { useOptionalLayout as ct } from "../../context/LayoutContext.js";
 import { useResolvedFloeConfig as ut } from "../../context/FloeConfigContext.js";
@@ -13,8 +13,8 @@ import { observeViewport as yt } from "../../viewport.js";
 import { createFloatingPresence as bt } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as Be } from "./localInteractionSurface.js";
 import { resolveFloatingBoundary as zt } from "./surfaceFloatingBoundary.js";
-import { SURFACE_PORTAL_LAYER_ATTR as pt, resolveSurfacePortalHost as $t } from "./dialogSurfaceScope.js";
-var _t = /* @__PURE__ */ a("<span hidden>"), St = /* @__PURE__ */ a("<h2 class=sr-only>"), Pt = /* @__PURE__ */ a('<div data-floe-floating-window-title-content=true class="flex h-full min-w-0 flex-1 items-center">'), It = /* @__PURE__ */ a('<div data-floe-floating-window-header-actions=true class="flex shrink-0 items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), Rt = /* @__PURE__ */ a('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ a('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex h-full flex-1 min-w-0 items-center px-3"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="min-h-0 flex-1 overflow-auto overscroll-contain p-3">'), Bt = /* @__PURE__ */ a('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Dt = /* @__PURE__ */ a('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">');
+import { SURFACE_PORTAL_LAYER_ATTR as pt, resolveSurfacePortalHost as _t } from "./dialogSurfaceScope.js";
+var $t = /* @__PURE__ */ a("<span hidden>"), St = /* @__PURE__ */ a("<h2 class=sr-only>"), Pt = /* @__PURE__ */ a('<div data-floe-floating-window-title-content=true class="flex h-full min-w-0 flex-1 items-center">'), It = /* @__PURE__ */ a('<div data-floe-floating-window-header-actions=true class="flex shrink-0 items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), Rt = /* @__PURE__ */ a('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ a('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex h-full flex-1 min-w-0 items-center px-3"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="min-h-0 flex-1 overflow-auto overscroll-contain p-3">'), Bt = /* @__PURE__ */ a('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Dt = /* @__PURE__ */ a('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">');
 function nn(i) {
   const ve = () => i.resizable ?? !0, K = () => i.maximizable ?? !0, xe = () => i.draggable ?? !0, q = () => i.minSize ?? {
     width: 200,
@@ -24,27 +24,27 @@ function nn(i) {
     height: 1 / 0
   };
   let ee;
-  const [O, De] = y(), [R, We] = y({
+  const [O, De] = b(), [R, We] = b({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   }, {
     equals: (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height
-  }), [te, qe] = y(!0), m = () => !!(i.compactBelow && R().width < i.compactBelow), b = () => i.viewportInsets, T = () => O()?.fixedScale ?? 1, ne = (e) => ({
+  }), [te, qe] = b(!0), v = () => !!(i.compactBelow && R().width < i.compactBelow), z = () => i.viewportInsets, T = () => O()?.fixedScale ?? 1, ne = (e) => ({
     x: (e.x + (O()?.fixedOffset.left ?? 0)) / T(),
     y: (e.y + (O()?.fixedOffset.top ?? 0)) / T()
-  }), He = () => i.zIndex ?? 100, Xe = st(), Ye = ct(), Ne = ut(), E = Ye?.isMobile ?? ft(() => Ne.config.layout.mobileQuery), X = 16, ie = () => `floating-window-${Xe}-title`, [Ve, je] = y(i.defaultPosition ?? {
+  }), He = () => i.zIndex ?? 100, Xe = st(), Ye = ct(), Ne = ut(), E = Ye?.isMobile ?? ft(() => Ne.config.layout.mobileQuery), X = 16, ie = () => `floating-window-${Xe}-title`, [Ve, je] = b(i.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [Ue, Ge] = y(i.defaultSize ?? {
+  }), [Ue, Ge] = b(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [u, oe] = y(!1), [L, ye] = y(!1), [Y, be] = y(!1), [Qe, re] = y(!1), M = bt({
+  }), [u, oe] = b(!1), [L, ye] = b(!1), [Y, be] = b(!1), [Qe, re] = b(!1), M = bt({
     open: () => i.open,
     element: () => ae
   });
-  let z = {
+  let p = {
     x: 0,
     y: 0
   }, F = {
@@ -60,22 +60,22 @@ function nn(i) {
     y: 0,
     width: 0,
     height: 0
-  }, $e = "se", d, ae, se, h = null, N, f = null, C = {
+  }, _e = "se", d, ae, se, h = null, N, f = null, C = {
     x: 0,
     y: 0
-  }, k = null, V = null, p, de = !1, s = {
+  }, k = null, V = null, _, de = !1, s = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
     height: i.defaultSize?.height ?? 300
-  }, v = {
+  }, x = {
     ...s
   }, A;
-  const _e = (e) => {
-    v = {
+  const $e = (e) => {
+    x = {
       ...e
     };
-    const t = we(R(), b());
+    const t = we(R(), z());
     A = {
       x: t.width > e.width ? (e.x - t.x) / (t.width - e.width) : A?.x ?? 0.5,
       y: t.height > e.height ? (e.y - t.y) / (t.height - e.height) : A?.y ?? 0.5
@@ -105,7 +105,7 @@ function nn(i) {
       lockDocumentStyles: f !== "drag"
     });
   }, j = (e) => {
-    if ((e.x !== s.x || e.y !== s.y || e.width !== s.width || e.height !== s.height) && (p?.cancel(), p = void 0), s = e, !d) return;
+    if ((e.x !== s.x || e.y !== s.y || e.width !== s.width || e.height !== s.height) && (_?.cancel(), _ = void 0), s = e, !d) return;
     const t = ne(e);
     d.style.transform = `translate3d(${t.x}px, ${t.y}px, 0)`, d.style.width = `${e.width / T()}px`, d.style.height = `${e.height / T()}px`;
   }, Se = () => {
@@ -117,7 +117,7 @@ function nn(i) {
       height: t.height
     };
   }, ue = (e) => {
-    (e.x !== s.x || e.y !== s.y || e.width !== s.width || e.height !== s.height) && (p?.cancel(), p = void 0), s = e, je((t) => t.x === e.x && t.y === e.y ? t : {
+    (e.x !== s.x || e.y !== s.y || e.width !== s.width || e.height !== s.height) && (_?.cancel(), _ = void 0), s = e, je((t) => t.x === e.x && t.y === e.y ? t : {
       x: e.x,
       y: e.y
     }), Ge((t) => t.width === e.width && t.height === e.height ? t : {
@@ -149,35 +149,35 @@ function nn(i) {
   }, Pe = () => {
     if (i.open && !(h === null || f === null) && !(typeof window > "u")) {
       if (f === "drag" && u()) {
-        if (Math.hypot(C.x - z.x, C.y - z.y) < 4) return;
+        if (Math.hypot(C.x - p.x, C.y - p.y) < 4) return;
         const e = me({
-          rect: v,
+          rect: x,
           minSize: q(),
           maxSize: H(),
           viewport: R(),
-          viewportInsets: b(),
+          viewportInsets: z(),
           mobile: i.boundary === void 0 && E(),
           mobilePadding: X
-        }), t = Math.max(0, Math.min(1, (z.x - F.x) / Math.max(1, F.width))), r = Math.max(0, Math.min(le, z.y - F.y));
+        }), t = Math.max(0, Math.min(1, (p.x - F.x) / Math.max(1, F.width))), r = Math.max(0, Math.min(le, p.y - F.y));
         F = {
           ...e,
-          x: z.x - e.width * t,
-          y: z.y - r
+          x: p.x - e.width * t,
+          y: p.y - r
         }, oe(!1);
       }
       j(xt({
         mode: f,
         pointer: C,
-        dragStartPos: z,
+        dragStartPos: p,
         dragStartRect: F,
         dragTitlebarHeight: le,
         resizeStartPos: ze,
         resizeStartRect: pe,
-        resizeHandle: $e,
+        resizeHandle: _e,
         minSize: q(),
         maxSize: H(),
         viewport: R(),
-        viewportInsets: b(),
+        viewportInsets: z(),
         mobile: i.boundary === void 0 && E(),
         mobilePadding: X
       }));
@@ -185,22 +185,22 @@ function nn(i) {
   }, B = (e) => {
     if (typeof window > "u") return;
     const t = R();
-    if (u() || m()) {
-      ue(we(t, b()));
+    if (u() || v()) {
+      ue(we(t, z()));
       return;
     }
     let r = me({
-      rect: v,
+      rect: x,
       minSize: q(),
       maxSize: H(),
       viewport: t,
-      viewportInsets: b(),
+      viewportInsets: z(),
       mobile: i.boundary === void 0 && E(),
       mobilePadding: X,
       center: e?.center ?? !1
     });
     if (i.boundary !== void 0 && A && !e?.center) {
-      const o = we(t, b());
+      const o = we(t, z());
       r = {
         ...r,
         x: o.x + A.x * Math.max(0, o.width - r.width),
@@ -209,10 +209,10 @@ function nn(i) {
     }
     if (ue(r), !A) {
       const o = {
-        width: v.width,
-        height: v.height
+        width: x.width,
+        height: x.height
       };
-      _e(r), Object.assign(v, o);
+      $e(r), Object.assign(x, o);
     }
   }, Ie = (e) => {
     k !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(k), k = null), e && Pe();
@@ -221,24 +221,24 @@ function nn(i) {
       minSize: q(),
       maxSize: H(),
       viewport: R(),
-      viewportInsets: b(),
+      viewportInsets: z(),
       mobile: i.boundary === void 0 && E(),
       mobilePadding: X
     }) : null;
     if (ge(() => {
       if (o) {
         ue(o);
-        const S = {
-          width: v.width,
-          height: v.height
+        const P = {
+          width: x.width,
+          height: x.height
         };
-        _e(o), f === "drag" && Object.assign(v, S);
+        $e(o), f === "drag" && Object.assign(x, P);
       }
       h = null, f = null, ye(!1), be(!1);
     }), ce(!1, ""), N = void 0, o && (j(o), t && r && d?.animate && (r.x !== o.x || r.y !== o.y) && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)) {
-      const S = ne(r), U = ne(o);
-      p = d.animate([{
-        transform: `translate3d(${S.x}px, ${S.y}px, 0)`
+      const P = ne(r), U = ne(o);
+      _ = d.animate([{
+        transform: `translate3d(${P.x}px, ${P.y}px, 0)`
       }, {
         transform: `translate3d(${U.x}px, ${U.y}px, 0)`
       }], {
@@ -252,13 +252,13 @@ function nn(i) {
     }) : Ie(e);
   };
   D(() => {
-    he(!1), p?.cancel();
+    he(!1), _?.cancel();
   }), dt(() => {
     const e = () => {
       const t = O(), r = i.boundary === void 0 ? {
         boundaryHost: null,
         mode: "global"
-      } : $t({
+      } : _t({
         owner: ee
       }), o = zt(r, i.boundary, t?.safeArea);
       ge(() => {
@@ -303,7 +303,7 @@ function nn(i) {
     }
     requestAnimationFrame(t);
   }), I(() => {
-    b(), R(), m(), !(!i.open || !de || h !== null) && W(() => B({
+    z(), R(), v(), !(!i.open || !de || h !== null) && W(() => B({
       center: !1
     }));
   }), I(() => {
@@ -344,7 +344,7 @@ function nn(i) {
     T(), O()?.fixedOffset, j(h === null ? e : s);
   });
   const nt = (e) => {
-    !xe() || m() || h !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [contenteditable="true"]') || (e.preventDefault(), p?.cancel(), p = void 0, le = e.currentTarget instanceof HTMLElement && e.currentTarget.getBoundingClientRect().height || 32, h = e.pointerId, f = "drag", ye(!0), z = {
+    !xe() || v() || h !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [contenteditable="true"]') || (e.preventDefault(), _?.cancel(), _ = void 0, le = e.currentTarget instanceof HTMLElement && e.currentTarget.getBoundingClientRect().height || 32, h = e.pointerId, f = "drag", ye(!0), p = {
       x: e.clientX,
       y: e.clientY
     }, F = {
@@ -354,7 +354,7 @@ function nn(i) {
       y: e.clientY
     }, ce(!0, "grabbing"), Ce(e));
   }, $ = (e) => (t) => {
-    !ve() || u() || m() || h !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), h = t.pointerId, f = "resize", be(!0), $e = e, ze = {
+    !ve() || u() || v() || h !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), h = t.pointerId, f = "resize", be(!0), _e = e, ze = {
       x: t.clientX,
       y: t.clientY
     }, pe = {
@@ -394,12 +394,12 @@ function nn(i) {
       }
     });
   }, Ae = () => {
-    !K() || m() || (h !== null && he(!0), oe(!u()), B());
+    !K() || v() || (h !== null && he(!0), oe(!u()), B());
   }, ot = (e) => {
     e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [contenteditable="true"]') || Ae();
   }, rt = (e) => {
     Ke(e.target) && Je();
-  }, _ = (e) => J("absolute z-10", {
+  }, S = (e) => J("absolute z-10", {
     n: "cursor-ns-resize top-0 left-2 right-2 h-1",
     s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
     e: "cursor-ew-resize right-0 top-2 bottom-2 w-1",
@@ -410,7 +410,7 @@ function nn(i) {
     sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
   }[e]);
   return [(() => {
-    var e = _t(), t = ee;
+    var e = $t(), t = ee;
     return typeof t == "function" ? Q(t, e) : ee = e, e;
   })(), l(w, {
     get when() {
@@ -419,7 +419,7 @@ function nn(i) {
     get children() {
       return l(lt, {
         get children() {
-          var e = Lt(), t = e.firstChild, r = t.firstChild, o = r.firstChild, S = o.nextSibling, U = r.nextSibling;
+          var e = Lt(), t = e.firstChild, r = t.firstChild, o = r.firstChild, P = o.nextSibling, U = r.nextSibling;
           Q((n) => {
             d = n, W(() => j(Se()));
           }, e), ke(e, Oe({
@@ -433,7 +433,7 @@ function nn(i) {
               return M.exiting() || !te();
             },
             get "data-floe-floating-window-compact"() {
-              return m() ? "true" : void 0;
+              return v() ? "true" : void 0;
             }
           }, {
             [Be]: "true"
@@ -481,7 +481,7 @@ function nn(i) {
             get "data-floating-presence"() {
               return M.state();
             }
-          }), !1, !0), r.$$dblclick = ot, r.$$pointerdown = nt;
+          }), !1, !0), m(r, "dblclick", ot), m(r, "pointerdown", nt);
           var Me = se;
           return typeof Me == "function" ? Q(Me, r) : se = r, c(o, l(w, {
             get when() {
@@ -528,9 +528,9 @@ function nn(i) {
               var n = It(), G = n.firstChild;
               return c(n, () => i.headerActions, G), n;
             }
-          }), S), c(S, l(w, {
+          }), P), c(P, l(w, {
             get when() {
-              return Z(() => !!K())() && !m();
+              return Z(() => !!K())() && !v();
             },
             get children() {
               return l(Le, {
@@ -563,7 +563,7 @@ function nn(i) {
                 }
               });
             }
-          }), null), c(S, l(Le, {
+          }), null), c(P, l(Le, {
             variant: "ghost-destructive",
             size: "icon",
             "data-floe-floating-window-control": "close",
@@ -589,15 +589,15 @@ function nn(i) {
             }
           }), null), c(e, l(w, {
             get when() {
-              return Z(() => !!(ve() && !u()))() && !m();
+              return Z(() => !!(ve() && !u()))() && !v();
             },
             get children() {
               return [(() => {
                 var n = Ct();
-                return P(n, "pointerdown", $("n"), !0), g(() => x(n, _("n"))), n;
+                return m(n, "pointerdown", $("n"), !0), g(() => y(n, S("n"))), n;
               })(), (() => {
                 var n = At();
-                return P(n, "pointerdown", $("s"), !0), g(() => x(n, _("s"))), n;
+                return m(n, "pointerdown", $("s"), !0), g(() => y(n, S("s"))), n;
               })(), l(w, {
                 get when() {
                   return !E();
@@ -605,33 +605,33 @@ function nn(i) {
                 get children() {
                   return [(() => {
                     var n = Et();
-                    return P(n, "pointerdown", $("e"), !0), g(() => x(n, _("e"))), n;
+                    return m(n, "pointerdown", $("e"), !0), g(() => y(n, S("e"))), n;
                   })(), (() => {
                     var n = Mt();
-                    return P(n, "pointerdown", $("w"), !0), g(() => x(n, _("w"))), n;
+                    return m(n, "pointerdown", $("w"), !0), g(() => y(n, S("w"))), n;
                   })(), (() => {
                     var n = Ft();
-                    return P(n, "pointerdown", $("ne"), !0), g(() => x(n, _("ne"))), n;
+                    return m(n, "pointerdown", $("ne"), !0), g(() => y(n, S("ne"))), n;
                   })(), (() => {
                     var n = kt();
-                    return P(n, "pointerdown", $("nw"), !0), g(() => x(n, _("nw"))), n;
+                    return m(n, "pointerdown", $("nw"), !0), g(() => y(n, S("nw"))), n;
                   })(), (() => {
                     var n = Ot();
-                    return P(n, "pointerdown", $("se"), !0), g(() => x(n, _("se"))), n;
+                    return m(n, "pointerdown", $("se"), !0), g(() => y(n, S("se"))), n;
                   })(), (() => {
                     var n = Tt();
-                    return P(n, "pointerdown", $("sw"), !0), g(() => x(n, _("sw"))), n;
+                    return m(n, "pointerdown", $("sw"), !0), g(() => y(n, S("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), g(() => x(r, J("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-panel", xe() && !m() && (L() ? "cursor-grabbing" : "cursor-move")))), e;
+          }), null), g(() => y(r, J("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-panel", xe() && !v() && (L() ? "cursor-grabbing" : "cursor-move")))), e;
         }
       });
     }
   })];
 }
-at(["pointerdown", "dblclick"]);
+at(["pointerdown"]);
 export {
   nn as FloatingWindow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.90.3",
+  "version": "0.90.4",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",