@floegence/floe-webapp-core 0.42.1 → 0.42.2

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,53 +1,53 @@
-import { insert as h, createComponent as c, effect as Y, setAttribute as y, memo as Z, className as Xe, template as X, addEventListener as ke, Portal as Ae, setStyleProperty as Ye, use as $e, delegateEvents as Fe } from "solid-js/web";
-import { createSignal as ee, onCleanup as U, createEffect as q, createMemo as H, Show as W, For as z } from "solid-js";
+import { insert as h, createComponent as c, effect as Y, setAttribute as y, memo as Q, className as Xe, template as X, addEventListener as ke, Portal as Ae, setStyleProperty as Ye, use as $e, delegateEvents as Fe } from "solid-js/web";
+import { createSignal as Z, onCleanup as U, createEffect as q, createMemo as H, Show as W, For as ee, Index as Re } from "solid-js";
 import { Motion as $ } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
 import { easing as F, duration as R } from "../../utils/animations.js";
-import { Plus as Re } from "../icons/index.js";
-import { startHotInteraction as pe } from "../../utils/hotInteraction.js";
-import { startPointerSession as Be } from "../ui/pointerSession.js";
-import { clientToCanvasWorld as He } from "../ui/canvasGeometry.js";
-import { createWorkbenchWidgetFrame as We } from "./workbenchHelpers.js";
-import { getWidgetEntry as Ne } from "./widgets/widgetRegistry.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as be, frameFromElement as _e, createWorkbenchEdgeAutoPanController as Ke } from "./workbenchEdgeAutoPan.js";
-import { DockLayoutDashboard as Ve, DockLayers as Ge, DockRegion as Ue, DockText as qe, DockMessageSquare as ze } from "../icons/DockIcons.js";
-var je = /* @__PURE__ */ X("<button type=button class=workbench-dock__item>"), Je = /* @__PURE__ */ X('<button type=button class="workbench-dock__item workbench-dock__action">'), Qe = /* @__PURE__ */ X('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Ze = /* @__PURE__ */ X("<span class=workbench-dock__external-placeholder aria-hidden=true>"), et = /* @__PURE__ */ X('<div 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>'), tt = /* @__PURE__ */ X("<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>"), nt = /* @__PURE__ */ X("<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 fe = 5, ot = 1e3, rt = ".workbench-dock", te = [{
+import { Plus as pe } from "../icons/index.js";
+import { startHotInteraction as Be } from "../../utils/hotInteraction.js";
+import { startPointerSession as He } from "../ui/pointerSession.js";
+import { clientToCanvasWorld as We } from "../ui/canvasGeometry.js";
+import { createWorkbenchWidgetFrame as Ne } from "./workbenchHelpers.js";
+import { getWidgetEntry as Ke } from "./widgets/widgetRegistry.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as be, frameFromElement as _e, createWorkbenchEdgeAutoPanController as Ve } from "./workbenchEdgeAutoPan.js";
+import { DockLayoutDashboard as Ge, DockLayers as Ue, DockRegion as qe, DockText as ze, DockMessageSquare as je } from "../icons/DockIcons.js";
+var Je = /* @__PURE__ */ X("<button type=button class=workbench-dock__item>"), Qe = /* @__PURE__ */ X('<button type=button class="workbench-dock__item workbench-dock__action">'), Ze = /* @__PURE__ */ X('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), et = /* @__PURE__ */ X("<span class=workbench-dock__external-placeholder aria-hidden=true>"), tt = /* @__PURE__ */ X('<div 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>'), nt = /* @__PURE__ */ X("<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>"), ot = /* @__PURE__ */ X("<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 fe = 5, rt = 1e3, it = ".workbench-dock", te = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
-  icon: Ve
+  icon: Ge
 }, {
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: Ge
-}], it = [{
+  icon: Ue
+}], at = [{
   tool: "sticky-note",
   label: "Sticky",
-  icon: ze
-}], at = [{
+  icon: je
+}], lt = [{
   tool: "background-region",
   label: "Region",
-  icon: Ue
+  icon: qe
 }, {
   tool: "text",
   label: "Text",
-  icon: qe
+  icon: ze
 }];
