npm - @floegence/floe-webapp-core - Versions diffs - 0.36.4 → 0.36.5 - Mend

@floegence/floe-webapp-core 0.36.4 → 0.36.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/components/ui/FloatingWindow.js +214 -195
package/dist/components/workbench/useWorkbenchModel.js +161 -140
package/package.json +1 -1

package/dist/components/ui/FloatingWindow.js CHANGED Viewed

@@ -1,52 +1,53 @@
-import { createComponent as s, Portal as Oe, insert as w, effect as u, setAttribute as Y, addEventListener as g, className as a, memo as Xe, setStyleProperty as I, template as E, use as Ye, delegateEvents as qe } from "solid-js/web";
-import { createUniqueId as Te, createSignal as x, onMount as Be, onCleanup as q, createEffect as $, Show as p, batch as Ue } from "solid-js";
-import { cn as C } from "../../utils/cn.js";
-import { useLayout as Ne } from "../../context/LayoutContext.js";
-import { Button as ze } from "./Button.js";
-import { Restore as je, Maximize as Ge, X as Ve } from "../icons/index.js";
-import { startHotInteraction as Ze } from "../../utils/hotInteraction.js";
-import { normalizeFloatingWindowRect as pe, resolveFloatingWindowRect as Je } from "./floatingWindowGeometry.js";
-var Ke = /* @__PURE__ */ E('<h2 class="text-sm font-medium truncate select-none">'), Qe = /* @__PURE__ */ E('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), m = /* @__PURE__ */ E("<div style=touch-action:none>"), et = /* @__PURE__ */ E('<div data-floe-geometry-surface=floating-window role=dialog tabindex=-1><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">');
+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 { 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 { 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 T = () => i.resizable ?? !0, B = () => i.draggable ?? !0, M = () => i.minSize ?? {
+  const H = () => i.resizable ?? !0, X = () => i.draggable ?? !0, R = () => i.minSize ?? {
     width: 200,
     height: 150
-  }, F = () => i.maxSize ?? {
+  }, C = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, be = () => i.zIndex ?? 100, Pe = Te(), Se = Ne(), b = () => Se.isMobile(), L = 16, U = () => `floating-window-${Pe}-title`, [_, Ie] = x(i.defaultPosition ?? {
+  }, he = () => i.zIndex ?? 100, we = Le(), ge = We(), b = () => ge.isMobile(), E = 16, U = () => `floating-window-${we}-title`, [A, me] = v(i.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [A, $e] = x(i.defaultSize ?? {
+  }), [M, pe] = v(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, N] = x(!1), [j, G] = x(!1), [V, Z] = x(!1), [Re, D] = x(!1), [Ce, Ee] = x(null);
-  let J = {
+  }), [d, Y] = v(!1), [q, N] = v(!1), [B, j] = v(!1), [ve, F] = v(!1), [xe, ze] = v(null);
+  let G = {
     x: 0,
     y: 0
-  }, K = {
+  }, V = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, Q = {
+  }, Z = {
     x: 0,
     y: 0
-  }, ee = {
+  }, J = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, te = "se", r, l = null, v = null, P = {
+  }, K = "se", r, l = null, p = null, P = {
     x: 0,
     y: 0
-  }, y = null, R = null, ne = !1, z = {
+  }, x = null, I = null, Q = !1, z = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
     height: i.defaultSize?.height ?? 300
   };
-  const Me = {
+  const ye = {
     n: "ns-resize",
     s: "ns-resize",
     e: "ew-resize",
@@ -55,45 +56,45 @@ function dt(i) {
     nw: "nwse-resize",
     se: "nwse-resize",
     sw: "nesw-resize"
-  }, k = (e, n) => {
+  }, L = (e, t) => {
     if (!e) {
-      R?.(), R = null;
+      I?.(), I = null;
       return;
     }
-    R?.(), R = Ze({
-      kind: v === "resize" ? "resize" : "drag",
-      cursor: n,
+    I?.(), I = Xe({
+      kind: p === "resize" ? "resize" : "drag",
+      cursor: t,
       lockUserSelect: !0
     });
-  }, ie = (e) => {
+  }, 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`);
-  }, W = () => {
-    const e = _(), n = A();
+  }, D = () => {
+    const e = A(), t = M();
     return {
       x: e.x,
       y: e.y,
-      width: n.width,
-      height: n.height
+      width: t.width,
+      height: t.height
     };
-  }, S = (e) => {
-    z = e, Ie({
+  }, $ = (e) => {
+    z = e, me({
       x: e.x,
       y: e.y
-    }), $e({
+    }), pe({
       width: e.width,
       height: e.height
     });
-  }, Fe = () => {
+  }, be = () => {
     try {
       r?.focus({
         preventScroll: !0
       });
     } catch {
     }
-  }, Le = (e) => {
-    const n = e instanceof Element ? e : null;
-    return n ? n.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
-  }, H = (e) => !!r && e instanceof Node && r.contains(e), _e = () => {
+  }, 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 = () => {
     if (!r) return null;
     const e = r.getBoundingClientRect();
     return {
@@ -102,176 +103,176 @@ function dt(i) {
       width: e.width,
       height: e.height
     };
-  }, re = () => {
-    i.open && (l === null || v === null || typeof window > "u" || ie(Je({
-      mode: v,
+  }, te = () => {
+    i.open && (l === null || p === null || typeof window > "u" || ee(Ue({
+      mode: p,
       pointer: P,
-      dragStartPos: J,
-      dragStartRect: K,
-      resizeStartPos: Q,
-      resizeStartRect: ee,
-      resizeHandle: te,
-      minSize: M(),
-      maxSize: F(),
+      dragStartPos: G,
+      dragStartRect: V,
+      resizeStartPos: Z,
+      resizeStartRect: J,
+      resizeHandle: K,
+      minSize: R(),
+      maxSize: C(),
       viewport: {
         width: window.innerWidth,
         height: window.innerHeight
       },
       mobile: b(),
-      mobilePadding: L
+      mobilePadding: E
     })));
-  }, O = (e) => {
+  }, W = (e) => {
     if (typeof window > "u") return;
-    const n = {
+    const t = {
       width: window.innerWidth,
       height: window.innerHeight
     };
     if (d()) {
-      S({
+      $({
         x: 0,
         y: 0,
-        width: n.width,
-        height: n.height
+        width: t.width,
+        height: t.height
       });
       return;
     }
-    S(pe({
-      rect: W(),
-      minSize: M(),
-      maxSize: F(),
-      viewport: n,
+    $(ce({
+      rect: D(),
+      minSize: R(),
+      maxSize: C(),
+      viewport: t,
       mobile: b(),
-      mobilePadding: L,
+      mobilePadding: E,
       center: e?.center ?? !1
     }));
-  }, X = (e, n = !0) => {
-    y !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(y), y = null), n && re();
-    const o = n ? _e() ?? z : null;
+  }, O = (e, t = !0) => {
+    x !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(x), x = null), t && te();
+    const o = t ? $e() ?? z : null;
     if (e !== void 0)
       try {
         typeof r?.releasePointerCapture == "function" && r.releasePointerCapture(e);
       } catch {
       }
-    Ue(() => {
-      o && S(o), l = null, v = null, G(!1), Z(!1);
-    }), k(!1, "");
+    ke(() => {
+      o && $(o), l = null, p = null, N(!1), j(!1);
+    }), L(!1, "");
   };
-  Be(() => {
-    i.open || O({
+  De(() => {
+    i.open || W({
       center: !i.defaultPosition
     });
     const e = () => {
-      l === null && O({
+      l === null && W({
         center: !1
       });
     };
-    window.addEventListener("resize", e), q(() => window.removeEventListener("resize", e));
-  }), $(() => {
+    window.addEventListener("resize", e), T(() => window.removeEventListener("resize", e));
+  }), S(() => {
     if (!i.open) return;
     b();
-    const e = !ne && !i.defaultPosition, n = () => {
-      O({
+    const e = !Q && !i.defaultPosition, t = () => {
+      W({
         center: e
-      }), ne = !0;
+      }), Q = !0;
     };
     if (typeof requestAnimationFrame > "u") {
-      n();
+      t();
       return;
     }
-    requestAnimationFrame(n);
-  }), $(() => {
+    requestAnimationFrame(t);
+  }), S(() => {
     if (!i.open) return;
-    const e = (n) => {
-      if (n.key !== "Escape") return;
+    const e = (t) => {
+      if (t.key !== "Escape") return;
       const o = typeof document < "u" ? document.activeElement : null;
-      !H(n.target) && !H(o) || (n.preventDefault(), typeof n.stopImmediatePropagation == "function" ? n.stopImmediatePropagation() : n.stopPropagation(), i.onOpenChange(!1));
+      !k(t.target) && !k(o) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
     };
-    document.addEventListener("keydown", e, !0), q(() => document.removeEventListener("keydown", e, !0));
-  }), $(() => {
+    document.addEventListener("keydown", e, !0), T(() => document.removeEventListener("keydown", e, !0));
+  }), S(() => {
     if (!i.open) {
-      D(!1), X(l ?? void 0, !1);
+      F(!1), O(l ?? void 0, !1);
       return;
     }
-    D(!0);
-  }), $(() => {
+    F(!0);
+  }), S(() => {
     if (!i.open) return;
-    const e = (h) => {
-      D(H(h));
-    }, n = (h) => {
-      e(h.target);
-    }, o = (h) => {
-      e(h.target);
+    const e = (w) => {
+      F(k(w));
+    }, t = (w) => {
+      e(w.target);
+    }, o = (w) => {
+      e(w.target);
     };
-    document.addEventListener("pointerdown", n), document.addEventListener("focusin", o), q(() => {
-      document.removeEventListener("pointerdown", n), document.removeEventListener("focusin", o);
+    document.addEventListener("pointerdown", t), document.addEventListener("focusin", o), T(() => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", o);
     });
-  }), $(() => {
+  }), S(() => {
     if (!i.open) return;
-    const e = W();
-    l === null ? ie(e) : z = e;
+    const e = D();
+    l === null ? ee(e) : z = e;
   });
-  const Ae = (e) => {
-    !B() || d() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), l = e.pointerId, v = "drag", G(!0), J = {
+  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 = {
       x: e.clientX,
       y: e.clientY
-    }, K = {
+    }, V = {
       ...z
     }, P = {
       x: e.clientX,
       y: e.clientY
-    }, k(!0, "grabbing"), typeof r?.setPointerCapture == "function" && r.setPointerCapture(e.pointerId));
-  }, c = (e) => (n) => {
-    !T() || d() || n.pointerType === "mouse" && n.button !== 0 || (n.preventDefault(), n.stopPropagation(), l = n.pointerId, v = "resize", Z(!0), te = e, Q = {
-      x: n.clientX,
-      y: n.clientY
-    }, ee = {
+    }, L(!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,
+      y: t.clientY
+    }, J = {
       ...z
     }, P = {
-      x: n.clientX,
-      y: n.clientY
-    }, k(!0, Me[e]), typeof r?.setPointerCapture == "function" && r.setPointerCapture(n.pointerId));
-  }, oe = () => {
-    y = null, re();
-  }, De = (e) => {
-    if (!(l === null || e.pointerId !== l) && v !== null && (P = {
+      x: t.clientX,
+      y: t.clientY
+    }, L(!0, ye[e]), typeof r?.setPointerCapture == "function" && r.setPointerCapture(t.pointerId));
+  }, ne = () => {
+    x = null, te();
+  }, Ie = (e) => {
+    if (!(l === null || e.pointerId !== l) && p !== null && (P = {
       x: e.clientX,
       y: e.clientY
-    }, y === null)) {
+    }, x === null)) {
       if (typeof requestAnimationFrame > "u") {
-        oe();
+        ne();
         return;
       }
-      y = requestAnimationFrame(oe);
+      x = requestAnimationFrame(ne);
     }
-  }, le = (e) => {
+  }, ie = (e) => {
     l === null || e.pointerId !== l || (P = {
       x: e.clientX,
       y: e.clientY
-    }, X(e.pointerId));
-  }, se = () => {
-    if (l !== null && X(l, !0), d()) {
-      const n = Ce();
-      n && S(pe({
+    }, O(e.pointerId));
+  }, re = () => {
+    if (l !== null && O(l, !0), d()) {
+      const t = xe();
+      t && $(ce({
         rect: {
-          x: n.position.x,
-          y: n.position.y,
-          width: n.size.width,
-          height: n.size.height
+          x: t.position.x,
+          y: t.position.y,
+          width: t.size.width,
+          height: t.size.height
         },
-        minSize: M(),
-        maxSize: F(),
+        minSize: R(),
+        maxSize: C(),
         viewport: {
           width: window.innerWidth,
           height: window.innerHeight
         },
         mobile: b(),
-        mobilePadding: L,
+        mobilePadding: E,
         center: !1
-      })), N(!1);
+      })), Y(!1);
       return;
     }
-    const e = W();
-    Ee({
+    const e = D();
+    ze({
       position: {
         x: e.x,
         y: e.y
@@ -280,17 +281,17 @@ function dt(i) {
         width: e.width,
         height: e.height
       }
-    }), S({
+    }), $({
       x: 0,
       y: 0,
       width: window.innerWidth,
       height: window.innerHeight
-    }), N(!0);
-  }, ke = () => {
-    se();
-  }, We = (e) => {
-    Le(e.target) && Fe();
-  }, f = (e) => C("absolute z-10", {
+    }), Y(!0);
+  }, _e = () => {
+    re();
+  }, Re = (e) => {
+    Pe(e.target) && be();
+  }, h = (e) => _("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",
@@ -300,131 +301,149 @@ function dt(i) {
     se: "cursor-nwse-resize bottom-0 right-0 w-2 h-2",
     sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
   }[e]);
-  return s(p, {
+  return a(y, {
     get when() {
       return i.open;
     },
     get children() {
-      return s(Oe, {
+      return a(Ee, {
         get children() {
-          var e = et(), n = e.firstChild, o = n.firstChild, h = o.firstChild, ae = h.nextSibling, He = o.nextSibling;
-          e.$$pointerdown = We, e.addEventListener("pointercancel", le), e.$$pointerup = le, e.$$pointermove = De;
-          var de = r;
-          return typeof de == "function" ? Ye(de, e) : r = e, o.$$dblclick = ke, o.$$pointerdown = Ae, w(h, s(p, {
+          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({
+            [fe]: "true"
+          }, {
+            get class() {
+              return _("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`,
+                transform: `translate3d(${A().x}px, ${A().y}px, 0)`,
+                "z-index": he(),
+                "will-change": q() ? "transform" : B() ? "transform, width, height" : void 0
+              };
+            },
+            onPointerMove: Ie,
+            onPointerUp: ie,
+            onPointerCancel: ie,
+            role: "dialog",
+            get "aria-labelledby"() {
+              return de(() => !!i.title)() ? U() : void 0;
+            },
+            tabIndex: -1,
+            onPointerDown: Re
+          }), !1, !0), ae(t, se({
+            get "data-floe-floating-window-state"() {
+              return ve() ? "active" : "inactive";
+            }
+          }, {
+            [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);
+            }
+          }), !1, !0), o.$$dblclick = _e, o.$$pointerdown = Se, g(w, a(y, {
             get when() {
               return i.title;
             },
             get children() {
-              var t = Ke();
-              return w(t, () => i.title), u(() => Y(t, "id", U())), t;
+              var n = Ye();
+              return g(n, () => i.title), u(() => Ae(n, "id", U())), n;
             }
-          })), w(ae, s(ze, {
+          })), g(oe, a(ue, {
             variant: "ghost",
             size: "icon",
             class: "h-6 w-6",
-            onClick: (t) => {
-              t.stopPropagation(), se();
+            onClick: (n) => {
+              n.stopPropagation(), re();
             },
             get "aria-label"() {
               return d() ? "Restore" : "Maximize";
             },
             get children() {
-              return s(p, {
+              return a(y, {
                 get when() {
                   return d();
                 },
                 get fallback() {
-                  return s(Ge, {
+                  return a(Te, {
                     class: "w-3 h-3"
                   });
                 },
                 get children() {
-                  return s(je, {
+                  return a(Oe, {
                     class: "w-3 h-3"
                   });
                 }
               });
             }
-          }), null), w(ae, s(ze, {
+          }), null), g(oe, a(ue, {
             variant: "ghost-destructive",
             size: "icon",
             class: "h-6 w-6",
-            onClick: (t) => {
-              t.stopPropagation(), i.onOpenChange(!1);
+            onClick: (n) => {
+              n.stopPropagation(), i.onOpenChange(!1);
             },
             "aria-label": "Close",
             get children() {
-              return s(Ve, {
+              return a(He, {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), w(He, () => i.children), w(n, s(p, {
+          }), null), g(Ce, () => i.children), g(t, a(y, {
             get when() {
               return i.footer;
             },
             get children() {
-              var t = Qe();
-              return w(t, () => i.footer), t;
+              var n = qe();
+              return g(n, () => i.footer), n;
             }
-          }), null), w(n, s(p, {
+          }), null), g(t, a(y, {
             get when() {
-              return Xe(() => !!T())() && !d();
+              return de(() => !!H())() && !d();
             },
             get children() {
               return [(() => {
-                var t = m();
-                return g(t, "pointerdown", c("n"), !0), u(() => a(t, f("n"))), t;
+                var n = Ne();
+                return m(n, "pointerdown", f("n"), !0), u(() => c(n, h("n"))), n;
               })(), (() => {
-                var t = m();
-                return g(t, "pointerdown", c("s"), !0), u(() => a(t, f("s"))), t;
-              })(), s(p, {
+                var n = Be();
+                return m(n, "pointerdown", f("s"), !0), u(() => c(n, h("s"))), n;
+              })(), a(y, {
                 get when() {
                   return !b();
                 },
                 get children() {
                   return [(() => {
-                    var t = m();
-                    return g(t, "pointerdown", c("e"), !0), u(() => a(t, f("e"))), t;
+                    var n = je();
+                    return m(n, "pointerdown", f("e"), !0), u(() => c(n, h("e"))), n;
                   })(), (() => {
-                    var t = m();
-                    return g(t, "pointerdown", c("w"), !0), u(() => a(t, f("w"))), t;
+                    var n = Ge();
+                    return m(n, "pointerdown", f("w"), !0), u(() => c(n, h("w"))), n;
                   })(), (() => {
-                    var t = m();
-                    return g(t, "pointerdown", c("ne"), !0), u(() => a(t, f("ne"))), t;
+                    var n = Ve();
+                    return m(n, "pointerdown", f("ne"), !0), u(() => c(n, h("ne"))), n;
                   })(), (() => {
-                    var t = m();
-                    return g(t, "pointerdown", c("nw"), !0), u(() => a(t, f("nw"))), t;
+                    var n = Ze();
+                    return m(n, "pointerdown", f("nw"), !0), u(() => c(n, h("nw"))), n;
                   })(), (() => {
-                    var t = m();
-                    return g(t, "pointerdown", c("se"), !0), u(() => a(t, f("se"))), t;
+                    var n = Je();
+                    return m(n, "pointerdown", f("se"), !0), u(() => c(n, h("se"))), n;
                   })(), (() => {
-                    var t = m();
-                    return g(t, "pointerdown", c("sw"), !0), u(() => a(t, f("sw"))), t;
+                    var n = Ke();
+                    return m(n, "pointerdown", f("sw"), !0), u(() => c(n, h("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), u((t) => {
-            var ue = C("fixed left-0 top-0 z-[100] flex flex-col", (j() || V()) && "select-none"), ce = `${A().width}px`, fe = `${A().height}px`, he = `translate3d(${_().x}px, ${_().y}px, 0)`, we = be(), ge = j() ? "transform" : V() ? "transform, width, height" : void 0, me = i.title ? U() : void 0, ve = Re() ? "active" : "inactive", xe = C("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), ye = C("flex items-center justify-between h-9 px-3", "border-b", d() ? "rounded-none" : "rounded-t-md", B() && !d() && "cursor-move");
-            return ue !== t.e && a(e, t.e = ue), ce !== t.t && I(e, "width", t.t = ce), fe !== t.a && I(e, "height", t.a = fe), he !== t.o && I(e, "transform", t.o = he), we !== t.i && I(e, "z-index", t.i = we), ge !== t.n && I(e, "will-change", t.n = ge), me !== t.s && Y(e, "aria-labelledby", t.s = me), ve !== t.h && Y(n, "data-floe-floating-window-state", t.h = ve), xe !== t.r && a(n, t.r = xe), ye !== t.d && a(o, t.d = ye), t;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0,
-            h: void 0,
-            r: void 0,
-            d: void 0
-          }), e;
+          }), 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;
         }
       });
     }
   });
 }
-qe(["pointermove", "pointerup", "pointerdown", "dblclick"]);
+Fe(["pointerdown", "dblclick"]);
 export {
   dt as FloatingWindow
 };

package/dist/components/workbench/useWorkbenchModel.js CHANGED Viewed

@@ -1,208 +1,229 @@
-import { createSignal as _, createMemo as s } from "solid-js";
-import { ArrowUp as gt, Copy as ut, Trash as ht } from "../icons/index.js";
-import { getTopZIndex as ft, createContextMenuPosition as wt, createWorkbenchId as mt, findNearestWidget as Wt, clampScale as xt, WORKBENCH_CANVAS_ZOOM_STEP as R, WORKBENCH_CONTEXT_MENU_WIDTH_PX as St, estimateContextMenuHeight as pt } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetDefinitions as Ct, getWidgetEntry as q, createWorkbenchFilterState as kt } from "./widgets/widgetRegistry.js";
-function At(c) {
-  const [f, w] = _(null), [B, A] = _(null), [S, P] = _({ width: 0, height: 0 }), l = c.state, u = s(() => l().widgets), a = s(() => l().viewport), v = s(() => l().locked), D = s(() => l().filters), p = s(() => l().selectedWidgetId), C = s(() => ft(u())), Z = s(() => `${Math.round(a().scale * 100)}%`), $ = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, h = s(
-    () => Ct($())
-  ), j = (t) => {
-    t && P({ width: t.clientWidth, height: t.clientHeight });
-  }, K = (t) => {
-    w({
+import { createSignal as _, createMemo as d, onCleanup as mt } from "solid-js";
+import { ArrowUp as Wt, Copy as xt, Trash as St } from "../icons/index.js";
+import { getTopZIndex as Ct, createContextMenuPosition as pt, createWorkbenchId as kt, findNearestWidget as Ft, clampScale as Xt, WORKBENCH_CANVAS_ZOOM_STEP as P, WORKBENCH_CONTEXT_MENU_WIDTH_PX as bt, estimateContextMenuHeight as Mt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as Yt, getWidgetEntry as Z, createWorkbenchFilterState as yt } from "./widgets/widgetRegistry.js";
+function Nt(s) {
+  const [m, W] = _(null), [$, A] = _(null), [j, K] = _({ width: 0, height: 0 });
+  let r = null, x = null;
+  const a = s.state, h = d(() => a().widgets), u = d(() => a().viewport), L = d(() => a().locked), D = d(() => a().filters), k = d(() => a().selectedWidgetId), F = d(() => Ct(h())), U = d(() => `${Math.round(u().scale * 100)}%`), G = () => typeof s.widgetDefinitions == "function" ? s.widgetDefinitions() : s.widgetDefinitions, f = d(
+    () => Yt(G())
+  ), X = (t, e) => {
+    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, c = j();
+    return c.width === n && c.height === i ? c : (K(o), o);
+  }, T = () => {
+    x?.disconnect(), x = null;
+  }, w = () => r ? X(r.clientWidth, r.clientHeight) : X(0, 0), J = (t) => {
+    if (r === (t ?? null)) {
+      w();
+      return;
+    }
+    T(), r = t ?? null, w(), !(!r || typeof ResizeObserver > "u") && (x = new ResizeObserver((e) => {
+      const n = e[0];
+      X(
+        n?.contentRect.width ?? r?.clientWidth ?? 0,
+        n?.contentRect.height ?? r?.clientHeight ?? 0
+      );
+    }), x.observe(r));
+  };
+  mt(() => {
+    T(), r = null;
+  });
+  const Q = (t) => {
+    W({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: t.worldX,
       worldY: t.worldY
     });
-  }, L = (t, e) => {
-    m(e.id), w({
+  }, tt = (t, e) => {
+    S(e.id), W({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: e.x,
       worldY: e.y,
       widgetId: e.id
     });
-  }, g = () => w(null), U = (t) => l().widgets.find((e) => e.id === t) ?? null, k = (t) => l().widgets.find((e) => e.type === t) ?? null, T = s(() => {
-    const t = f();
+  }, g = () => W(null), et = (t) => a().widgets.find((e) => e.id === t) ?? null, b = (t) => a().widgets.find((e) => e.type === t) ?? null, N = d(() => {
+    const t = m();
     if (!t) return [];
     if (t.widgetId) {
-      const e = u().find((i) => i.id === t.widgetId), n = [];
+      const e = h().find((i) => i.id === t.widgetId), n = [];
       return e && (n.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: gt,
+        icon: Wt,
         onSelect: () => {
-          m(e.id), g();
+          S(e.id), g();
         }
       }), n.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: ut,
+        icon: xt,
         onSelect: () => {
-          z(e.type, e.x + 32, e.y + 32), g();
+          R(e.type, e.x + 32, e.y + 32), g();
         }
       })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: ht,
+        icon: St,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && Y(t.widgetId), g();
+          t.widgetId && y(t.widgetId), g();
         }
       }), n;
     }
-    return h().map((e) => ({
+    return f().map((e) => ({
       id: `add-${e.type}`,
       kind: "action",
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: () => {
-        M(e.type, t.worldX, t.worldY), g();
+        Y(e.type, t.worldX, t.worldY), g();
       }
     }));
-  }), G = s(() => {
-    const t = f();
+  }), nt = d(() => {
+    const t = m();
     if (!t) return;
-    const e = T(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return wt({
+    const e = N(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return pt({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: St,
-      menuHeight: pt(n, i)
+      menuWidth: bt,
+      menuHeight: Mt(n, i)
     });
-  }), X = (t, e, n) => {
-    const i = q(t, h()), o = i.singleton ? k(t) : null;
+  }), M = (t, e, n) => {
+    const i = Z(t, f()), o = i.singleton ? b(t) : null;
     if (o)
-      return W(o, { centerViewport: !0 });
-    const d = i.defaultSize, r = {
-      id: mt(),
+      return C(o, { centerViewport: !0 });
+    const c = i.defaultSize, l = {
+      id: kt(),
       type: t,
       title: i.defaultTitle,
       x: e,
       y: n,
-      width: d.width,
-      height: d.height,
-      z_index: C() + 1,
+      width: c.width,
+      height: c.height,
+      z_index: F() + 1,
       created_at_unix_ms: Date.now()
     };
-    return c.setState((x) => ({
-      ...x,
-      widgets: [...x.widgets, r],
-      selectedWidgetId: r.id
-    })), r;
-  }, M = (t, e, n) => {
-    const i = q(t, h()).defaultSize;
-    return X(t, e - i.width / 2, n - i.height / 2);
-  }, z = (t, e, n) => X(t, e, n), Y = (t) => {
-    c.setState((e) => ({
+    return s.setState((p) => ({
+      ...p,
+      widgets: [...p.widgets, l],
+      selectedWidgetId: l.id
+    })), l;
+  }, Y = (t, e, n) => {
+    const i = Z(t, f()).defaultSize;
+    return M(t, e - i.width / 2, n - i.height / 2);
+  }, R = (t, e, n) => M(t, e, n), y = (t) => {
+    s.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
       selectedWidgetId: e.selectedWidgetId === t ? null : e.selectedWidgetId
     }));
-  }, J = (t) => {
+  }, it = (t) => {
     A(t);
-  }, m = (t) => {
+  }, S = (t) => {
     A(t);
-    const e = C(), n = u().find((i) => i.id === t);
-    n && n.z_index < e && c.setState((i) => ({
+    const e = F(), n = h().find((i) => i.id === t);
+    n && n.z_index < e && s.setState((i) => ({
       ...i,
       widgets: i.widgets.map(
         (o) => o.id === t ? { ...o, z_index: e + 1 } : o
       )
     }));
-  }, Q = (t, e) => {
-    c.setState((n) => ({
+  }, ot = (t, e) => {
+    s.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
       )
     }));
-  }, tt = (t, e) => {
-    c.setState((n) => ({
+  }, st = (t, e) => {
+    s.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
       )
     }));
   }, I = (t) => {
-    c.setState((e) => ({ ...e, viewport: t }));
-  }, O = (t) => {
-    const e = a(), n = S(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, d = xt(
-      t === "in" ? e.scale * R : e.scale / R
-    ), r = {
-      x: n.width / 2 - i * d,
-      y: n.height / 2 - o * d,
-      scale: d
+    s.setState((e) => ({ ...e, viewport: t }));
+  }, V = (t) => {
+    const e = u(), n = w(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, c = Xt(
+      t === "in" ? e.scale * P : e.scale / P
+    ), l = {
+      x: n.width / 2 - i * c,
+      y: n.height / 2 - o * c,
+      scale: c
     };
-    I(r);
-  }, et = () => {
-    c.setState((t) => ({ ...t, locked: !t.locked }));
-  }, nt = (t) => {
-    c.setState((e) => ({
+    I(l);
+  }, ct = () => {
+    s.setState((t) => ({ ...t, locked: !t.locked }));
+  }, rt = (t) => {
+    s.setState((e) => ({
       ...e,
       filters: { ...e.filters, [t]: !e.filters[t] }
     }));
-  }, it = (t) => {
-    c.setState((e) => {
+  }, dt = (t) => {
+    s.setState((e) => {
       const n = { ...e.filters };
       for (const i of Object.keys(n))
         n[i] = i === t;
       return { ...e, filters: n };
     });
-  }, ot = () => {
-    const t = kt(h());
-    c.setState((e) => ({
+  }, lt = () => {
+    const t = yt(f());
+    s.setState((e) => ({
       ...e,
       filters: t
     }));
-  }, V = (t) => {
-    c.setState((e) => ({ ...e, selectedWidgetId: t }));
-  }, ct = () => {
-    const t = S(), e = a();
+  }, H = (t) => {
+    s.setState((e) => ({ ...e, selectedWidgetId: t }));
+  }, at = () => {
+    const t = w(), e = u();
     return {
       worldX: t.width > 0 ? (t.width / 2 - e.x) / e.scale : 240,
       worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
     };
   };
-  let N = 0;
-  const st = (t, e, n) => {
-    const i = a(), o = i.x, d = i.y, r = i.scale, x = performance.now(), dt = 360, rt = ++N, lt = (F) => 1 - Math.pow(1 - F, 3), E = (F) => {
-      if (rt !== N) return;
-      const at = F - x, H = Math.min(Math.max(at / dt, 0), 1), b = lt(H);
+  let E = 0;
+  const ut = (t, e, n) => {
+    const i = u(), o = i.x, c = i.y, l = i.scale, p = performance.now(), gt = 360, ht = ++E, ft = (v) => 1 - Math.pow(1 - v, 3), q = (v) => {
+      if (ht !== E) return;
+      const wt = v - p, B = Math.min(Math.max(wt / gt, 0), 1), O = ft(B);
       I({
-        x: o + (t - o) * b,
-        y: d + (e - d) * b,
-        scale: r + (n - r) * b
-      }), H < 1 && requestAnimationFrame(E);
+        x: o + (t - o) * O,
+        y: c + (e - c) * O,
+        scale: l + (n - l) * O
+      }), B < 1 && requestAnimationFrame(q);
     };
-    requestAnimationFrame(E);
-  }, y = (t) => {
-    const e = S();
+    requestAnimationFrame(q);
+  }, z = (t) => {
+    const e = w();
     if (e.width === 0 || e.height === 0) return;
-    const n = a(), i = e.width / 2 - (t.x + t.width / 2) * n.scale, o = e.height / 2 - (t.y + t.height / 2) * n.scale;
-    st(i, o, n.scale);
-  }, W = (t, e = {}) => (V(t.id), m(t.id), e.centerViewport !== !1 && y(t), t);
+    const n = u(), i = e.width / 2 - (t.x + t.width / 2) * n.scale, o = e.height / 2 - (t.y + t.height / 2) * n.scale;
+    ut(i, o, n.scale);
+  }, C = (t, e = {}) => (H(t.id), S(t.id), e.centerViewport !== !1 && z(t), t);
   return {
-    widgets: u,
-    viewport: a,
-    locked: v,
+    widgets: h,
+    viewport: u,
+    locked: L,
     filters: D,
-    selectedWidgetId: p,
-    topZIndex: C,
-    scaleLabel: Z,
-    optimisticFrontWidgetId: B,
-    widgetDefinitions: h,
-    setCanvasFrameRef: j,
+    selectedWidgetId: k,
+    topZIndex: F,
+    scaleLabel: U,
+    optimisticFrontWidgetId: $,
+    widgetDefinitions: f,
+    setCanvasFrameRef: J,
     contextMenu: {
-      state: f,
-      items: T,
-      position: G,
+      state: m,
+      items: N,
+      position: nt,
       close: g,
       retarget: (t) => {
-        t.preventDefault(), t.stopPropagation(), w({
+        t.preventDefault(), t.stopPropagation(), W({
           clientX: t.clientX,
           clientY: t.clientY,
           worldX: 0,
@@ -211,74 +232,74 @@ function At(c) {
       }
     },
     canvas: {
-      openCanvasContextMenu: K,
-      openWidgetContextMenu: L,
-      selectWidget: V,
-      startOptimisticFront: J,
-      commitFront: m,
-      commitMove: Q,
-      commitResize: tt,
+      openCanvasContextMenu: Q,
+      openWidgetContextMenu: tt,
+      selectWidget: H,
+      startOptimisticFront: it,
+      commitFront: S,
+      commitMove: ot,
+      commitResize: st,
       commitViewport: I
     },
     hud: {
-      zoomIn: () => O("in"),
-      zoomOut: () => O("out")
+      zoomIn: () => V("in"),
+      zoomOut: () => V("out")
     },
     lock: {
-      toggle: et
+      toggle: ct
     },
     filter: {
-      toggle: nt,
-      solo: it,
-      showAll: ot
+      toggle: rt,
+      solo: dt,
+      showAll: lt
     },
     navigation: {
       handleArrowNavigation: (t) => {
-        const e = Wt(
-          u(),
-          p(),
+        const e = Ft(
+          h(),
+          k(),
           t,
           D()
         );
-        e && W(e);
+        e && C(e);
       },
-      centerOnWidget: y,
-      focusWidget: W
+      centerOnWidget: z,
+      focusWidget: C
     },
     widgetActions: {
       deleteSelected: () => {
-        const t = p();
-        t && Y(t);
+        const t = k();
+        t && y(t);
       },
-      deleteWidget: Y,
-      addWidget: X,
-      addWidgetAtCursor: M,
-      addWidgetCentered: z,
+      deleteWidget: y,
+      addWidget: M,
+      addWidgetAtCursor: Y,
+      addWidgetCentered: R,
       ensureWidget: (t, e) => {
-        const n = k(t);
+        const n = b(t);
         if (n)
-          return W(n, { centerViewport: e?.centerViewport ?? !0 });
-        const i = ct(), o = M(
+          return C(n, { centerViewport: e?.centerViewport ?? !0 });
+        const i = at(), o = Y(
           t,
           e?.worldX ?? i.worldX,
           e?.worldY ?? i.worldY
         );
-        return (e?.centerViewport ?? !0) && o && y(o), o;
+        return (e?.centerViewport ?? !0) && o && z(o), o;
       }
     },
     queries: {
-      findWidgetByType: k,
-      findWidgetById: U
+      findWidgetByType: b,
+      findWidgetById: et
     },
     handleCloseRequest: () => {
-      if (f()) {
+      if (m()) {
         g();
         return;
       }
-      c.onClose();
+      s.onClose();
     }
   };
 }
 export {
-  At as useWorkbenchModel
+  Nt as useWorkbenchModel
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.4",
+  "version": "0.36.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",