@floegence/floe-webapp-core 0.36.12 → 0.36.15

package/dist/components/ui/FloatingWindow.js

@@ -1,24 +1,25 @@
-import { createComponent as a, Portal as Ee, spread as ae, mergeProps as se, memo as de, insert as g, effect as u, setAttribute as Ae, addEventListener as m, className as c, template as s, use as Me, delegateEvents as Fe } from "solid-js/web";
-import { createUniqueId as Le, createSignal as v, onMount as De, onCleanup as T, createEffect as S, Show as y, batch as ke } from "solid-js";
-import { cn as _ } from "../../utils/cn.js";
-import { useLayout as We } from "../../context/LayoutContext.js";
+import { createComponent as a, Portal as Ee, spread as ae, mergeProps as se, memo as de, insert as g, effect as u, setAttribute as Ae, addEventListener as m, className as c, template as s, use as Le, delegateEvents as Fe } from "solid-js/web";
+import { createUniqueId as Me, createSignal as v, onMount as De, onCleanup as O, createEffect as S, Show as y, batch as Te } from "solid-js";
+import { cn as R } from "../../utils/cn.js";
+import { useLayout as ke } from "../../context/LayoutContext.js";
 import { Button as ue } from "./Button.js";
-import { Restore as Oe, Maximize as Te, X as He } from "../icons/index.js";
-import { startHotInteraction as Xe } from "../../utils/hotInteraction.js";
-import { normalizeFloatingWindowRect as ce, resolveFloatingWindowRect as Ue } from "./floatingWindowGeometry.js";
+import { Restore as We, Maximize as Oe, X as He } from "../icons/index.js";
+import { startHotInteraction as Ue } from "../../utils/hotInteraction.js";
+import { normalizeFloatingWindowRect as ce, resolveFloatingWindowRect as Xe } from "./floatingWindowGeometry.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as fe } from "./localInteractionSurface.js";
-var Ye = /* @__PURE__ */ s('<h2 class="text-sm font-medium truncate select-none">'), qe = /* @__PURE__ */ s('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), Ne = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), Be = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), je = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Ge = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ve = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), Ze = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Je = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Ke = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Qe = /* @__PURE__ */ s('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true data-floe-floating-window-surface=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0"></div><div class="flex items-center gap-0.5 -mr-1"></div></div><div class="flex-1 overflow-auto p-3">');
-function dt(i) {
-  const H = () => i.resizable ?? !0, X = () => i.draggable ?? !0, R = () => i.minSize ?? {
+import { SURFACE_PORTAL_LAYER_ATTR as Ye } from "./dialogSurfaceScope.js";
+var qe = /* @__PURE__ */ s('<h2 class="text-sm font-medium truncate select-none">'), Ne = /* @__PURE__ */ s('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), Be = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), je = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Ge = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Ve = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ze = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), Je = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ke = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Qe = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), et = /* @__PURE__ */ s('<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-1 min-w-0"></div><div class="flex items-center gap-0.5 -mr-1"></div></div><div class="flex-1 overflow-auto p-3">');
+function ct(i) {
+  const H = () => i.resizable ?? !0, U = () => i.draggable ?? !0, I = () => i.minSize ?? {
     width: 200,
     height: 150
   }, C = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, he = () => i.zIndex ?? 100, we = Le(), ge = We(), b = () => ge.isMobile(), E = 16, U = () => `floating-window-${we}-title`, [A, me] = v(i.defaultPosition ?? {
+  }, he = () => i.zIndex ?? 100, we = Me(), ge = ke(), b = () => ge.isMobile(), E = 16, X = () => `floating-window-${we}-title`, [A, me] = v(i.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [M, pe] = v(i.defaultSize ?? {
+  }), [L, pe] = v(i.defaultSize ?? {
     width: 400,
     height: 300
   }), [d, Y] = v(!1), [q, N] = v(!1), [B, j] = v(!1), [ve, F] = v(!1), [xe, ze] = v(null);
@@ -41,7 +42,7 @@ function dt(i) {
   }, K = "se", r, l = null, p = null, P = {
     x: 0,
     y: 0
-  }, x = null, I = null, Q = !1, z = {
+  }, x = null, _ = null, Q = !1, z = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
@@ -56,12 +57,12 @@ function dt(i) {
     nw: "nwse-resize",
     se: "nwse-resize",
     sw: "nesw-resize"
-  }, L = (e, t) => {
+  }, M = (e, t) => {
     if (!e) {
-      I?.(), I = null;
+      _?.(), _ = null;
       return;
     }
-    I?.(), I = Xe({
+    _?.(), _ = Ue({
       kind: p === "resize" ? "resize" : "drag",
       cursor: t,
       lockUserSelect: !0
@@ -69,7 +70,7 @@ function dt(i) {
   }, ee = (e) => {
     z = e, r && (r.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`);
   }, D = () => {
-    const e = A(), t = M();
+    const e = A(), t = L();
     return {
       x: e.x,
       y: e.y,
@@ -94,7 +95,7 @@ function dt(i) {
   }, Pe = (e) => {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
-  }, k = (e) => !!r && e instanceof Node && r.contains(e), $e = () => {
+  }, T = (e) => !!r && e instanceof Node && r.contains(e), $e = () => {
     if (!r) return null;
     const e = r.getBoundingClientRect();
     return {
@@ -104,7 +105,7 @@ function dt(i) {
       height: e.height
     };
   }, te = () => {
-    i.open && (l === null || p === null || typeof window > "u" || ee(Ue({
+    i.open && (l === null || p === null || typeof window > "u" || ee(Xe({
       mode: p,
       pointer: P,
       dragStartPos: G,
@@ -112,7 +113,7 @@ function dt(i) {
       resizeStartPos: Z,
       resizeStartRect: J,
       resizeHandle: K,
-      minSize: R(),
+      minSize: I(),
       maxSize: C(),
       viewport: {
         width: window.innerWidth,
@@ -121,7 +122,7 @@ function dt(i) {
       mobile: b(),
       mobilePadding: E
     })));
-  }, W = (e) => {
+  }, k = (e) => {
     if (typeof window > "u") return;
     const t = {
       width: window.innerWidth,
@@ -138,14 +139,14 @@ function dt(i) {
     }
     $(ce({
       rect: D(),
-      minSize: R(),
+      minSize: I(),
       maxSize: C(),
       viewport: t,
       mobile: b(),
       mobilePadding: E,
       center: e?.center ?? !1
     }));
-  }, O = (e, t = !0) => {
+  }, W = (e, t = !0) => {
     x !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(x), x = null), t && te();
     const o = t ? $e() ?? z : null;
     if (e !== void 0)
@@ -153,25 +154,25 @@ function dt(i) {
         typeof r?.releasePointerCapture == "function" && r.releasePointerCapture(e);
       } catch {
       }
-    ke(() => {
+    Te(() => {
       o && $(o), l = null, p = null, N(!1), j(!1);
-    }), L(!1, "");
+    }), M(!1, "");
   };
   De(() => {
-    i.open || W({
+    i.open || k({
       center: !i.defaultPosition
     });
     const e = () => {
-      l === null && W({
+      l === null && k({
         center: !1
       });
     };
-    window.addEventListener("resize", e), T(() => window.removeEventListener("resize", e));
+    window.addEventListener("resize", e), O(() => window.removeEventListener("resize", e));
   }), S(() => {
     if (!i.open) return;
     b();
     const e = !Q && !i.defaultPosition, t = () => {
-      W({
+      k({
         center: e
       }), Q = !0;
     };
@@ -185,25 +186,25 @@ function dt(i) {
     const e = (t) => {
       if (t.key !== "Escape") return;
       const o = typeof document < "u" ? document.activeElement : null;
-      !k(t.target) && !k(o) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
+      !T(t.target) && !T(o) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
     };
-    document.addEventListener("keydown", e, !0), T(() => document.removeEventListener("keydown", e, !0));
+    document.addEventListener("keydown", e, !0), O(() => document.removeEventListener("keydown", e, !0));
   }), S(() => {
     if (!i.open) {
-      F(!1), O(l ?? void 0, !1);
+      F(!1), W(l ?? void 0, !1);
       return;
     }
     F(!0);
   }), S(() => {
     if (!i.open) return;
     const e = (w) => {
-      F(k(w));
+      F(T(w));
     }, t = (w) => {
       e(w.target);
     }, o = (w) => {
       e(w.target);
     };
-    document.addEventListener("pointerdown", t), document.addEventListener("focusin", o), T(() => {
+    document.addEventListener("pointerdown", t), document.addEventListener("focusin", o), O(() => {
       document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", o);
     });
   }), S(() => {
@@ -212,7 +213,7 @@ function dt(i) {
     l === null ? ee(e) : z = e;
   });
   const Se = (e) => {
-    !X() || d() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), l = e.pointerId, p = "drag", N(!0), G = {
+    !U() || d() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), l = e.pointerId, p = "drag", N(!0), G = {
       x: e.clientX,
       y: e.clientY
     }, V = {
@@ -220,7 +221,7 @@ function dt(i) {
     }, P = {
       x: e.clientX,
       y: e.clientY
-    }, L(!0, "grabbing"), typeof r?.setPointerCapture == "function" && r.setPointerCapture(e.pointerId));
+    }, M(!0, "grabbing"), typeof r?.setPointerCapture == "function" && r.setPointerCapture(e.pointerId));
   }, f = (e) => (t) => {
     !H() || d() || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), l = t.pointerId, p = "resize", j(!0), K = e, Z = {
       x: t.clientX,
@@ -230,10 +231,10 @@ function dt(i) {
     }, P = {
       x: t.clientX,
       y: t.clientY
-    }, L(!0, ye[e]), typeof r?.setPointerCapture == "function" && r.setPointerCapture(t.pointerId));
+    }, M(!0, ye[e]), typeof r?.setPointerCapture == "function" && r.setPointerCapture(t.pointerId));
   }, ne = () => {
     x = null, te();
-  }, Ie = (e) => {
+  }, _e = (e) => {
     if (!(l === null || e.pointerId !== l) && p !== null && (P = {
       x: e.clientX,
       y: e.clientY
@@ -248,9 +249,9 @@ function dt(i) {
     l === null || e.pointerId !== l || (P = {
       x: e.clientX,
       y: e.clientY
-    }, O(e.pointerId));
+    }, W(e.pointerId));
   }, re = () => {
-    if (l !== null && O(l, !0), d()) {
+    if (l !== null && W(l, !0), d()) {
       const t = xe();
       t && $(ce({
         rect: {
@@ -259,7 +260,7 @@ function dt(i) {
           width: t.size.width,
           height: t.size.height
         },
-        minSize: R(),
+        minSize: I(),
         maxSize: C(),
         viewport: {
           width: window.innerWidth,
@@ -287,11 +288,11 @@ function dt(i) {
       width: window.innerWidth,
       height: window.innerHeight
     }), Y(!0);
-  }, _e = () => {
+  }, Re = () => {
     re();
-  }, Re = (e) => {
+  }, Ie = (e) => {
     Pe(e.target) && be();
-  }, h = (e) => _("absolute z-10", {
+  }, h = (e) => R("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",
@@ -308,32 +309,35 @@ function dt(i) {
     get children() {
       return a(Ee, {
         get children() {
-          var e = Qe(), t = e.firstChild, o = t.firstChild, w = o.firstChild, oe = w.nextSibling, Ce = o.nextSibling, le = r;
-          return typeof le == "function" ? Me(le, e) : r = e, ae(e, se({
+          var e = et(), t = e.firstChild, o = t.firstChild, w = o.firstChild, oe = w.nextSibling, Ce = o.nextSibling, le = r;
+          return typeof le == "function" ? Le(le, e) : r = e, ae(e, se({
             [fe]: "true"
           }, {
             get class() {
-              return _("fixed left-0 top-0 z-[100] flex flex-col", (q() || B()) && "select-none");
+              return R("fixed left-0 top-0 z-[100] flex flex-col", (q() || B()) && "select-none");
             },
             get style() {
               return {
-                width: `${M().width}px`,
-                height: `${M().height}px`,
+                width: `${L().width}px`,
+                height: `${L().height}px`,
                 transform: `translate3d(${A().x}px, ${A().y}px, 0)`,
                 "z-index": he(),
                 "will-change": q() ? "transform" : B() ? "transform, width, height" : void 0
               };
             },
-            onPointerMove: Ie,
+            onPointerMove: _e,
             onPointerUp: ie,
             onPointerCancel: ie,
             role: "dialog",
             get "aria-labelledby"() {
-              return de(() => !!i.title)() ? U() : void 0;
+              return de(() => !!i.title)() ? X() : void 0;
             },
             tabIndex: -1,
-            onPointerDown: Re
+            onPointerDown: Ie
           }), !1, !0), ae(t, se({
+            [Ye]: "true"
+          }, {
+            "data-floe-floating-window-surface": "true",
             get "data-floe-floating-window-state"() {
               return ve() ? "active" : "inactive";
             }
@@ -341,15 +345,15 @@ function dt(i) {
             [fe]: "true"
           }, {
             get class() {
-              return _("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "animate-in fade-in duration-150", d() && "rounded-none", i.class);
+              return R("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "animate-in fade-in duration-150", d() && "rounded-none", i.class);
             }
-          }), !1, !0), o.$$dblclick = _e, o.$$pointerdown = Se, g(w, a(y, {
+          }), !1, !0), o.$$dblclick = Re, o.$$pointerdown = Se, g(w, a(y, {
             get when() {
               return i.title;
             },
             get children() {
-              var n = Ye();
-              return g(n, () => i.title), u(() => Ae(n, "id", U())), n;
+              var n = qe();
+              return g(n, () => i.title), u(() => Ae(n, "id", X())), n;
             }
           })), g(oe, a(ue, {
             variant: "ghost",
@@ -367,12 +371,12 @@ function dt(i) {
                   return d();
                 },
                 get fallback() {
-                  return a(Te, {
+                  return a(Oe, {
                     class: "w-3 h-3"
                   });
                 },
                 get children() {
-                  return a(Oe, {
+                  return a(We, {
                     class: "w-3 h-3"
                   });
                 }
@@ -396,7 +400,7 @@ function dt(i) {
               return i.footer;
             },
             get children() {
-              var n = qe();
+              var n = Ne();
               return g(n, () => i.footer), n;
             }
           }), null), g(t, a(y, {
@@ -405,10 +409,10 @@ function dt(i) {
             },
             get children() {
               return [(() => {
-                var n = Ne();
+                var n = Be();
                 return m(n, "pointerdown", f("n"), !0), u(() => c(n, h("n"))), n;
               })(), (() => {
-                var n = Be();
+                var n = je();
                 return m(n, "pointerdown", f("s"), !0), u(() => c(n, h("s"))), n;
               })(), a(y, {
                 get when() {
@@ -416,28 +420,28 @@ function dt(i) {
                 },
                 get children() {
                   return [(() => {
-                    var n = je();
+                    var n = Ge();
                     return m(n, "pointerdown", f("e"), !0), u(() => c(n, h("e"))), n;
                   })(), (() => {
-                    var n = Ge();
+                    var n = Ve();
                     return m(n, "pointerdown", f("w"), !0), u(() => c(n, h("w"))), n;
                   })(), (() => {
-                    var n = Ve();
+                    var n = Ze();
                     return m(n, "pointerdown", f("ne"), !0), u(() => c(n, h("ne"))), n;
                   })(), (() => {
-                    var n = Ze();
+                    var n = Je();
                     return m(n, "pointerdown", f("nw"), !0), u(() => c(n, h("nw"))), n;
                   })(), (() => {
-                    var n = Je();
+                    var n = Ke();
                     return m(n, "pointerdown", f("se"), !0), u(() => c(n, h("se"))), n;
                   })(), (() => {
-                    var n = Ke();
+                    var n = Qe();
                     return m(n, "pointerdown", f("sw"), !0), u(() => c(n, h("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), u(() => c(o, _("flex items-center justify-between h-9 px-3", "border-b", d() ? "rounded-none" : "rounded-t-md", X() && !d() && "cursor-move"))), e;
+          }), null), u(() => c(o, R("flex items-center justify-between h-9 px-3", "border-b", d() ? "rounded-none" : "rounded-t-md", U() && !d() && "cursor-move"))), e;
         }
       });
     }
@@ -445,5 +449,5 @@ function dt(i) {
 }
 Fe(["pointerdown", "dblclick"]);
 export {
-  dt as FloatingWindow
+  ct as FloatingWindow
 };

package/dist/components/ui/InfiniteCanvas.d.ts

@@ -17,6 +17,7 @@ export interface InfiniteCanvasProps {
     overlay?: (viewport: InfiniteCanvasPoint) => JSX.Element;
     viewport: InfiniteCanvasPoint;
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
+    onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu?: (event: InfiniteCanvasContextMenuEvent) => void;
     ariaLabel?: string;
     class?: string;