@floegence/floe-webapp-core 0.35.59 → 0.36.1

package/dist/components/ui/InfiniteCanvas.js

@@ -1,14 +1,14 @@
-import { insert as q, effect as G, className as I, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
-import { createSignal as T, untrack as D, createEffect as L, onCleanup as y } from "solid-js";
+import { insert as q, effect as G, className as T, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
+import { createSignal as D, untrack as L, createEffect as b, onCleanup as y } from "solid-js";
 import { cn as Y } from "../../utils/cn.js";
 import { isTypingElement as _ } from "../../utils/dom.js";
-import { startHotInteraction as b } from "../../utils/hotInteraction.js";
+import { startHotInteraction as A } from "../../utils/hotInteraction.js";
 var ne = /* @__PURE__ */ Q('<div><div style="transform-origin:0 0">');
-const re = 1, ie = 0.45, oe = 2.2, ae = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', A = 3;
+const re = 1, ie = 0.45, oe = 2.2, ae = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', M = 3;
 function le(n, a, d) {
   return Math.max(a, Math.min(d, n));
 }
-function M(n) {
+function X(n) {
   return {
     x: Number.isFinite(n.x) ? n.x : 0,
     y: Number.isFinite(n.y) ? n.y : 0,
@@ -19,16 +19,16 @@ function se(n, a) {
   return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (a?.clientHeight ?? window.innerHeight) : n.deltaY;
 }
 function we(n) {
-  const [a, d] = T(D(() => M(n.viewport))), [p, S] = T(null);
+  const [a, d] = D(L(() => X(n.viewport))), [p, S] = D(null);
   let o, f, m = !1, l;
-  const X = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', F = () => n.panSurfaceSelector ?? ce, $ = () => n.minScale ?? ie, k = () => n.maxScale ?? oe, V = () => n.wheelZoomSpeed ?? ae, R = () => {
+  const F = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', k = () => n.panSurfaceSelector ?? ce, $ = () => n.minScale ?? ie, V = () => n.maxScale ?? oe, R = () => n.wheelZoomSpeed ?? ae, N = () => {
     const e = p();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, C = () => {
-    f !== void 0 && (window.clearTimeout(f), f = void 0);
   }, v = () => {
+    f !== void 0 && (window.clearTimeout(f), f = void 0);
+  }, C = () => {
     m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, N = () => {
+  }, U = () => {
     if (typeof window > "u") {
       m = !1;
       return;
@@ -37,47 +37,49 @@ function we(n) {
       l = void 0, m = !1;
     }, 0);
   }, h = (e) => {
-    D(() => n.onViewportChange?.(e));
-  }, U = (e) => {
+    L(() => n.onViewportChange?.(e));
+  }, H = (e) => {
     if (typeof window > "u") {
       h(e);
       return;
     }
-    C(), f = window.setTimeout(() => {
+    v(), f = window.setTimeout(() => {
       f = void 0, h(e);
     }, 90);
-  }, E = (e) => e instanceof Element ? e.closest(X()) ? !0 : _(e) : !1, x = (e) => e instanceof Element ? e.closest(F()) !== null : !1, g = (e) => {
+  }, E = (e) => e instanceof Element ? e.closest(F()) ? !0 : _(e) : !1, P = (e) => e instanceof Element ? e.closest(k()) !== null : !1, g = (e) => {
     const t = p();
     if (!t || e !== void 0 && t.pointerId !== e) return;
     t.stopInteraction?.();
     const r = a();
-    S(null), o && o.hasPointerCapture(t.pointerId) && o.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, N()), h(r);
+    S(null), o && o.hasPointerCapture(t.pointerId) && o.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, U()), h(r);
   };
-  L(() => {
-    p() || d(M(n.viewport));
-  }), L(() => {
+  b(() => {
+    p() || d(X(n.viewport));
+  }), b(() => {
     const e = o;
     if (!e) return;
     const t = (r) => {
-      !m || !x(r.target) || (v(), r.preventDefault(), r.stopPropagation());
+      !m || !P(r.target) || (C(), r.preventDefault(), r.stopPropagation());
     };
-    e.addEventListener("click", t, !0), y(() => {
-      e.removeEventListener("click", t, !0);
+    e.addEventListener("click", t, !0), e.addEventListener("wheel", x, {
+      passive: !1
+    }), y(() => {
+      e.removeEventListener("click", t, !0), e.removeEventListener("wheel", x);
     });
   }), y(() => {
-    C(), g(), v();
+    v(), g(), C();
   });
-  const H = (e) => {
-    if (e.button !== 0 || _(e.target)) return;
-    const t = x(e.target);
-    E(e.target) && !t || (C(), v(), t || (e.preventDefault(), o?.setPointerCapture(e.pointerId)), S({
+  const Z = (e) => {
+    if (e.button !== 0 || _(e.target) || n.disablePanZoom) return;
+    const t = P(e.target);
+    E(e.target) && !t || (v(), C(), t || (e.preventDefault(), o?.setPointerCapture(e.pointerId)), S({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
       startViewport: a(),
       moved: !1,
       startedFromPanSurface: t,
-      stopInteraction: t ? void 0 : b({
+      stopInteraction: t ? void 0 : A({
         kind: "drag",
         cursor: "grabbing"
       })
@@ -86,7 +88,7 @@ function we(n) {
     const t = p();
     if (!t || t.pointerId !== e.pointerId) return;
     const r = e.clientX - t.startClientX, i = e.clientY - t.startClientY;
-    if (!(t.moved || Math.abs(r) > A || Math.abs(i) > A)) return;
+    if (!(t.moved || Math.abs(r) > M || Math.abs(i) > M)) return;
     t.moved || (e.preventDefault(), o?.hasPointerCapture(e.pointerId) || o?.setPointerCapture(e.pointerId));
     const u = {
       ...t.startViewport,
@@ -96,27 +98,31 @@ function we(n) {
     t.moved || S({
       ...t,
       moved: !0,
-      stopInteraction: t.stopInteraction ?? b({
+      stopInteraction: t.stopInteraction ?? A({
         kind: "drag",
         cursor: "grabbing"
       })
     }), d(u);
   }, W = (e) => {
     g(e.pointerId);
-  }, Z = (e) => {
-    g(e.pointerId);
   }, B = (e) => {
+    g(e.pointerId);
+  }, x = (e) => {
     const t = o?.getBoundingClientRect();
     if (!t) return;
+    if (n.disablePanZoom) {
+      e.preventDefault();
+      return;
+    }
     e.preventDefault();
-    const r = a(), i = e.clientX - t.left, c = e.clientY - t.top, u = se(e, o), s = le(r.scale * Math.exp(-u * V()), $(), k());
+    const r = a(), i = e.clientX - t.left, c = e.clientY - t.top, u = se(e, o), s = le(r.scale * Math.exp(-u * R()), $(), V());
     if (Math.abs(s - r.scale) < 1e-4) return;
-    const w = (i - r.x) / r.scale, j = (c - r.y) / r.scale, P = {
+    const w = (i - r.x) / r.scale, j = (c - r.y) / r.scale, I = {
       x: i - w * s,
       y: c - j * s,
       scale: s
     };
-    d(P), U(P);
+    d(I), H(I);
   }, z = (e) => {
     if (E(e.target)) return;
     const t = o?.getBoundingClientRect();
@@ -134,11 +140,11 @@ function we(n) {
   };
   return (() => {
     var e = ne(), t = e.firstChild;
-    e.$$contextmenu = z, e.addEventListener("wheel", B), e.addEventListener("pointercancel", Z), e.$$pointerup = W, e.$$pointermove = O, e.$$pointerdown = H;
+    e.$$contextmenu = z, e.addEventListener("pointercancel", B), e.$$pointerup = W, e.$$pointermove = O, e.$$pointerdown = Z;
     var r = o;
     return typeof r == "function" ? ee(r, e) : o = e, q(t, () => n.children), G((i) => {
-      var c = Y("floe-infinite-canvas", R() && "is-panning", n.class), u = n.ariaLabel ?? "Infinite canvas", s = Y("floe-infinite-canvas__viewport", n.contentClass), w = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
-      return c !== i.e && I(e, i.e = c), u !== i.t && J(e, "aria-label", i.t = u), s !== i.a && I(t, i.a = s), w !== i.o && K(t, "transform", i.o = w), i;
+      var c = Y("floe-infinite-canvas", N() && "is-panning", n.disablePanZoom && "is-locked", n.class), u = n.ariaLabel ?? "Infinite canvas", s = Y("floe-infinite-canvas__viewport", n.contentClass), w = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
+      return c !== i.e && T(e, i.e = c), u !== i.t && J(e, "aria-label", i.t = u), s !== i.a && T(t, i.a = s), w !== i.o && K(t, "transform", i.o = w), i;
     }, {
       e: void 0,
       t: void 0,

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

@@ -0,0 +1,29 @@
+import { type InfiniteCanvasContextMenuEvent } from '../../ui';
+import type { WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchCanvasProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
+    widgets: readonly WorkbenchWidgetItem[];
+    viewport: WorkbenchViewport;
+    selectedWidgetId: string | null;
+    optimisticFrontWidgetId: string | null;
+    topZIndex: number;
+    locked: boolean;
+    filters: Record<WorkbenchWidgetType, boolean>;
+    setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;
+    onViewportCommit: (viewport: WorkbenchViewport) => void;
+    onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
+    onSelectWidget: (widgetId: string) => void;
+    onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
+    onStartOptimisticFront: (widgetId: string) => void;
+    onCommitFront: (widgetId: string) => void;
+    onCommitMove: (widgetId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCommitResize: (widgetId: string, size: {
+        width: number;
+        height: number;
+    }) => void;
+    onRequestDelete: (widgetId: string) => void;
+}
+export declare function WorkbenchCanvas(props: WorkbenchCanvasProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -0,0 +1,83 @@
+import { use as d, insert as a, createComponent as i, effect as l, template as c } from "solid-js/web";
+import { For as g } from "solid-js";
+import { WorkbenchWidget as u } from "./WorkbenchWidget.js";
+import { getWidgetEntry as m } from "./widgets/widgetRegistry.js";
+import { InfiniteCanvas as v } from "../ui/InfiniteCanvas.js";
+var s = /* @__PURE__ */ c("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>"), f = /* @__PURE__ */ c("<div class=workbench-canvas>");
+function b(e) {
+  return (() => {
+    var t = f(), o = e.setCanvasFrameRef;
+    return typeof o == "function" ? d(o, t) : e.setCanvasFrameRef = t, a(t, i(v, {
+      ariaLabel: "Workbench canvas",
+      class: "workbench-canvas__infinite",
+      get viewport() {
+        return e.viewport;
+      },
+      get onViewportChange() {
+        return e.onViewportCommit;
+      },
+      get onCanvasContextMenu() {
+        return e.onCanvasContextMenu;
+      },
+      get disablePanZoom() {
+        return e.locked;
+      },
+      get children() {
+        var r = s();
+        return r.firstChild, a(r, i(g, {
+          get each() {
+            return e.widgets;
+          },
+          children: (n) => i(u, {
+            get definition() {
+              return m(n.type, e.widgetDefinitions);
+            },
+            item: n,
+            get selected() {
+              return e.selectedWidgetId === n.id;
+            },
+            get optimisticFront() {
+              return e.optimisticFrontWidgetId === n.id;
+            },
+            get topZIndex() {
+              return e.topZIndex;
+            },
+            get viewportScale() {
+              return e.viewport.scale;
+            },
+            get locked() {
+              return e.locked;
+            },
+            get filtered() {
+              return !e.filters[n.type];
+            },
+            get onSelect() {
+              return e.onSelectWidget;
+            },
+            get onContextMenu() {
+              return e.onWidgetContextMenu;
+            },
+            get onStartOptimisticFront() {
+              return e.onStartOptimisticFront;
+            },
+            get onCommitFront() {
+              return e.onCommitFront;
+            },
+            get onCommitMove() {
+              return e.onCommitMove;
+            },
+            get onCommitResize() {
+              return e.onCommitResize;
+            },
+            get onRequestDelete() {
+              return e.onRequestDelete;
+            }
+          })
+        }), null), r;
+      }
+    })), l(() => t.classList.toggle("is-locked", !!e.locked)), t;
+  })();
+}
+export {
+  b as WorkbenchCanvas
+};

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

@@ -0,0 +1,24 @@
+import { type Component } from 'solid-js';
+type WorkbenchContextMenuActionItem = Readonly<{
+    id: string;
+    kind: 'action';
+    label: string;
+    icon: Component<{
+        class?: string;
+    }>;
+    onSelect: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}>;
+type WorkbenchContextMenuSeparatorItem = Readonly<{
+    id: string;
+    kind: 'separator';
+}>;
+export type WorkbenchContextMenuItem = WorkbenchContextMenuActionItem | WorkbenchContextMenuSeparatorItem;
+export interface WorkbenchContextMenuProps {
+    x: number;
+    y: number;
+    items: readonly WorkbenchContextMenuItem[];
+}
+export declare function WorkbenchContextMenu(props: WorkbenchContextMenuProps): import("solid-js").JSX.Element;
+export {};

package/dist/components/workbench/WorkbenchContextMenu.js

@@ -0,0 +1,44 @@
+import { insert as a, createComponent as d, addEventListener as b, effect as v, className as f, setStyleProperty as m, template as l, delegateEvents as h } from "solid-js/web";
+import { For as x } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
+var _ = /* @__PURE__ */ l("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), p = /* @__PURE__ */ l("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), w = /* @__PURE__ */ l("<button type=button role=menuitem><span class=workbench-context-menu__label>");
+function $(n) {
+  return n.kind === "action";
+}
+function E(n) {
+  return (() => {
+    var r = _();
+    return r.$$contextmenu = (e) => e.preventDefault(), a(r, d(x, {
+      get each() {
+        return n.items;
+      },
+      children: (e) => {
+        if (!$(e))
+          return p();
+        const c = e.icon;
+        return (() => {
+          var t = w(), i = t.firstChild;
+          return b(t, "click", e.onSelect, !0), a(t, d(c, {
+            class: "h-3.5 w-3.5"
+          }), i), a(i, () => e.label), v((o) => {
+            var u = k("workbench-context-menu__item", e.destructive && "is-destructive"), s = e.disabled;
+            return u !== o.e && f(t, o.e = u), s !== o.t && (t.disabled = o.t = s), o;
+          }, {
+            e: void 0,
+            t: void 0
+          }), t;
+        })();
+      }
+    })), v((e) => {
+      var c = `${n.x}px`, t = `${n.y}px`;
+      return c !== e.e && m(r, "left", e.e = c), t !== e.t && m(r, "top", e.t = t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+h(["contextmenu", "click"]);
+export {
+  E as WorkbenchContextMenu
+};

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

@@ -0,0 +1,17 @@
+import { type JSX } from 'solid-js';
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchFilterBarProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
+    widgets: readonly WorkbenchWidgetItem[];
+    filters: Record<WorkbenchWidgetType, boolean>;
+    /** Solo a single widget type — only this type remains visible. */
+    onSoloFilter: (type: WorkbenchWidgetType) => void;
+    /** Reset filters so every widget type is visible again. */
+    onShowAll: () => void;
+    /**
+     * 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;
+}
+export declare function WorkbenchFilterBar(props: WorkbenchFilterBarProps): JSX.Element;

package/dist/components/workbench/WorkbenchFilterBar.js

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

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

@@ -0,0 +1,6 @@
+export interface WorkbenchHudProps {
+    scaleLabel: string;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+}
+export declare function WorkbenchHud(props: WorkbenchHudProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchHud.js

@@ -0,0 +1,17 @@
+import { insert as n, createComponent as c, template as i, delegateEvents as r } from "solid-js/web";
+import { Minus as u, Plus as s } from "../icons/index.js";
+var b = /* @__PURE__ */ i('<div class=workbench-hud data-floe-canvas-interactive=true><button type=button class=workbench-hud__button aria-label="Zoom out"></button><div class=workbench-hud__scale></div><button type=button class=workbench-hud__button aria-label="Zoom in">');
+function m(t) {
+  return (() => {
+    var o = b(), e = o.firstChild, l = e.nextSibling, a = l.nextSibling;
+    return e.$$click = () => t.onZoomOut(), n(e, c(u, {
+      class: "w-3.5 h-3.5"
+    })), n(l, () => t.scaleLabel), a.$$click = () => t.onZoomIn(), n(a, c(s, {
+      class: "w-3.5 h-3.5"
+    })), o;
+  })();
+}
+r(["click"]);
+export {
+  m as WorkbenchHud
+};

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

@@ -0,0 +1,6 @@
+export interface WorkbenchLockButtonProps {
+    locked: boolean;
+    onToggle: () => void;
+    shortcutLabel?: string;
+}
+export declare function WorkbenchLockButton(props: WorkbenchLockButtonProps): import("solid-js").JSX.Element;