@floegence/floe-webapp-core 0.36.58 → 0.36.59

package/dist/components/workbench/WorkbenchFilterBar.d.ts

@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import { type WorkbenchEdgeAutoPanFrame } from './workbenchEdgeAutoPan';
 import type { WorkbenchDockToolId, WorkbenchInteractionMode, WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchFilterBarProps {
     widgetDefinitions: readonly WorkbenchWidgetDefinition[];
@@ -12,8 +13,8 @@ export interface WorkbenchFilterBarProps {
      * Called when the user drags a widget pill onto the canvas to create a
      * new widget of that type. Coordinates are in client space (clientX/Y).
      */
-    onCreateAt?: (type: WorkbenchWidgetType, clientX: number, clientY: number) => void;
-    onCreateToolAt?: (tool: WorkbenchDockToolId, clientX: number, clientY: number) => void;
+    onCreateAt?: (type: WorkbenchWidgetType, clientX: number, clientY: number, context?: WorkbenchDockDropContext) => void;
+    onCreateToolAt?: (tool: WorkbenchDockToolId, clientX: number, clientY: number, context?: WorkbenchDockDropContext) => void;
     onDragPreviewChange?: (preview: WorkbenchDockDragPreview | null) => void;
     viewport?: WorkbenchViewport;
     onViewportCommit?: (viewport: WorkbenchViewport) => void;
@@ -25,6 +26,12 @@ export type WorkbenchDockDragPreview = Readonly<{
     label: string;
     clientX: number;
     clientY: number;
+    dropAllowed: boolean;
+    canvasFrame: WorkbenchEdgeAutoPanFrame;
+}>;
+export type WorkbenchDockDropContext = Readonly<{
+    dropAllowed: boolean;
+    canvasFrame: WorkbenchEdgeAutoPanFrame;
 }>;
 export declare function WorkbenchDock(props: WorkbenchFilterBarProps): JSX.Element;
 export declare const WorkbenchFilterBar: typeof WorkbenchDock;

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,65 +1,63 @@
-import { insert as _, createComponent as g, effect as P, setAttribute as T, memo as se, template as p, Portal as de, setStyleProperty as ue, use as ge, delegateEvents as ve } from "solid-js/web";
-import { createSignal as B, onCleanup as z, createEffect as j, 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 { insert as b, createComponent as g, effect as P, setAttribute as T, memo as ge, template as $, Portal as ve, setStyleProperty as fe, use as me, delegateEvents as ke } from "solid-js/web";
+import { createSignal as B, onCleanup as J, createEffect as Q, createMemo as W, Show as N, For as Z } from "solid-js";
+import { Motion as F } 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 { Plus as fe } from "../icons/index.js";
-import { startHotInteraction as me } from "../../utils/hotInteraction.js";
-import { startPointerSession as ke } from "../ui/pointerSession.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ee, createWorkbenchEdgeAutoPanController as he, frameFromElement as be } from "./workbenchEdgeAutoPan.js";
-import { DockLayoutDashboard as _e, DockLayers as we, DockRegion as Ee, DockText as Ce, DockMessageSquare as Se } from "../icons/DockIcons.js";
-var De = /* @__PURE__ */ p("<button type=button class=workbench-dock__item>"), Oe = /* @__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 Q = 5, ye = ".workbench-dock", W = [{
+import { Plus as he } from "../icons/index.js";
+import { startHotInteraction as be } from "../../utils/hotInteraction.js";
+import { startPointerSession as _e } from "../ui/pointerSession.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ne, frameFromElement as oe, createWorkbenchEdgeAutoPanController as we } from "./workbenchEdgeAutoPan.js";
+import { DockLayoutDashboard as Ee, DockLayers as Ce, DockRegion as Se, DockText as De, DockMessageSquare as Oe } from "../icons/DockIcons.js";
+var pe = /* @__PURE__ */ $("<button type=button class=workbench-dock__item>"), Le = /* @__PURE__ */ $('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Me = /* @__PURE__ */ $('<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>'), ye = /* @__PURE__ */ $("<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>"), $e = /* @__PURE__ */ $("<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 ee = 5, Ie = ".workbench-dock", K = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
-  icon: _e
+  icon: Ee
 }, {
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: we
-}], $e = [{
+  icon: Ce
+}], Pe = [{
   tool: "sticky-note",
   label: "Sticky",
-  icon: Se
-}], Ie = [{
+  icon: Oe
+}], Te = [{
   tool: "background-region",
   label: "Region",
-  icon: Ee
+  icon: Se
 }, {
   tool: "text",
   label: "Text",
-  icon: Ce
+  icon: De
 }];
-function te() {
-  const e = document.querySelector(ee);
-  return e instanceof HTMLElement ? e.getBoundingClientRect() : null;
+function Fe() {
+  const e = document.querySelector(ne);
+  return e instanceof HTMLElement ? oe(e) : null;
 }
-function N(e, s, l) {
+function V(e, s, l) {
   return e >= l.left && e <= l.right && s >= l.top && s <= l.bottom;
 }
-function Pe(e, s) {
-  const l = te();
-  return l ? N(e, s, l) : !1;
+function Ae(e, s, l) {
+  return l ? V(e, s, l) : !1;
 }
-function Te(e, s, l, d) {
-  const n = te();
-  if (!n) return !1;
-  if (N(e, s, n) || N(l, d, n))
+function Xe(e, s, l, d, o) {
+  if (!e) return !1;
+  if (V(s, l, e) || V(d, o, e))
     return !0;
-  const o = l - e, w = d - s;
+  const i = d - s, _ = o - l;
   let f = 0, m = 1;
-  const u = (k, C) => {
-    if (k === 0) return C >= 0;
-    const E = C / k;
-    return k < 0 ? E > m ? !1 : (E > f && (f = E), !0) : E < f ? !1 : (E < m && (m = E), !0);
+  const u = (k, S) => {
+    if (k === 0) return S >= 0;
+    const w = S / k;
+    return k < 0 ? w > m ? !1 : (w > f && (f = w), !0) : w < f ? !1 : (w < m && (m = w), !0);
   };
-  return u(-o, e - n.left) && u(o, n.right - e) && u(-w, s - n.top) && u(w, n.bottom - s);
+  return u(-i, s - e.left) && u(i, e.right - s) && u(-_, l - e.top) && u(_, e.bottom - l);
 }
-function Z(e, s) {
+function te(e, s) {
   if (typeof document.elementFromPoint != "function") return !1;
   const l = document.elementFromPoint(e, s);
-  return l instanceof Element && l.closest(ye) !== null;
+  return l instanceof Element && l.closest(Ie) !== null;
 }
 function Re(e) {
   const s = () => e.hoverOffset === -1 ? {
@@ -78,12 +76,12 @@ function Re(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, l = () => e.hoverOffset === -1, d = (n) => {
-    n.button === 0 && e.onDragBegin(n, e.kind, e.id, e.label, e.icon);
+  }, l = () => e.hoverOffset === -1, d = (o) => {
+    o.button === 0 && e.onDragBegin(o, e.kind, e.id, e.label, e.icon);
   };
   return (() => {
-    var n = De();
-    return n.$$pointerdown = d, n.addEventListener("pointerleave", () => e.onLeave()), n.addEventListener("pointerenter", () => e.onEnter()), _(n, g(R.span, {
+    var o = pe();
+    return o.$$pointerdown = d, o.addEventListener("pointerleave", () => e.onLeave()), o.addEventListener("pointerenter", () => e.onEnter()), b(o, g(F.span, {
       class: "workbench-dock__tile",
       get animate() {
         return s();
@@ -96,13 +94,13 @@ function Re(e) {
       },
       get children() {
         return (() => {
-          const o = e.icon;
-          return g(o, {
+          const i = e.icon;
+          return g(i, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), _(n, g(R.span, {
+    }), null), b(o, g(F.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -119,9 +117,9 @@ function Re(e) {
       get children() {
         return e.label;
       }
-    }), null), P((o) => {
-      var w = !!e.active, f = !!(e.filterable && !e.visible), m = !!l(), u = !!e.isDragging, k = 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), k !== o.i && T(n, "aria-label", o.i = k), C !== o.n && T(n, "aria-pressed", o.n = C), o;
+    }), null), P((i) => {
+      var _ = !!e.active, f = !!(e.filterable && !e.visible), m = !!l(), u = !!e.isDragging, k = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, S = e.active;
+      return _ !== i.e && o.classList.toggle("is-active", i.e = _), f !== i.t && o.classList.toggle("is-filter-muted", i.t = f), m !== i.a && o.classList.toggle("is-hovered", i.a = m), u !== i.o && o.classList.toggle("is-source-dragging", i.o = u), k !== i.i && T(o, "aria-label", i.i = k), S !== i.n && T(o, "aria-pressed", i.n = S), i;
     }, {
       e: void 0,
       t: void 0,
@@ -129,40 +127,40 @@ function Re(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), n;
+    }), o;
   })();
 }
-function Ve(e) {
-  const [s, l] = B(null), [d, n] = B(null), [o, w] = B(!1);
+function qe(e) {
+  const [s, l] = B(null), [d, o] = B(null), [i, _] = B(!1);
   let f, m, u, k = null;
-  z(() => {
+  J(() => {
     u?.stop(), m?.stop({
       reason: "manual_stop",
       commit: !1
     }), m = void 0, d()?.stopInteraction(), e.onDragPreviewChange?.(null);
-  }), j(() => {
+  }), Q(() => {
     e.onDragPreviewChange?.(d()?.preview ?? null);
-  }), j(() => {
-    if (!o() || typeof window > "u") return;
+  }), Q(() => {
+    if (!i() || typeof window > "u") return;
     const t = (c) => {
-      f && c.target instanceof Node && f.contains(c.target) || w(!1);
-    }, i = (c) => {
-      c.key === "Escape" && w(!1);
+      f && c.target instanceof Node && f.contains(c.target) || _(!1);
+    }, n = (c) => {
+      c.key === "Escape" && _(!1);
     };
-    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", i, !0), z(() => {
-      window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", i, !0);
+    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", n, !0), J(() => {
+      window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", n, !0);
     });
   });
-  const C = (t) => {
-    const i = s();
-    return i === null ? 0 : i === t ? -1 : i === t + 1 ? -2 : i === t - 1 ? 1 : 0;
-  }, E = () => {
+  const S = (t) => {
+    const n = s();
+    return n === null ? 0 : n === t ? -1 : n === t + 1 ? -2 : n === t - 1 ? 1 : 0;
+  }, w = () => {
     u?.stop(), u = void 0, k = null;
-  }, Y = () => {
-    !e.viewport || !e.onViewportCommit || (k = e.viewport, u?.stop(), u = he({
+  }, R = () => {
+    !e.viewport || !e.onViewportCommit || (k = e.viewport, u?.stop(), u = we({
       readFrame: () => {
-        const t = document.querySelector(ee);
-        return t instanceof HTMLElement ? be(t) : null;
+        const t = document.querySelector(ne);
+        return t instanceof HTMLElement ? oe(t) : null;
       },
       readViewport: () => k ?? e.viewport ?? null,
       commitViewport: (t) => {
@@ -171,26 +169,34 @@ function Ve(e) {
       onPanStart: () => e.onViewportInteractionStart?.("pan"),
       shouldPan: () => {
         const t = d();
-        return !!(t?.moved && t.hasEnteredCanvas && !Z(t.clientX, t.clientY));
+        return !!(t?.moved && t.hasEnteredCanvas && !te(t.clientX, t.clientY));
       }
     }));
-  }, ne = (t) => {
-    const i = d();
-    if (!i) return;
-    const c = !i.moved;
-    if (i.stopInteraction(), E(), n(null), m = void 0, c) {
-      D() !== "background" && e.onSoloFilter(String(i.id), U());
+  }, ie = (t) => {
+    const n = d();
+    if (!n) return;
+    const c = !n.moved;
+    if (n.stopInteraction(), w(), o(null), m = void 0, c) {
+      D() !== "background" && e.onSoloFilter(String(n.id), q());
       return;
     }
-    t && i.overCanvas && (i.kind === "widget" ? e.onCreateAt?.(i.id, i.clientX, i.clientY) : e.onCreateToolAt?.(i.id, i.clientX, i.clientY));
-  }, oe = (t, i, c, y, r) => {
+    if (t && n.overCanvas) {
+      const O = n.canvasFrame ? {
+        dropAllowed: n.overCanvas,
+        canvasFrame: n.canvasFrame
+      } : void 0;
+      n.kind === "widget" ? e.onCreateAt?.(n.id, n.clientX, n.clientY, O) : e.onCreateToolAt?.(n.id, n.clientX, n.clientY, O);
+    }
+  }, re = (t, n, c, O, r) => {
     t.preventDefault(), m?.stop({
       reason: "manual_stop",
       commit: !1
-    }), Y(), n({
-      kind: i,
+    }), R();
+    const h = Fe();
+    o({
+      kind: n,
       id: c,
-      label: y,
+      label: O,
       icon: r,
       pointerId: t.pointerId,
       startClientX: t.clientX,
@@ -200,48 +206,51 @@ function Ve(e) {
       moved: !1,
       overCanvas: !1,
       hasEnteredCanvas: !1,
+      canvasFrame: h,
       preview: null,
-      stopInteraction: me({
+      stopInteraction: be({
         kind: "drag",
         cursor: "grabbing"
       })
     });
-    const b = (a) => {
-      let h = !1;
-      n((v) => {
+    const E = (a) => {
+      let y = !1;
+      o((v) => {
         if (!v || v.pointerId !== a.pointerId) return v;
-        const H = a.clientX - v.startClientX, $ = a.clientY - v.startClientY, O = v.moved || Math.abs(H) > Q || Math.abs($) > Q, S = Z(a.clientX, a.clientY), L = O && Pe(a.clientX, a.clientY) && !S, I = O && !S && Te(v.clientX, v.clientY, a.clientX, a.clientY), q = v.hasEnteredCanvas || L || I;
-        return h = O && q && !S, {
+        const I = a.clientX - v.startClientX, x = a.clientY - v.startClientY, C = v.moved || Math.abs(I) > ee || Math.abs(x) > ee, L = te(a.clientX, a.clientY), p = v.canvasFrame, z = C && Ae(a.clientX, a.clientY, p), H = z && !L, ue = C && !L && Xe(p, v.clientX, v.clientY, a.clientX, a.clientY), j = v.hasEnteredCanvas || H || ue;
+        return y = C && j && !L, {
           ...v,
           clientX: a.clientX,
           clientY: a.clientY,
-          moved: O,
-          overCanvas: L,
-          hasEnteredCanvas: q,
-          preview: L ? {
+          moved: C,
+          overCanvas: H,
+          hasEnteredCanvas: j,
+          preview: z && p ? {
             kind: v.kind,
             id: v.id,
             label: v.label,
             clientX: a.clientX,
-            clientY: a.clientY
+            clientY: a.clientY,
+            dropAllowed: H,
+            canvasFrame: p
           } : null
         };
-      }), h && u?.updatePointer(a.clientX, a.clientY);
+      }), y && u?.updatePointer(a.clientX, a.clientY);
     };
-    m = ke({
+    m = _e({
       pointerEvent: t,
       captureEl: t.currentTarget,
-      onMove: b,
+      onMove: E,
       onEnd: ({
         commit: a
-      }) => ne(a)
+      }) => ie(a)
     });
-  }, ie = () => d()?.kind === "widget" ? d().id : null, re = () => d()?.kind === "tool" ? d().id : null, D = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", V = F(() => W.find((t) => t.mode === D()) ?? W[0]), G = F(() => D() === "background" ? Ie.map((t) => ({
+  }, ae = () => d()?.kind === "widget" ? d().id : null, le = () => d()?.kind === "tool" ? d().id : null, D = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", G = W(() => K.find((t) => t.mode === D()) ?? K[0]), U = W(() => D() === "background" ? Te.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...$e.map((t) => ({
+  })) : [...Pe.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -251,24 +260,24 @@ function Ve(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), U = F(() => G().map((t) => String(t.id))), x = () => D() !== "background", ae = (t) => !x() || e.filters[t] !== !1, le = (t) => {
-    if (!x())
+  }))]), q = W(() => U().map((t) => String(t.id))), Y = () => D() !== "background", ce = (t) => !Y() || e.filters[t] !== !1, se = (t) => {
+    if (!Y())
       return !1;
-    const i = U();
-    return i.length > 1 && i.every((c) => e.filters[c] !== !1 == (c === t));
-  }, M = () => s() === 0, ce = () => ({
-    scale: M() || o() ? 1.26 : 1,
-    y: M() || o() ? -6 : 0,
+    const n = q();
+    return n.length > 1 && n.every((c) => e.filters[c] !== !1 == (c === t));
+  }, M = () => s() === 0, de = () => ({
+    scale: M() || i() ? 1.26 : 1,
+    y: M() || i() ? -6 : 0,
     x: s() === 1 ? -5 : 0
   });
   return [(() => {
-    var t = Le(), i = t.firstChild, c = i.firstChild;
-    i.nextSibling, t.addEventListener("pointerleave", () => l(null));
-    var y = f;
-    return typeof y == "function" ? ge(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, {
+    var t = Me(), n = t.firstChild, c = n.firstChild;
+    n.nextSibling, t.addEventListener("pointerleave", () => l(null));
+    var O = f;
+    return typeof O == "function" ? me(O, t) : f = t, c.$$click = () => _((r) => !r), c.addEventListener("pointerleave", () => l((r) => r === 0 ? null : r)), c.addEventListener("pointerenter", () => l(0)), b(c, g(F.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return ce();
+        return de();
       },
       get transition() {
         return {
@@ -278,18 +287,18 @@ function Ve(e) {
       },
       get children() {
         return (() => {
-          const r = V().icon;
+          const r = G().icon;
           return g(r, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), _(c, g(R.span, {
+    }), null), b(c, g(F.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: M() && !o() ? 1 : 0,
-          y: M() && !o() ? -6 : 0
+          opacity: M() && !i() ? 1 : 0,
+          y: M() && !i() ? -6 : 0
         };
       },
       get transition() {
@@ -299,41 +308,41 @@ function Ve(e) {
         };
       },
       get children() {
-        return V().label;
+        return G().label;
       }
-    }), null), _(i, g(K, {
+    }), null), b(n, g(N, {
       get when() {
-        return o();
+        return i();
       },
       get children() {
-        var r = Oe();
-        return _(r, g(J, {
-          each: W,
-          children: (b) => {
-            const a = b.icon;
+        var r = Le();
+        return b(r, g(Z, {
+          each: K,
+          children: (h) => {
+            const E = h.icon;
             return (() => {
-              var h = Me(), v = h.firstChild, H = v.nextSibling, $ = H.firstChild, O = $.nextSibling;
-              return h.$$click = () => {
-                e.onSelectMode?.(b.mode), w(!1);
-              }, _(v, g(a, {
+              var a = ye(), y = a.firstChild, v = y.nextSibling, I = v.firstChild, x = I.nextSibling;
+              return a.$$click = () => {
+                e.onSelectMode?.(h.mode), _(!1);
+              }, b(y, g(E, {
                 class: "workbench-dock__mode-icon"
-              })), _($, () => b.label), _(O, () => b.description), P((S) => {
-                var L = D() === b.mode, I = D() === b.mode;
-                return L !== S.e && h.classList.toggle("is-active", S.e = L), I !== S.t && T(h, "aria-checked", S.t = I), S;
+              })), b(I, () => h.label), b(x, () => h.description), P((C) => {
+                var L = D() === h.mode, p = D() === h.mode;
+                return L !== C.e && a.classList.toggle("is-active", C.e = L), p !== C.t && T(a, "aria-checked", C.t = p), C;
               }, {
                 e: void 0,
                 t: void 0
-              }), h;
+              }), a;
             })();
           }
         })), r;
       }
-    }), null), _(t, g(J, {
+    }), null), b(t, g(Z, {
       get each() {
-        return G();
+        return U();
       },
-      children: (r, b) => {
-        const a = () => b() + 1;
+      children: (r, h) => {
+        const E = () => h() + 1;
         return g(Re, {
           get id() {
             return String(r.id);
@@ -348,69 +357,69 @@ function Ve(e) {
             return r.icon;
           },
           get active() {
-            return le(String(r.id));
+            return se(String(r.id));
           },
           get visible() {
-            return ae(String(r.id));
+            return ce(String(r.id));
           },
           get filterable() {
-            return x();
+            return Y();
           },
           get hoverOffset() {
-            return C(a());
+            return S(E());
           },
           get isDragging() {
-            return se(() => r.kind === "widget")() ? ie() === r.id : re() === r.id;
+            return ge(() => r.kind === "widget")() ? ae() === r.id : le() === r.id;
           },
-          onEnter: () => l(a()),
-          onLeave: () => l((h) => h === a() ? null : h),
-          onDragBegin: oe
+          onEnter: () => l(E()),
+          onLeave: () => l((a) => a === E() ? null : a),
+          onDragBegin: re
         });
       }
     }), null), P((r) => {
-      var b = D() === "background", a = !!(M() || o()), h = o();
-      return b !== r.e && c.classList.toggle("is-active", r.e = b), a !== r.t && c.classList.toggle("is-hovered", r.t = a), h !== r.a && T(c, "aria-expanded", r.a = h), r;
+      var h = D() === "background", E = !!(M() || i()), a = i();
+      return h !== r.e && c.classList.toggle("is-active", r.e = h), E !== r.t && c.classList.toggle("is-hovered", r.t = E), a !== r.a && T(c, "aria-expanded", r.a = a), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), t;
-  })(), g(K, {
+  })(), g(N, {
     get when() {
-      return !!(d()?.moved && !d()?.overCanvas);
+      return !!(d()?.moved && !d()?.preview);
     },
     get children() {
-      return g(Ae, {
+      return g(Ye, {
         state: d
       });
     }
   })];
 }
-function Ae(e) {
+function Ye(e) {
   const s = () => {
-    const n = e.state();
-    return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
+    const o = e.state();
+    return o ? `translate3d(${o.clientX + 14}px, ${o.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
   }, l = () => e.state()?.label ?? "", d = () => e.state()?.icon;
-  return g(de, {
+  return g(ve, {
     get children() {
-      var n = pe(), o = n.firstChild, w = o.nextSibling, f = w.firstChild, m = f.nextSibling, u = m.firstChild, k = u.nextSibling, C = k.firstChild;
-      return _(f, g(K, {
+      var o = $e(), i = o.firstChild, _ = i.nextSibling, f = _.firstChild, m = f.nextSibling, u = m.firstChild, k = u.nextSibling, S = k.firstChild;
+      return b(f, g(N, {
         get when() {
           return d();
         },
-        children: (E) => {
-          const Y = E();
-          return g(Y, {
+        children: (w) => {
+          const R = w();
+          return g(R, {
             class: "w-4 h-4"
           });
         }
-      })), _(u, l), _(k, g(fe, {
+      })), b(u, l), b(k, g(he, {
         class: "w-3 h-3"
-      }), C), P((E) => ue(n, "transform", s())), n;
+      }), S), P((w) => fe(o, "transform", s())), o;
     }
   });
 }
-ve(["pointerdown", "click"]);
+ke(["pointerdown", "click"]);
 export {
-  Ve as WorkbenchDock
+  qe as WorkbenchDock
 };

package/dist/components/workbench/WorkbenchPlacementPreview.js

@@ -1,35 +1,35 @@
-import { createComponent as m, insert as x, effect as u, setStyleProperty as o, template as k } from "solid-js/web";
-import { Show as y } from "solid-js";
-var b = /* @__PURE__ */ k("<div class=workbench-placement-preview aria-hidden=true><div class=workbench-placement-preview__crosshair></div><div class=workbench-placement-preview__label>");
-function P(r) {
+import { createComponent as x, insert as u, effect as k, setStyleProperty as o, template as y } from "solid-js/web";
+import { Show as b } from "solid-js";
+var f = /* @__PURE__ */ y("<div class=workbench-placement-preview aria-hidden=true><div class=workbench-placement-preview__crosshair></div><div class=workbench-placement-preview__label>");
+function S(r) {
   const n = () => {
-    const e = r.preview;
-    if (!e) return null;
+    const t = r.preview;
+    if (!t) return null;
     if (r.projection === "screen") {
       const i = Number.isFinite(r.viewport.scale) && r.viewport.scale > 0 ? r.viewport.scale : 1;
       return {
-        x: r.viewport.x + e.x * i,
-        y: r.viewport.y + e.y * i,
-        width: e.width * i,
-        height: e.height * i
+        x: r.viewport.x + t.x * i,
+        y: r.viewport.y + t.y * i,
+        width: t.width * i,
+        height: t.height * i
       };
     }
     return {
-      x: e.x,
-      y: e.y,
-      width: e.width,
-      height: e.height
+      x: t.x,
+      y: t.y,
+      width: t.width,
+      height: t.height
     };
   };
-  return m(y, {
+  return x(b, {
     get when() {
       return r.preview;
     },
-    children: (e) => (() => {
-      var i = b(), g = i.firstChild, w = g.nextSibling;
-      return x(w, () => e().label), u((t) => {
-        var s = e().kind === "widget", l = e().kind === "sticky-note", a = e().kind === "text", c = e().kind === "background-region", d = `translate3d(${n()?.x ?? 0}px, ${n()?.y ?? 0}px, 0)`, v = `${n()?.width ?? 0}px`, h = `${n()?.height ?? 0}px`;
-        return s !== t.e && i.classList.toggle("is-widget", t.e = s), l !== t.t && i.classList.toggle("is-sticky-note", t.t = l), a !== t.a && i.classList.toggle("is-text", t.a = a), c !== t.o && i.classList.toggle("is-background-region", t.o = c), d !== t.i && o(i, "transform", t.i = d), v !== t.n && o(i, "width", t.n = v), h !== t.s && o(i, "height", t.s = h), t;
+    children: (t) => (() => {
+      var i = f(), w = i.firstChild, m = w.nextSibling;
+      return u(m, () => t().label), k((e) => {
+        var s = t().kind === "widget", l = t().kind === "sticky-note", a = t().kind === "text", d = t().kind === "background-region", c = t().dropAllowed !== !1, h = `translate3d(${n()?.x ?? 0}px, ${n()?.y ?? 0}px, 0)`, v = `${n()?.width ?? 0}px`, g = `${n()?.height ?? 0}px`;
+        return s !== e.e && i.classList.toggle("is-widget", e.e = s), l !== e.t && i.classList.toggle("is-sticky-note", e.t = l), a !== e.a && i.classList.toggle("is-text", e.a = a), d !== e.o && i.classList.toggle("is-background-region", e.o = d), c !== e.i && i.classList.toggle("is-drop-armed", e.i = c), h !== e.n && o(i, "transform", e.n = h), v !== e.s && o(i, "width", e.s = v), g !== e.h && o(i, "height", e.h = g), e;
       }, {
         e: void 0,
         t: void 0,
@@ -37,11 +37,12 @@ function P(r) {
         o: void 0,
         i: void 0,
         n: void 0,
-        s: void 0
+        s: void 0,
+        h: void 0
       }), i;
     })()
   });
 }
 export {
-  P as WorkbenchPlacementPreview
+  S as WorkbenchPlacementPreview
 };