@floegence/floe-webapp-core 0.36.42 → 0.36.43

package/dist/components/workbench/WorkbenchFilterBar.js

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