@floegence/floe-webapp-core 0.36.53 → 0.36.54

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,13 +1,13 @@
-import { insert as k, createComponent as u, effect as A, setAttribute as X, memo as de, template as P, Portal as ue, setStyleProperty as ge, use as ve, delegateEvents as fe } from "solid-js/web";
-import { createSignal as W, onCleanup as j, createEffect as J, createMemo as K, Show as V, For as Q } from "solid-js";
-import { Motion as Y } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as x, duration as H } from "../../utils/animations.js";
-import { LayoutDashboard as me, Layers as te, Region as he, TextTool as ke, MessageSquare as be, Plus as _e } from "../icons/index.js";
+import { insert as _, createComponent as g, effect as P, setAttribute as T, memo as de, template as p, Portal as ue, setStyleProperty as ge, use as ve, delegateEvents as fe } from "solid-js/web";
+import { createSignal as B, onCleanup as q, createEffect as z, createMemo as F, Show as K, For as j } from "solid-js";
+import { Motion as R } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as A, duration as X } from "../../utils/animations.js";
+import { LayoutDashboard as me, Layers as Z, Region as he, TextTool as ke, MessageSquare as be, Plus as _e } from "../icons/index.js";
 import { startHotInteraction as we } from "../../utils/hotInteraction.js";
 import { startPointerSession as Ee } from "../ui/pointerSession.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ne, createWorkbenchEdgeAutoPanController as Ce, frameFromElement as Se } from "./workbenchEdgeAutoPan.js";