-function lt(e) {
+function ct(e) {
   const a = e?.closest(".workbench-surface")?.querySelector(be);
   return a instanceof HTMLElement ? _e(a) : null;
 }
 function ne(e, s, a) {
   return e >= a.left && e <= a.right && s >= a.top && s <= a.bottom;
 }
-function ct(e, s, a) {
+function st(e, s, a) {
   return a ? ne(e, s, a) : !1;
 }
 function me(e, s, a) {
   return Math.min(a, Math.max(s, e));
 }
-function st(e, s, a, l, r) {
+function dt(e, s, a, l, r) {
   if (!e) return !1;
   if (ne(s, a, e) || ne(l, r, e))
     return !0;
@@ -63,7 +63,7 @@ function st(e, s, a, l, r) {
 function we(e, s, a) {
   if (!a || typeof document.elementFromPoint != "function") return !1;
   const l = document.elementFromPoint(e, s);
-  return l instanceof Element && l.closest(rt) === a;
+  return l instanceof Element && l.closest(it) === a;
 }
 function he(e) {
   const s = () => e.hoverOffset === -1 ? {
@@ -86,7 +86,7 @@ function he(e) {
     r.button === 0 && e.onDragBegin(r, e.kind, e.id, e.label, e.icon, r.currentTarget, e.canvasPlacement, null);
   };
   return (() => {
-    var r = je();
+    var r = Je();
     return r.$$pointerdown = l, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), h(r, c($.span, {
       class: "workbench-dock__tile",
       get animate() {
@@ -137,14 +137,14 @@ function he(e) {
     }), r;
   })();
 }
-function dt(e) {
+function ut(e) {
   const s = () => e.hoverOffset === -1, a = () => ({
     scale: 1,
     y: 0,
     x: 0
   }), l = e.action.icon;
   return (() => {
-    var r = Je();
+    var r = Qe();
     return r.$$click = (i) => e.action.onActivate(i.currentTarget), r.addEventListener("dragstart", (i) => i.preventDefault()), ke(r, "pointerleave", e.onLeave), ke(r, "pointerenter", e.onEnter), y(r, "draggable", !1), h(r, c($.span, {
       class: "workbench-dock__tile",
       get animate() {
@@ -190,8 +190,8 @@ function dt(e) {
     }), r;
   })();
 }
-function Pt(e) {
-  const [s, a] = ee(null), [l, r] = ee(null), [i, D] = ee(!1);
+function Lt(e) {
+  const [s, a] = Z(null), [l, r] = Z(null), [i, D] = Z(!1);
   let v, E, g, b, C = null;
   U(() => {
     b?.stop(), E?.stop({
@@ -225,7 +225,7 @@ function Pt(e) {
   }, A = () => {
     b?.stop(), b = void 0, C = null;
   }, N = () => {
-    !e.viewport || !e.onViewportCommit || (C = e.viewport, b?.stop(), b = Ke({
+    !e.viewport || !e.onViewportCommit || (C = e.viewport, b?.stop(), b = Ve({
       readFrame: () => {
         const n = v?.closest(".workbench-surface")?.querySelector(be);
         return n instanceof HTMLElement ? _e(n) : null;
@@ -264,7 +264,7 @@ function Pt(e) {
       return;
     }
     if (t && n.overCanvas && n.canvasPlacement) {
-      const S = n.canvasFrame && P ? He(n.canvasFrame, P, {
+      const S = n.canvasFrame && P ? We(n.canvasFrame, P, {
         clientX: n.clientX,
         clientY: n.clientY
       }) : null, o = n.canvasFrame ? {
@@ -276,12 +276,12 @@ function Pt(e) {
       } : void 0;
       n.canvasPlacement.onDrop(n.clientX, n.clientY, o);
     }
-  }, j = (t, n, f, P, S, o, _, w) => {
+  }, z = (t, n, f, P, S, o, _, w) => {
     t.preventDefault(), E?.stop({
       reason: "manual_stop",
       commit: !1
     }), N();
-    const u = lt(v);
+    const u = ct(v);
     r({
       kind: n,
       id: f,
@@ -299,7 +299,7 @@ function Pt(e) {
       preview: null,
       canvasPlacement: _,
       dockDrop: w,
-      stopInteraction: pe({
+      stopInteraction: Be({
         kind: "drag",
         cursor: "grabbing"
       }),
@@ -318,14 +318,14 @@ function Pt(e) {
           }, ue = (ve) => {
             ve.preventDefault(), ve.stopImmediatePropagation(), B();
           }, ge = () => B(), Me = () => {
-            p !== void 0 && window.clearTimeout(p), p = window.setTimeout(B, ot);
+            p !== void 0 && window.clearTimeout(p), p = window.setTimeout(B, rt);
           };
           m.trigger.addEventListener("click", ue, !0), window.addEventListener("pointerdown", ge, !0), g = {
             clear: B,
             expire: Me
           };
         }
-        const G = we(d.clientX, d.clientY, v), I = m.canvasFrame, ce = x && ct(d.clientX, d.clientY, I), se = ce && !G, Te = x && !G && st(I, m.clientX, m.clientY, d.clientX, d.clientY), de = m.hasEnteredCanvas || ce || Te;
+        const G = we(d.clientX, d.clientY, v), I = m.canvasFrame, ce = x && st(d.clientX, d.clientY, I), se = ce && !G, Te = x && !G && dt(I, m.clientX, m.clientY, d.clientX, d.clientY), de = m.hasEnteredCanvas || ce || Te;
         T = x && de && !G;
         const xe = I ? me(d.clientX, I.left, I.right) : d.clientX, ye = I ? me(d.clientY, I.top, I.bottom) : d.clientY;
         return {
@@ -348,7 +348,7 @@ function Pt(e) {
         };
       }), T && b?.updatePointer(d.clientX, d.clientY);
     };
-    E = Be({
+    E = He({
       pointerEvent: t,
       captureEl: t.currentTarget,
       onMove: L,
@@ -370,11 +370,11 @@ function Pt(e) {
     },
     onDrop: (n, f, P) => {
       if (!P?.worldPoint) return;
-      const S = Ne(t.widgetType, e.widgetDefinitions);
+      const S = Ke(t.widgetType, e.widgetDefinitions);
       t.onDrop({
         widgetType: t.widgetType,
         centerWorld: P.worldPoint,
-        frame: We(S, {
+        frame: Ne(S, {
           anchor: "center",
           worldX: P.worldPoint.worldX,
           worldY: P.worldPoint.worldY
@@ -382,19 +382,19 @@ function Pt(e) {
       });
     }
   } : null, De = (t, n) => {
-    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (g?.clear(), g = void 0, j(t, "external", n.id, n.label, n.icon, t.currentTarget, oe(n.canvasPlacement), n.onDropToDock ?? null));
+    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (g?.clear(), g = void 0, z(t, "external", n.id, n.label, n.icon, t.currentTarget, oe(n.canvasPlacement), n.onDropToDock ?? null));
   };
   q(() => {
     e.registerExternalDockDragController?.({
       begin: De
     }), U(() => e.registerExternalDockDragController?.(null));
   });
-  const Ce = () => l()?.kind === "widget" ? l().id : null, Pe = () => l()?.kind === "tool" ? l().id : null, Le = () => l()?.kind === "external" ? l()?.icon : void 0, O = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", re = H(() => te.find((t) => t.mode === O()) ?? te[0]), ie = H(() => O() === "background" ? at.map((t) => ({
+  const Ce = () => l()?.kind === "widget" ? l().id : null, Pe = () => l()?.kind === "tool" ? l().id : null, Le = () => l()?.kind === "external" ? l()?.icon : void 0, O = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", re = H(() => te.find((t) => t.mode === O()) ?? te[0]), ie = H(() => O() === "background" ? lt.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...it.map((t) => ({
+  })) : [...at.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -404,18 +404,18 @@ function Pt(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), ae = H(() => O() === "background" ? [] : [...e.dockItems ?? []]), K = H(() => O() === "background" ? [] : [...e.dockActions ?? []]), le = H(() => ie().map((t) => String(t.id))), J = () => O() !== "background", Se = (t) => !J() || e.filters[t] !== !1, Ie = (t) => {
-    if (!J())
+  }))]), ae = H(() => O() === "background" ? [] : [...e.dockItems ?? []]), K = H(() => O() === "background" ? [] : [...e.dockActions ?? []]), le = H(() => ie().map((t) => String(t.id))), j = () => O() !== "background", Se = (t) => !j() || e.filters[t] !== !1, Ie = (t) => {
+    if (!j())
       return !1;
     const n = le();
     return n.length > 1 && n.every((f) => e.filters[f] !== !1 == (f === t));
-  }, Q = () => s() === 0, Oe = () => ({
+  }, J = () => s() === 0, Oe = () => ({
     scale: 1,
     y: 0,
     x: 0
   });
   return [(() => {
-    var t = et(), n = t.firstChild, f = n.firstChild, P = n.nextSibling;
+    var t = tt(), n = t.firstChild, f = n.firstChild, P = n.nextSibling;
     t.addEventListener("pointerleave", () => a(null));
     var S = v;
     return typeof S == "function" ? $e(S, t) : v = t, f.$$click = () => D((o) => !o), f.addEventListener("pointerleave", () => a((o) => o === 0 ? null : o)), f.addEventListener("pointerenter", () => a(0)), h(f, c($.span, {
@@ -441,8 +441,8 @@ function Pt(e) {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: Q() && !i() ? 1 : 0,
-          y: Q() && !i() ? -6 : 0
+          opacity: J() && !i() ? 1 : 0,
+          y: J() && !i() ? -6 : 0
         };
       },
       get transition() {
@@ -459,13 +459,13 @@ function Pt(e) {
         return i();
       },
       get children() {
-        var o = Qe();
-        return h(o, c(z, {
+        var o = Ze();
+        return h(o, c(ee, {
           each: te,
           children: (_) => {
             const w = _.icon;
             return (() => {
-              var u = tt(), L = u.firstChild, d = L.nextSibling, T = d.firstChild, m = T.nextSibling;
+              var u = nt(), L = u.firstChild, d = L.nextSibling, T = d.firstChild, m = T.nextSibling;
               return u.$$click = () => {
                 e.onSelectMode?.(_.mode), D(!1);
               }, h(L, c(w, {
@@ -481,14 +481,16 @@ function Pt(e) {
           }
         })), o;
       }
-    }), null), h(t, c(z, {
+    }), null), h(t, c(Re, {
       get each() {
         return K();
       },
       children: (o, _) => {
-        const w = () => _() + 1;
-        return c(dt, {
-          action: o,
+        const w = () => _ + 1;
+        return c(ut, {
+          get action() {
+            return o();
+          },
           get hoverOffset() {
             return k(w());
           },
@@ -501,7 +503,7 @@ function Pt(e) {
         return !!(l()?.kind === "external" && l()?.moved);
       },
       get children() {
-        var o = Ze();
+        var o = et();
         return h(o, c(W, {
           get when() {
             return Le();
@@ -514,7 +516,7 @@ function Pt(e) {
           }
         })), Y(() => o.classList.toggle("is-drop-allowed", !!l()?.overDock)), o;
       }
-    }), P), h(t, c(z, {
+    }), P), h(t, c(ee, {
       get each() {
         return ae();
       },
@@ -540,17 +542,17 @@ function Pt(e) {
             return k(w());
           },
           get isDragging() {
-            return Z(() => l()?.kind === "host")() && l()?.id === o.id;
+            return Q(() => l()?.kind === "host")() && l()?.id === o.id;
           },
           get canvasPlacement() {
             return oe(o.canvasPlacement);
           },
           onEnter: () => a(w()),
           onLeave: () => a((u) => u === w() ? null : u),
-          onDragBegin: j
+          onDragBegin: z
         });
       }
-    }), P), h(t, c(z, {
+    }), P), h(t, c(ee, {
       get each() {
         return ie();
       },
@@ -576,16 +578,16 @@ function Pt(e) {
             return Se(String(o.id));
           },
           get filterable() {
-            return J();
+            return j();
           },
           get hoverOffset() {
             return k(w());
           },
           get isDragging() {
-            return Z(() => o.kind === "widget")() ? Ce() === o.id : Pe() === o.id;
+            return Q(() => o.kind === "widget")() ? Ce() === o.id : Pe() === o.id;
           },
           get canvasPlacement() {
-            return Z(() => o.kind === "widget")() ? {
+            return Q(() => o.kind === "widget")() ? {
               preview: {
                 kind: "widget",
                 id: o.id
@@ -601,11 +603,11 @@ function Pt(e) {
           },
           onEnter: () => a(w()),
           onLeave: () => a((u) => u === w() ? null : u),
-          onDragBegin: j
+          onDragBegin: z
         });
       }
     }), null), Y((o) => {
-      var _ = `workbench-dock workbench-dock-material${l()?.kind === "external" && l()?.moved ? " is-external-drop-target" : ""}${l()?.kind === "external" && l()?.overDock ? " is-external-drop-allowed" : ""}`, w = O() === "background", u = !!(Q() || i()), L = i();
+      var _ = `workbench-dock workbench-dock-material${l()?.kind === "external" && l()?.moved ? " is-external-drop-target" : ""}${l()?.kind === "external" && l()?.overDock ? " is-external-drop-allowed" : ""}`, w = O() === "background", u = !!(J() || i()), L = i();
       return _ !== o.e && Xe(t, o.e = _), w !== o.t && f.classList.toggle("is-active", o.t = w), u !== o.a && f.classList.toggle("is-hovered", o.a = u), L !== o.o && y(f, "aria-expanded", o.o = L), o;
     }, {
       e: void 0,
@@ -618,20 +620,20 @@ function Pt(e) {
       return !!(l()?.moved && !l()?.preview);
     },
     get children() {
-      return c(ut, {
+      return c(gt, {
         state: l
       });
     }
   })];
 }
-function ut(e) {
+function gt(e) {
   const s = () => {
     const r = e.state();
     return r ? `translate3d(${r.clientX + 14}px, ${r.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
   }, a = () => e.state()?.label ?? "", l = () => e.state()?.icon;
   return c(Ae, {
     get children() {
-      var r = nt(), i = r.firstChild, D = i.nextSibling, v = D.firstChild, E = v.nextSibling, g = E.firstChild, b = g.nextSibling, C = b.firstChild;
+      var r = ot(), i = r.firstChild, D = i.nextSibling, v = D.firstChild, E = v.nextSibling, g = E.firstChild, b = g.nextSibling, C = b.firstChild;
       return h(v, c(W, {
         get when() {
           return l();
@@ -642,7 +644,7 @@ function ut(e) {
             class: "w-4 h-4"
           });
         }
-      })), h(g, a), h(b, c(Re, {
+      })), h(g, a), h(b, c(pe, {
         class: "w-3 h-3"
       }), C), h(C, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), Y((k) => {
         var A = !!(e.state()?.kind === "external" && e.state()?.overDock), N = s();
@@ -656,5 +658,5 @@ function ut(e) {
 }
 Fe(["pointerdown", "click"]);
 export {
-  Pt as WorkbenchDock
+  Lt as WorkbenchDock
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.42.1",
+  "version": "0.42.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",