@floegence/floe-webapp-core 0.36.16 → 0.36.18

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,27 +1,28 @@
-import { insert as v, createComponent as d, effect as D, setAttribute as S, template as I, Portal as F, setStyleProperty as H, delegateEvents as P } from "solid-js/web";
-import { createSignal as O, onCleanup as R, createMemo as B, For as T, Show as X } from "solid-js";
-import { Motion as C } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as y, duration as L } from "../../utils/animations.js";
-import { Layers as G, Plus as q } from "../icons/index.js";
-import { startHotInteraction as z } from "../../utils/hotInteraction.js";
-var N = /* @__PURE__ */ I("<button type=button class=workbench-dock__item>"), U = /* @__PURE__ */ I('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), V = /* @__PURE__ */ I("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
-const x = 5, W = '[data-floe-workbench-canvas-frame="true"]';
-function j(e, l) {
-  const a = document.querySelector(W);
+import { insert as g, createComponent as d, effect as D, setAttribute as S, template as L, Portal as Y, setStyleProperty as M, delegateEvents as A } from "solid-js/web";
+import { createSignal as I, onCleanup as F, createMemo as H, For as P, Show as x } from "solid-js";
+import { Motion as w } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as y, duration as C } from "../../utils/animations.js";
+import { Layers as R, Plus as T } from "../icons/index.js";
+import { startHotInteraction as B } from "../../utils/hotInteraction.js";
+import { startPointerSession as G } from "../ui/pointerSession.js";
+var q = /* @__PURE__ */ L("<button type=button class=workbench-dock__item>"), z = /* @__PURE__ */ L('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), N = /* @__PURE__ */ L("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
+const O = 5, V = '[data-floe-workbench-canvas-frame="true"]';
+function W(t, l) {
+  const a = document.querySelector(V);
   if (!(a instanceof HTMLElement)) return !1;
-  const s = a.getBoundingClientRect();
-  return e >= s.left && e <= s.right && l >= s.top && l <= s.bottom;
+  const c = a.getBoundingClientRect();
+  return t >= c.left && t <= c.right && l >= c.top && l <= c.bottom;
 }
-function p(e) {
-  const l = () => e.hoverOffset === -1 ? {
+function j(t) {
+  const l = () => t.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
     x: 0
-  } : e.hoverOffset === 1 ? {
+  } : t.hoverOffset === 1 ? {
     scale: 1.08,
     y: -2,
     x: 5
-  } : e.hoverOffset === -2 ? {
+  } : t.hoverOffset === -2 ? {
     scale: 1.08,
     y: -2,
     x: -5
@@ -29,31 +30,31 @@ function p(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => e.hoverOffset === -1, s = (o) => {
-    o.button === 0 && e.onDragBegin(o, e.type, e.label, e.icon);
+  }, a = () => t.hoverOffset === -1, c = (i) => {
+    i.button === 0 && t.onDragBegin(i, t.type, t.label, t.icon);
   };
   return (() => {
-    var o = N();
-    return o.$$pointerdown = s, o.addEventListener("pointerleave", () => e.onLeave()), o.addEventListener("pointerenter", () => e.onEnter()), v(o, d(C.span, {
+    var i = q();
+    return i.$$pointerdown = c, i.addEventListener("pointerleave", () => t.onLeave()), i.addEventListener("pointerenter", () => t.onEnter()), g(i, d(w.span, {
       class: "workbench-dock__tile",
       get animate() {
         return l();
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       get children() {
         return (() => {
-          const t = e.icon;
-          return d(t, {
+          const n = t.icon;
+          return d(n, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), v(o, d(C.span, {
+    }), null), g(i, d(w.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -63,90 +64,91 @@ function p(e) {
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       get children() {
-        return e.label;
+        return t.label;
       }
-    }), null), D((t) => {
-      var h = !!e.active, m = !!a(), f = !!e.isDragging, _ = `${e.label} — click to solo, drag to canvas to create`, b = e.active;
-      return h !== t.e && o.classList.toggle("is-active", t.e = h), m !== t.t && o.classList.toggle("is-hovered", t.t = m), f !== t.a && o.classList.toggle("is-source-dragging", t.a = f), _ !== t.o && S(o, "aria-label", t.o = _), b !== t.i && S(o, "aria-pressed", t.i = b), t;
+    }), null), D((n) => {
+      var f = !!t.active, k = !!a(), h = !!t.isDragging, _ = `${t.label} — click to solo, drag to canvas to create`, b = t.active;
+      return f !== n.e && i.classList.toggle("is-active", n.e = f), k !== n.t && i.classList.toggle("is-hovered", n.t = k), h !== n.a && i.classList.toggle("is-source-dragging", n.a = h), _ !== n.o && S(i, "aria-label", n.o = _), b !== n.i && S(i, "aria-pressed", n.i = b), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), o;
+    }), i;
   })();
 }
-function re(e) {
-  const [l, a] = O(null), [s, o] = O(null);
-  let t;
-  R(() => {
-    t?.abort(), t = void 0, s()?.stopInteraction();
+function nt(t) {
+  const [l, a] = I(null), [c, i] = I(null);
+  let n;
+  F(() => {
+    n?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), n = void 0, c()?.stopInteraction();
   });
-  const h = B(() => e.widgetDefinitions.every((i) => e.filters[i.type])), m = (i) => {
+  const f = H(() => t.widgetDefinitions.every((o) => t.filters[o.type])), k = (o) => {
     const r = l();
-    return r === null ? 0 : r === i ? -1 : r === i + 1 ? -2 : r === i - 1 ? 1 : 0;
-  }, f = (i) => {
-    const r = s();
+    return r === null ? 0 : r === o ? -1 : r === o + 1 ? -2 : r === o - 1 ? 1 : 0;
+  }, h = (o) => {
+    const r = c();
     if (!r) return;
-    const n = !r.moved;
-    if (r.stopInteraction(), o(null), t?.abort(), t = void 0, n) {
-      e.onSoloFilter(r.type);
+    const e = !r.moved;
+    if (r.stopInteraction(), i(null), n = void 0, e) {
+      t.onSoloFilter(r.type);
       return;
     }
-    i && r.overCanvas && e.onCreateAt?.(r.type, r.clientX, r.clientY);
-  }, _ = (i, r, n, u) => {
-    i.preventDefault(), t?.abort(), o({
+    o && r.overCanvas && t.onCreateAt?.(r.type, r.clientX, r.clientY);
+  }, _ = (o, r, e, u) => {
+    o.preventDefault(), n?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), i({
       type: r,
-      label: n,
+      label: e,
       icon: u,
-      pointerId: i.pointerId,
-      startClientX: i.clientX,
-      startClientY: i.clientY,
-      clientX: i.clientX,
-      clientY: i.clientY,
+      pointerId: o.pointerId,
+      startClientX: o.clientX,
+      startClientY: o.clientY,
+      clientX: o.clientX,
+      clientY: o.clientY,
       moved: !1,
       overCanvas: !1,
-      stopInteraction: z({
+      stopInteraction: B({
         kind: "drag",
         cursor: "grabbing"
       })
     });
-    const c = new AbortController();
-    t = c;
-    const k = (g) => {
-      o((w) => {
-        if (!w || w.pointerId !== g.pointerId) return w;
-        const Y = g.clientX - w.startClientX, M = g.clientY - w.startClientY, E = w.moved || Math.abs(Y) > x || Math.abs(M) > x;
+    const v = (s) => {
+      i((m) => {
+        if (!m || m.pointerId !== s.pointerId) return m;
+        const X = s.clientX - m.startClientX, $ = s.clientY - m.startClientY, E = m.moved || Math.abs(X) > O || Math.abs($) > O;
         return {
-          ...w,
-          clientX: g.clientX,
-          clientY: g.clientY,
+          ...m,
+          clientX: s.clientX,
+          clientY: s.clientY,
           moved: E,
-          overCanvas: E && j(g.clientX, g.clientY)
+          overCanvas: E && W(s.clientX, s.clientY)
         };
       });
-    }, $ = (g) => {
-      g.pointerId === i.pointerId && f(!0);
-    }, A = (g) => {
-      g.pointerId === i.pointerId && f(!1);
     };
-    window.addEventListener("pointermove", k, {
-      signal: c.signal
-    }), window.addEventListener("pointerup", $, {
-      signal: c.signal
-    }), window.addEventListener("pointercancel", A, {
-      signal: c.signal
+    n = G({
+      pointerEvent: o,
+      captureEl: o.currentTarget,
+      onMove: v,
+      onEnd: ({
+        commit: s
+      }) => h(s)
     });
-  }, b = () => s()?.type ?? null;
+  }, b = () => c()?.type ?? null;
   return [(() => {
-    var i = U(), r = i.firstChild;
-    return r.nextSibling, i.addEventListener("pointerleave", () => a(null)), r.$$click = () => e.onShowAll(), r.addEventListener("pointerleave", () => a((n) => n === 0 ? null : n)), r.addEventListener("pointerenter", () => a(0)), v(r, d(C.span, {
+    var o = z(), r = o.firstChild;
+    return r.nextSibling, o.addEventListener("pointerleave", () => a(null)), r.$$click = () => t.onShowAll(), r.addEventListener("pointerleave", () => a((e) => e === 0 ? null : e)), r.addEventListener("pointerenter", () => a(0)), g(r, d(w.span, {
       class: "workbench-dock__tile",
       get animate() {
         return {
@@ -157,16 +159,16 @@ function re(e) {
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       get children() {
-        return d(G, {
+        return d(R, {
           class: "workbench-dock__icon"
         });
       }
-    }), null), v(r, d(C.span, {
+    }), null), g(r, d(w.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -176,92 +178,92 @@ function re(e) {
       },
       get transition() {
         return {
-          duration: L.fast,
+          duration: C.fast,
           easing: y.easeOut
         };
       },
       children: "Show all widgets"
-    }), null), v(i, d(T, {
+    }), null), g(o, d(P, {
       get each() {
-        return e.widgetDefinitions;
+        return t.widgetDefinitions;
       },
-      children: (n, u) => {
-        const c = () => u() + 1;
-        return d(p, {
+      children: (e, u) => {
+        const v = () => u() + 1;
+        return d(j, {
           get type() {
-            return n.type;
+            return e.type;
           },
           get label() {
-            return n.label;
+            return e.label;
           },
           get icon() {
-            return n.icon;
+            return e.icon;
           },
           get active() {
-            return e.filters[n.type];
+            return t.filters[e.type];
           },
           get hoverOffset() {
-            return m(c());
+            return k(v());
           },
           get isDragging() {
-            return b() === n.type;
+            return b() === e.type;
           },
-          onEnter: () => a(c()),
-          onLeave: () => a((k) => k === c() ? null : k),
-          onSolo: () => e.onSoloFilter(n.type),
+          onEnter: () => a(v()),
+          onLeave: () => a((s) => s === v() ? null : s),
+          onSolo: () => t.onSoloFilter(e.type),
           onDragBegin: _
         });
       }
-    }), null), D((n) => {
-      var u = !!h(), c = l() === 0, k = h();
-      return u !== n.e && r.classList.toggle("is-active", n.e = u), c !== n.t && r.classList.toggle("is-hovered", n.t = c), k !== n.a && S(r, "aria-pressed", n.a = k), n;
+    }), null), D((e) => {
+      var u = !!f(), v = l() === 0, s = f();
+      return u !== e.e && r.classList.toggle("is-active", e.e = u), v !== e.t && r.classList.toggle("is-hovered", e.t = v), s !== e.a && S(r, "aria-pressed", e.a = s), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), i;
-  })(), d(X, {
+    }), o;
+  })(), d(x, {
     get when() {
-      return s()?.moved ?? !1;
+      return c()?.moved ?? !1;
     },
     get children() {
       return d(J, {
-        state: s
+        state: c
       });
     }
   })];
 }
-function J(e) {
+function J(t) {
   const l = () => {
-    const t = e.state();
-    return t ? `translate3d(${t.clientX + 14}px, ${t.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => e.state()?.overCanvas ?? !1, s = () => e.state()?.label ?? "", o = () => e.state()?.icon;
-  return d(F, {
+    const n = t.state();
+    return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
+  }, a = () => t.state()?.overCanvas ?? !1, c = () => t.state()?.label ?? "", i = () => t.state()?.icon;
+  return d(Y, {
     get children() {
-      var t = V(), h = t.firstChild, m = h.nextSibling, f = m.firstChild, _ = f.nextSibling, b = _.firstChild, i = b.nextSibling, r = i.firstChild;
-      return v(f, d(X, {
+      var n = N(), f = n.firstChild, k = f.nextSibling, h = k.firstChild, _ = h.nextSibling, b = _.firstChild, o = b.nextSibling, r = o.firstChild;
+      return g(h, d(x, {
         get when() {
-          return o();
+          return i();
         },
-        children: (n) => {
-          const u = n();
+        children: (e) => {
+          const u = e();
           return d(u, {
             class: "w-4 h-4"
           });
         }
-      })), v(b, s), v(i, d(q, {
+      })), g(b, c), g(o, d(T, {
         class: "w-3 h-3"
-      }), r), v(r, () => a() ? "Drop to create" : "Drag onto canvas"), D((n) => {
-        var u = !!a(), c = l();
-        return u !== n.e && t.classList.toggle("is-over-canvas", n.e = u), c !== n.t && H(t, "transform", n.t = c), n;
+      }), r), g(r, () => a() ? "Drop to create" : "Drag onto canvas"), D((e) => {
+        var u = !!a(), v = l();
+        return u !== e.e && n.classList.toggle("is-over-canvas", e.e = u), v !== e.t && M(n, "transform", e.t = v), e;
       }, {
         e: void 0,
         t: void 0
-      }), t;
+      }), n;
     }
   });
 }
-P(["pointerdown", "click"]);
+A(["pointerdown", "click"]);
 export {
-  re as WorkbenchFilterBar
+  nt as WorkbenchFilterBar
 };