-var Oe = /* @__PURE__ */ P("<button type=button class=workbench-dock__item>"), De = /* @__PURE__ */ P('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Le = /* @__PURE__ */ P('<div class=workbench-dock data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), Me = /* @__PURE__ */ P("<button type=button class=workbench-dock__mode-option role=menuitemradio><span class=workbench-dock__mode-option-icon></span><span class=workbench-dock__mode-option-copy><span class=workbench-dock__mode-option-label></span><span class=workbench-dock__mode-option-description>"), ye = /* @__PURE__ */ P("<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 Z = 5, Ie = ".workbench-dock", N = [{
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ee, createWorkbenchEdgeAutoPanController as Ce, frameFromElement as Se } from "./workbenchEdgeAutoPan.js";
+var Oe = /* @__PURE__ */ p("<button type=button class=workbench-dock__item>"), De = /* @__PURE__ */ p('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Le = /* @__PURE__ */ p('<div class=workbench-dock data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), Me = /* @__PURE__ */ p("<button type=button class=workbench-dock__mode-option role=menuitemradio><span class=workbench-dock__mode-option-icon></span><span class=workbench-dock__mode-option-copy><span class=workbench-dock__mode-option-label></span><span class=workbench-dock__mode-option-description>"), pe = /* @__PURE__ */ p("<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>Drag onto canvas");
+const J = 5, ye = ".workbench-dock", W = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
@@ -16,12 +16,12 @@ const Z = 5, Ie = ".workbench-dock", N = [{
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: te
-}], Pe = [{
+  icon: Z
+}], $e = [{
   tool: "sticky-note",
   label: "Sticky",
   icon: be
-}], $e = [{
+}], Ie = [{
   tool: "background-region",
   label: "Region",
   icon: he
@@ -30,35 +30,35 @@ const Z = 5, Ie = ".workbench-dock", N = [{
   label: "Text",
   icon: ke
 }];
-function oe() {
-  const e = document.querySelector(ne);
+function te() {
+  const e = document.querySelector(ee);
   return e instanceof HTMLElement ? e.getBoundingClientRect() : null;
 }
-function G(e, s, a) {
-  return e >= a.left && e <= a.right && s >= a.top && s <= a.bottom;
+function N(e, s, l) {
+  return e >= l.left && e <= l.right && s >= l.top && s <= l.bottom;
 }
-function Te(e, s) {
-  const a = oe();
-  return a ? G(e, s, a) : !1;
+function Pe(e, s) {
+  const l = te();
+  return l ? N(e, s, l) : !1;
 }
-function pe(e, s, a, d) {
-  const o = oe();
-  if (!o) return !1;
-  if (G(e, s, o) || G(a, d, o))
+function Te(e, s, l, d) {
+  const n = te();
+  if (!n) return !1;
+  if (N(e, s, n) || N(l, d, n))
     return !0;
-  const n = a - e, w = d - s;
-  let b = 0, f = 1;
-  const g = (m, C) => {
-    if (m === 0) return C >= 0;
-    const E = C / m;
-    return m < 0 ? E > f ? !1 : (E > b && (b = E), !0) : E < b ? !1 : (E < f && (f = E), !0);
+  const o = l - e, w = d - s;
+  let f = 0, m = 1;
+  const u = (h, C) => {
+    if (h === 0) return C >= 0;
+    const E = C / h;
+    return h < 0 ? E > m ? !1 : (E > f && (f = E), !0) : E < f ? !1 : (E < m && (m = E), !0);
   };
-  return g(-n, e - o.left) && g(n, o.right - e) && g(-w, s - o.top) && g(w, o.bottom - s);
+  return u(-o, e - n.left) && u(o, n.right - e) && u(-w, s - n.top) && u(w, n.bottom - s);
 }
-function ee(e, s) {
+function Q(e, s) {
   if (typeof document.elementFromPoint != "function") return !1;
-  const a = document.elementFromPoint(e, s);
-  return a instanceof Element && a.closest(Ie) !== null;
+  const l = document.elementFromPoint(e, s);
+  return l instanceof Element && l.closest(ye) !== null;
 }
 function Re(e) {
   const s = () => e.hoverOffset === -1 ? {
@@ -77,50 +77,50 @@ function Re(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => e.hoverOffset === -1, d = (o) => {
-    o.button === 0 && e.onDragBegin(o, e.kind, e.id, e.label, e.icon);
+  }, l = () => e.hoverOffset === -1, d = (n) => {
+    n.button === 0 && e.onDragBegin(n, e.kind, e.id, e.label, e.icon);
   };
   return (() => {
-    var o = Oe();
-    return o.$$pointerdown = d, o.addEventListener("pointerleave", () => e.onLeave()), o.addEventListener("pointerenter", () => e.onEnter()), k(o, u(Y.span, {
+    var n = Oe();
+    return n.$$pointerdown = d, n.addEventListener("pointerleave", () => e.onLeave()), n.addEventListener("pointerenter", () => e.onEnter()), _(n, g(R.span, {
       class: "workbench-dock__tile",
       get animate() {
         return s();
       },
       get transition() {
         return {
-          duration: H.fast,
-          easing: x.easeOut
+          duration: X.fast,
+          easing: A.easeOut
         };
       },
       get children() {
         return (() => {
-          const n = e.icon;
-          return u(n, {
+          const o = e.icon;
+          return g(o, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), k(o, u(Y.span, {
+    }), null), _(n, g(R.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: a() ? 1 : 0,
-          y: a() ? -6 : 0
+          opacity: l() ? 1 : 0,
+          y: l() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: H.fast,
-          easing: x.easeOut
+          duration: X.fast,
+          easing: A.easeOut
         };
       },
       get children() {
         return e.label;
       }
-    }), null), A((n) => {
-      var w = !!e.active, b = !!(e.filterable && !e.visible), f = !!a(), g = !!e.isDragging, m = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, C = e.active;
-      return w !== n.e && o.classList.toggle("is-active", n.e = w), b !== n.t && o.classList.toggle("is-filter-muted", n.t = b), f !== n.a && o.classList.toggle("is-hovered", n.a = f), g !== n.o && o.classList.toggle("is-source-dragging", n.o = g), m !== n.i && X(o, "aria-label", n.i = m), C !== n.n && X(o, "aria-pressed", n.n = C), n;
+    }), null), P((o) => {
+      var w = !!e.active, f = !!(e.filterable && !e.visible), m = !!l(), u = !!e.isDragging, h = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, C = e.active;
+      return w !== o.e && n.classList.toggle("is-active", o.e = w), f !== o.t && n.classList.toggle("is-filter-muted", o.t = f), m !== o.a && n.classList.toggle("is-hovered", o.a = m), u !== o.o && n.classList.toggle("is-source-dragging", o.o = u), h !== o.i && T(n, "aria-label", o.i = h), C !== o.n && T(n, "aria-pressed", o.n = C), o;
     }, {
       e: void 0,
       t: void 0,
@@ -128,27 +128,27 @@ function Re(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), o;
+    }), n;
   })();
 }
 function Ne(e) {
-  const [s, a] = W(null), [d, o] = W(null), [n, w] = W(!1);
-  let b, f, g, m = null;
-  j(() => {
-    g?.stop(), f?.stop({
+  const [s, l] = B(null), [d, n] = B(null), [o, w] = B(!1);
+  let f, m, u, h = null;
+  q(() => {
+    u?.stop(), m?.stop({
       reason: "manual_stop",
       commit: !1
-    }), f = void 0, d()?.stopInteraction(), e.onDragPreviewChange?.(null);
-  }), J(() => {
+    }), m = void 0, d()?.stopInteraction(), e.onDragPreviewChange?.(null);
+  }), z(() => {
     e.onDragPreviewChange?.(d()?.preview ?? null);
-  }), J(() => {
-    if (!n() || typeof window > "u") return;
+  }), z(() => {
+    if (!o() || typeof window > "u") return;
     const t = (c) => {
-      b && c.target instanceof Node && b.contains(c.target) || w(!1);
+      f && c.target instanceof Node && f.contains(c.target) || w(!1);
     }, i = (c) => {
       c.key === "Escape" && w(!1);
     };
-    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", i, !0), j(() => {
+    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", i, !0), q(() => {
       window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", i, !0);
     });
   });
@@ -156,40 +156,40 @@ function Ne(e) {
     const i = s();
     return i === null ? 0 : i === t ? -1 : i === t + 1 ? -2 : i === t - 1 ? 1 : 0;
   }, E = () => {
-    g?.stop(), g = void 0, m = null;
-  }, S = () => {
-    !e.viewport || !e.onViewportCommit || (m = e.viewport, g?.stop(), g = Ce({
+    u?.stop(), u = void 0, h = null;
+  }, Y = () => {
+    !e.viewport || !e.onViewportCommit || (h = e.viewport, u?.stop(), u = Ce({
       readFrame: () => {
-        const t = document.querySelector(ne);
+        const t = document.querySelector(ee);
         return t instanceof HTMLElement ? Se(t) : null;
       },
-      readViewport: () => m ?? e.viewport ?? null,
+      readViewport: () => h ?? e.viewport ?? null,
       commitViewport: (t) => {
-        m = t, e.onViewportCommit?.(t);
+        h = t, e.onViewportCommit?.(t);
       },
       onPanStart: () => e.onViewportInteractionStart?.("pan"),
       shouldPan: () => {
         const t = d();
-        return !!(t?.moved && t.hasEnteredCanvas && !ee(t.clientX, t.clientY));
+        return !!(t?.moved && t.hasEnteredCanvas && !Q(t.clientX, t.clientY));
       }
     }));
-  }, L = (t) => {
+  }, ne = (t) => {
     const i = d();
     if (!i) return;
     const c = !i.moved;
-    if (i.stopInteraction(), E(), o(null), f = void 0, c) {
-      D() !== "background" && e.onSoloFilter(String(i.id), q());
+    if (i.stopInteraction(), E(), n(null), m = void 0, c) {
+      O() !== "background" && e.onSoloFilter(String(i.id), G());
       return;
     }
     t && i.overCanvas && (i.kind === "widget" ? e.onCreateAt?.(i.id, i.clientX, i.clientY) : e.onCreateToolAt?.(i.id, i.clientX, i.clientY));
-  }, $ = (t, i, c, T, r) => {
-    t.preventDefault(), f?.stop({
+  }, oe = (t, i, c, y, r) => {
+    t.preventDefault(), m?.stop({
       reason: "manual_stop",
       commit: !1
-    }), S(), o({
+    }), Y(), n({
       kind: i,
       id: c,
-      label: T,
+      label: y,
       icon: r,
       pointerId: t.pointerId,
       startClientX: t.clientX,
@@ -205,42 +205,42 @@ function Ne(e) {
         cursor: "grabbing"
       })
     });
-    const _ = (l) => {
-      let h = !1;
-      o((v) => {
-        if (!v || v.pointerId !== l.pointerId) return v;
-        const B = l.clientX - v.startClientX, p = l.clientY - v.startClientY, M = v.moved || Math.abs(B) > Z || Math.abs(p) > Z, O = ee(l.clientX, l.clientY), y = M && Te(l.clientX, l.clientY) && !O, R = M && !O && pe(v.clientX, v.clientY, l.clientX, l.clientY), z = v.hasEnteredCanvas || y || R;
-        return h = M && z && !O, {
+    const b = (a) => {
+      let k = !1;
+      n((v) => {
+        if (!v || v.pointerId !== a.pointerId) return v;
+        const H = a.clientX - v.startClientX, $ = a.clientY - v.startClientY, D = v.moved || Math.abs(H) > J || Math.abs($) > J, S = Q(a.clientX, a.clientY), L = D && Pe(a.clientX, a.clientY) && !S, I = D && !S && Te(v.clientX, v.clientY, a.clientX, a.clientY), U = v.hasEnteredCanvas || L || I;
+        return k = D && U && !S, {
           ...v,
-          clientX: l.clientX,
-          clientY: l.clientY,
-          moved: M,
-          overCanvas: y,
-          hasEnteredCanvas: z,
-          preview: y ? {
+          clientX: a.clientX,
+          clientY: a.clientY,
+          moved: D,
+          overCanvas: L,
+          hasEnteredCanvas: U,
+          preview: L ? {
             kind: v.kind,
             id: v.id,
             label: v.label,
-            clientX: l.clientX,
-            clientY: l.clientY
+            clientX: a.clientX,
+            clientY: a.clientY
           } : null
         };
-      }), h && g?.updatePointer(l.clientX, l.clientY);
+      }), k && u?.updatePointer(a.clientX, a.clientY);
     };
-    f = Ee({
+    m = Ee({
       pointerEvent: t,
       captureEl: t.currentTarget,
-      onMove: _,
+      onMove: b,
       onEnd: ({
-        commit: l
-      }) => L(l)
+        commit: a
+      }) => ne(a)
     });
-  }, ie = () => d()?.kind === "widget" ? d().id : null, re = () => d()?.kind === "tool" ? d().id : null, D = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", ae = K(() => N.find((t) => t.mode === D()) ?? N[0]), U = K(() => D() === "background" ? $e.map((t) => ({
+  }, ie = () => d()?.kind === "widget" ? d().id : null, re = () => d()?.kind === "tool" ? d().id : null, O = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", ae = F(() => W.find((t) => t.mode === O()) ?? W[0]), V = F(() => O() === "background" ? Ie.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...Pe.map((t) => ({
+  })) : [...$e.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -250,87 +250,87 @@ function Ne(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), q = K(() => U().map((t) => String(t.id))), F = () => D() !== "background", le = (t) => !F() || e.filters[t] !== !1, ce = (t) => {
-    if (!F())
+  }))]), G = F(() => V().map((t) => String(t.id))), x = () => O() !== "background", le = (t) => !x() || e.filters[t] !== !1, ce = (t) => {
+    if (!x())
       return !1;
-    const i = q();
+    const i = G();
     return i.length > 1 && i.every((c) => e.filters[c] !== !1 == (c === t));
-  }, I = () => s() === 0, se = () => ({
-    scale: I() || n() ? 1.26 : 1,
-    y: I() || n() ? -6 : 0,
+  }, M = () => s() === 0, se = () => ({
+    scale: M() || o() ? 1.26 : 1,
+    y: M() || o() ? -6 : 0,
     x: s() === 1 ? -5 : 0
   });
   return [(() => {
     var t = Le(), i = t.firstChild, c = i.firstChild;
-    i.nextSibling, t.addEventListener("pointerleave", () => a(null));
-    var T = b;
-    return typeof T == "function" ? ve(T, t) : b = t, c.$$click = () => w((r) => !r), c.addEventListener("pointerleave", () => a((r) => r === 0 ? null : r)), c.addEventListener("pointerenter", () => a(0)), k(c, u(Y.span, {
+    i.nextSibling, t.addEventListener("pointerleave", () => l(null));
+    var y = f;
+    return typeof y == "function" ? ve(y, t) : f = t, c.$$click = () => w((r) => !r), c.addEventListener("pointerleave", () => l((r) => r === 0 ? null : r)), c.addEventListener("pointerenter", () => l(0)), _(c, g(R.span, {
       class: "workbench-dock__tile",
       get animate() {
         return se();
       },
       get transition() {
         return {
-          duration: H.fast,
-          easing: x.easeOut
+          duration: X.fast,
+          easing: A.easeOut
         };
       },
       get children() {
-        return u(te, {
+        return g(Z, {
           class: "workbench-dock__icon"
         });
       }
-    }), null), k(c, u(Y.span, {
+    }), null), _(c, g(R.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: I() && !n() ? 1 : 0,
-          y: I() && !n() ? -6 : 0
+          opacity: M() && !o() ? 1 : 0,
+          y: M() && !o() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: H.fast,
-          easing: x.easeOut
+          duration: X.fast,
+          easing: A.easeOut
         };
       },
       get children() {
         return ae().label;
       }
-    }), null), k(i, u(V, {
+    }), null), _(i, g(K, {
       get when() {
-        return n();
+        return o();
       },
       get children() {
         var r = De();
-        return k(r, u(Q, {
-          each: N,
-          children: (_) => {
-            const l = _.icon;
+        return _(r, g(j, {
+          each: W,
+          children: (b) => {
+            const a = b.icon;
             return (() => {
-              var h = Me(), v = h.firstChild, B = v.nextSibling, p = B.firstChild, M = p.nextSibling;
-              return h.$$click = () => {
-                e.onSelectMode?.(_.mode), w(!1);
-              }, k(v, u(l, {
+              var k = Me(), v = k.firstChild, H = v.nextSibling, $ = H.firstChild, D = $.nextSibling;
+              return k.$$click = () => {
+                e.onSelectMode?.(b.mode), w(!1);
+              }, _(v, g(a, {
                 class: "workbench-dock__mode-icon"
-              })), k(p, () => _.label), k(M, () => _.description), A((O) => {
-                var y = D() === _.mode, R = D() === _.mode;
-                return y !== O.e && h.classList.toggle("is-active", O.e = y), R !== O.t && X(h, "aria-checked", O.t = R), O;
+              })), _($, () => b.label), _(D, () => b.description), P((S) => {
+                var L = O() === b.mode, I = O() === b.mode;
+                return L !== S.e && k.classList.toggle("is-active", S.e = L), I !== S.t && T(k, "aria-checked", S.t = I), S;
               }, {
                 e: void 0,
                 t: void 0
-              }), h;
+              }), k;
             })();
           }
         })), r;
       }
-    }), null), k(t, u(Q, {
+    }), null), _(t, g(j, {
       get each() {
-        return U();
+        return V();
       },
-      children: (r, _) => {
-        const l = () => _() + 1;
-        return u(Re, {
+      children: (r, b) => {
+        const a = () => b() + 1;
+        return g(Re, {
           get id() {
             return String(r.id);
           },
@@ -350,33 +350,33 @@ function Ne(e) {
             return le(String(r.id));
           },
           get filterable() {
-            return F();
+            return x();
           },
           get hoverOffset() {
-            return C(l());
+            return C(a());
           },
           get isDragging() {
             return de(() => r.kind === "widget")() ? ie() === r.id : re() === r.id;
           },
-          onEnter: () => a(l()),
-          onLeave: () => a((h) => h === l() ? null : h),
-          onDragBegin: $
+          onEnter: () => l(a()),
+          onLeave: () => l((k) => k === a() ? null : k),
+          onDragBegin: oe
         });
       }
-    }), null), A((r) => {
-      var _ = D() === "background", l = !!(I() || n()), h = n();
-      return _ !== r.e && c.classList.toggle("is-active", r.e = _), l !== r.t && c.classList.toggle("is-hovered", r.t = l), h !== r.a && X(c, "aria-expanded", r.a = h), r;
+    }), null), P((r) => {
+      var b = O() === "background", a = !!(M() || o()), k = o();
+      return b !== r.e && c.classList.toggle("is-active", r.e = b), a !== r.t && c.classList.toggle("is-hovered", r.t = a), k !== r.a && T(c, "aria-expanded", r.a = k), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), t;
-  })(), u(V, {
+  })(), g(K, {
     get when() {
-      return d()?.moved ?? !1;
+      return !!(d()?.moved && !d()?.overCanvas);
     },
     get children() {
-      return u(Ae, {
+      return g(Ae, {
         state: d
       });
     }
@@ -386,29 +386,23 @@ function Ae(e) {
   const s = () => {
     const n = e.state();
     return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => e.state()?.overCanvas ?? !1, d = () => e.state()?.label ?? "", o = () => e.state()?.icon;
-  return u(ue, {
+  }, l = () => e.state()?.label ?? "", d = () => e.state()?.icon;
+  return g(ue, {
     get children() {
-      var n = ye(), w = n.firstChild, b = w.nextSibling, f = b.firstChild, g = f.nextSibling, m = g.firstChild, C = m.nextSibling, E = C.firstChild;
-      return k(f, u(V, {
+      var n = pe(), o = n.firstChild, w = o.nextSibling, f = w.firstChild, m = f.nextSibling, u = m.firstChild, h = u.nextSibling, C = h.firstChild;
+      return _(f, g(K, {
         get when() {
-          return o();
+          return d();
         },
-        children: (S) => {
-          const L = S();
-          return u(L, {
+        children: (E) => {
+          const Y = E();
+          return g(Y, {
             class: "w-4 h-4"
           });
         }
-      })), k(m, d), k(C, u(_e, {
+      })), _(u, l), _(h, g(_e, {
         class: "w-3 h-3"
-      }), E), k(E, () => a() ? "Drop to create" : "Drag onto canvas"), A((S) => {
-        var L = !!a(), $ = s();
-        return L !== S.e && n.classList.toggle("is-over-canvas", S.e = L), $ !== S.t && ge(n, "transform", S.t = $), S;
-      }, {
-        e: void 0,
-        t: void 0
-      }), n;
+      }), C), P((E) => ge(n, "transform", s())), n;
     }
   });
 }

package/package.json

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