@floegence/floe-webapp-core 0.35.58 → 0.36.0

package/dist/components/deck/DeckTopBar.js

@@ -1,103 +1,103 @@
-import { insert as n, createComponent as o, effect as g, className as h, Portal as N, setStyleProperty as _, memo as k, template as l, use as F, delegateEvents as I } from "solid-js/web";
-import { createSignal as C, createEffect as M, onCleanup as T, Show as d, For as K } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-import { useDeck as j } from "../../context/DeckContext.js";
-import { useResolvedFloeConfig as q } from "../../context/FloeConfigContext.js";
-import { useLayout as G } from "../../context/LayoutContext.js";
-import { useWidgetRegistry as H } from "../../context/WidgetRegistry.js";
-import { deferNonBlocking as P } from "../../utils/defer.js";
-import { LayoutSelector as J } from "./LayoutSelector.js";
-import { Plus as O, ChevronDown as Q, Copy as U, Check as V, Pencil as X } from "../icons/index.js";
-var Y = /* @__PURE__ */ l("<button><span>Add"), Z = /* @__PURE__ */ l('<div class="fixed inset-0 z-[9998]">'), ee = /* @__PURE__ */ l('<div class="px-3 py-4 text-xs text-muted-foreground text-center">No widgets available'), te = /* @__PURE__ */ l("<div><div class=p-1>"), re = /* @__PURE__ */ l('<button title="Duplicate &amp; edit"><span>Duplicate &amp; Edit'), oe = /* @__PURE__ */ l("<span>Done"), ne = /* @__PURE__ */ l("<button>"), ie = /* @__PURE__ */ l('<div><div class="w-px h-3.5 bg-border/40"></div><div class=flex-1>'), le = /* @__PURE__ */ l('<button class="w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class=text-xs>'), se = /* @__PURE__ */ l('<div class="w-4 h-4">'), ae = /* @__PURE__ */ l("<span>Edit");
-function be($) {
-  const D = q(), s = j(), E = G(), w = H(), [v, m] = C(!1), [y, L] = C({
+import { insert as i, createComponent as o, effect as h, className as x, Portal as W, setStyleProperty as _, template as l, use as B, delegateEvents as z } from "solid-js/web";
+import { createSignal as k, createEffect as A, onCleanup as N, Show as p, For as F } from "solid-js";
+import { cn as f } from "../../utils/cn.js";
+import { useDeck as I } from "../../context/DeckContext.js";
+import { useResolvedFloeConfig as T } from "../../context/FloeConfigContext.js";
+import { useLayout as K } from "../../context/LayoutContext.js";
+import { useWidgetRegistry as j } from "../../context/WidgetRegistry.js";
+import { deferNonBlocking as C } from "../../utils/defer.js";
+import { LayoutSelector as q } from "./LayoutSelector.js";
+import { Plus as G, ChevronDown as H, Copy as J } from "../icons/index.js";
+var O = /* @__PURE__ */ l("<button><span>Add"), Q = /* @__PURE__ */ l('<div class="fixed inset-0 z-[9998]">'), U = /* @__PURE__ */ l('<div class="px-3 py-4 text-xs text-muted-foreground text-center">No widgets available'), V = /* @__PURE__ */ l("<div><div class=p-1>"), X = /* @__PURE__ */ l('<button title="Duplicate &amp; edit"><span>Duplicate &amp; Edit'), Y = /* @__PURE__ */ l('<div><div class="w-px h-3.5 bg-border/40"></div><div class=flex-1>'), Z = /* @__PURE__ */ l('<button class="w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-muted transition-colors text-left cursor-pointer"><span class=text-xs>'), ee = /* @__PURE__ */ l('<div class="w-4 h-4">');
+function ue($) {
+  const P = T(), c = I();
+  K();
+  const b = j(), [m, g] = k(!1), [w, D] = k({
     top: 0,
     left: 0
   });
-  let x;
-  const S = () => E.isMobile(), b = () => (D.config.deck.presetsMode ?? "mutable") === "immutable" && !!s.activeLayout()?.isPreset, R = (r, i) => {
-    r.stopPropagation(), r.preventDefault(), m(!1), P(() => s.addWidget(i));
-  }, W = (r) => {
-    if (r.stopPropagation(), r.preventDefault(), !v() && x) {
-      const i = x.getBoundingClientRect();
-      L({
-        top: i.bottom + 4,
-        left: i.left
+  let v;
+  const y = () => (P.config.deck.presetsMode ?? "mutable") === "immutable" && !!c.activeLayout()?.isPreset, E = (r, n) => {
+    r.stopPropagation(), r.preventDefault(), g(!1), C(() => c.addWidget(n));
+  }, L = (r) => {
+    if (r.stopPropagation(), r.preventDefault(), !m() && v) {
+      const n = v.getBoundingClientRect();
+      D({
+        top: n.bottom + 4,
+        left: n.left
       });
     }
-    m((i) => !i);
-  }, B = () => {
-    m(!1);
+    g((n) => !n);
+  }, M = () => {
+    g(!1);
   };
-  return M(() => {
-    s.editMode() || m(!1);
-  }), M(() => {
-    if (!v() || typeof document > "u") return;
-    const r = (i) => {
-      i.key === "Escape" && m(!1);
+  return A(() => {
+    if (!m() || typeof document > "u") return;
+    const r = (n) => {
+      n.key === "Escape" && g(!1);
     };
-    document.addEventListener("keydown", r), T(() => document.removeEventListener("keydown", r));
+    document.addEventListener("keydown", r), N(() => document.removeEventListener("keydown", r));
   }), (() => {
-    var r = ie(), i = r.firstChild, z = i.nextSibling;
-    return n(r, o(J, {}), i), n(r, o(d, {
+    var r = Y(), n = r.firstChild, S = n.nextSibling;
+    return i(r, o(q, {}), n), i(r, o(p, {
       get when() {
-        return k(() => !!s.editMode())() && !b();
+        return !y();
       },
       get children() {
         return [(() => {
-          var e = Y(), c = e.firstChild;
-          e.$$click = W;
-          var t = x;
-          return typeof t == "function" ? F(t, e) : x = e, n(e, o(O, {
+          var e = O(), s = e.firstChild;
+          e.$$click = L;
+          var t = v;
+          return typeof t == "function" ? B(t, e) : v = e, i(e, o(G, {
             class: "w-2.5 h-2.5"
-          }), c), n(e, o(Q, {
+          }), s), i(e, o(H, {
             get class() {
-              return p("w-2.5 h-2.5 opacity-50 transition-transform", v() && "rotate-180");
+              return f("w-2.5 h-2.5 opacity-50 transition-transform", m() && "rotate-180");
             }
-          }), null), g(() => h(e, p("flex items-center gap-1 px-1.5 h-5 rounded text-[10px]", "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50", "transition-colors cursor-pointer"))), e;
-        })(), o(d, {
+          }), null), h(() => x(e, f("flex items-center gap-1 px-1.5 h-5 rounded text-[10px]", "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50", "transition-colors cursor-pointer"))), e;
+        })(), o(p, {
           get when() {
-            return v();
+            return m();
           },
           get children() {
-            return o(N, {
+            return o(W, {
               get children() {
                 return [(() => {
-                  var e = Z();
-                  return e.$$click = B, e;
+                  var e = Q();
+                  return e.$$click = M, e;
                 })(), (() => {
-                  var e = te(), c = e.firstChild;
-                  return n(c, o(K, {
+                  var e = V(), s = e.firstChild;
+                  return i(s, o(F, {
                     get each() {
-                      return Array.from(w.widgets().values());
+                      return Array.from(b.widgets().values());
                     },
                     children: (t) => (() => {
-                      var a = le(), f = a.firstChild;
-                      return a.$$click = (u) => R(u, t.type), n(a, o(d, {
+                      var a = Z(), u = a.firstChild;
+                      return a.$$click = (d) => E(d, t.type), i(a, o(p, {
                         get when() {
                           return t.icon;
                         },
                         get fallback() {
-                          return se();
+                          return ee();
                         },
-                        children: (u) => {
-                          const A = u();
-                          return o(A, {
+                        children: (d) => {
+                          const R = d();
+                          return o(R, {
                             class: "w-4 h-4 text-muted-foreground"
                           });
                         }
-                      }), f), n(f, () => t.name), a;
+                      }), u), i(u, () => t.name), a;
                     })()
-                  }), null), n(c, o(d, {
+                  }), null), i(s, o(p, {
                     get when() {
-                      return w.widgets().size === 0;
+                      return b.widgets().size === 0;
                     },
                     get children() {
-                      return ee();
+                      return U();
                     }
-                  }), null), g((t) => {
-                    var a = p("fixed z-[9999]", "min-w-[180px] max-h-[300px] overflow-y-auto", "bg-popover border border-border rounded-md shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150"), f = `${y().top}px`, u = `${Math.max(8, y().left)}px`;
-                    return a !== t.e && h(e, t.e = a), f !== t.t && _(e, "top", t.t = f), u !== t.a && _(e, "left", t.a = u), t;
+                  }), null), h((t) => {
+                    var a = f("fixed z-[9999]", "min-w-[180px] max-h-[300px] overflow-y-auto", "bg-popover border border-border rounded-md shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150"), u = `${w().top}px`, d = `${Math.max(8, w().left)}px`;
+                    return a !== t.e && x(e, t.e = a), u !== t.t && _(e, "top", t.t = u), d !== t.a && _(e, "left", t.a = d), t;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -109,47 +109,25 @@ function be($) {
           }
         })];
       }
-    }), z), n(r, o(d, {
+    }), S), i(r, o(p, {
       get when() {
-        return b();
+        return y();
       },
       get children() {
-        var e = re(), c = e.firstChild;
+        var e = X(), s = e.firstChild;
         return e.$$click = () => {
-          const t = s.activeLayout();
-          t && P(() => {
-            s.duplicateLayout(t.id, `${t.name} (Copy)`), s.setEditMode(!0);
+          const t = c.activeLayout();
+          t && C(() => {
+            c.duplicateLayout(t.id, `${t.name} (Copy)`), c.setEditMode(!0);
           });
-        }, n(e, o(U, {
+        }, i(e, o(J, {
           class: "w-2.5 h-2.5"
-        }), c), g(() => h(e, p("flex items-center gap-1 px-1.5 h-5 rounded text-[10px]", "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50", "transition-colors cursor-pointer"))), e;
+        }), s), h(() => x(e, f("flex items-center gap-1 px-1.5 h-5 rounded text-[10px]", "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50", "transition-colors cursor-pointer"))), e;
       }
-    }), null), n(r, o(d, {
-      get when() {
-        return k(() => !S())() && !b();
-      },
-      get children() {
-        var e = ne();
-        return e.$$click = () => s.toggleEditMode(), n(e, o(d, {
-          get when() {
-            return s.editMode();
-          },
-          get fallback() {
-            return [o(X, {
-              class: "w-2.5 h-2.5"
-            }), ae()];
-          },
-          get children() {
-            return [o(V, {
-              class: "w-2.5 h-2.5"
-            }), oe()];
-          }
-        })), g(() => h(e, p("flex items-center gap-1 px-1.5 h-5 rounded text-[10px] transition-colors cursor-pointer", s.editMode() ? "bg-primary text-primary-foreground hover:bg-primary/90" : "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50"))), e;
-      }
-    }), null), n(r, () => $.actions, null), g(() => h(r, p("deck-topbar flex items-center gap-1.5 h-7 px-2", "bg-gradient-to-b from-background to-background/95", "border-b border-border/30", $.class))), r;
+    }), null), i(r, () => $.actions, null), h(() => x(r, f("deck-topbar flex items-center gap-1.5 h-7 px-2", "bg-gradient-to-b from-background to-background/95", "border-b border-border/30", $.class))), r;
   })();
 }
-I(["click"]);
+z(["click"]);
 export {
-  be as DeckTopBar
+  ue as DeckTopBar
 };

package/dist/components/deck/WidgetFrame.d.ts

@@ -9,6 +9,12 @@ export interface WidgetFrameProps {
     children: JSX.Element;
 }
 /**
- * Widget chrome with header, drag handle, and resize handles
+ * Widget chrome with header drag-handle and resize handles.
+ *
+ * The header is a persistent, always-on drag handle (notes-style): the grip
+ * icon + title region carries `data-widget-drag-handle`, so dragging the
+ * header moves the widget while the widget body stays fully interactive.
+ * The widget body never blocks pointer events — autosave on every commit
+ * means there's no "edit / done" toggle to gate interactions with.
  */
 export declare function WidgetFrame(props: WidgetFrameProps): JSX.Element;

package/dist/components/deck/WidgetFrame.js

@@ -1,109 +1,117 @@
-import { insert as r, createComponent as e, effect as h, className as v, template as c, delegateEvents as x } from "solid-js/web";
+import { insert as i, createComponent as r, effect as x, className as b, setAttribute as $, template as a, delegateEvents as y } from "solid-js/web";
 import { Show as l } from "solid-js";
-import { cn as $ } from "../../utils/cn.js";
-import { useDeck as _ } from "../../context/DeckContext.js";
-import { GripVertical as b, X as k } from "../icons/index.js";
-import { WidgetResizeHandle as i } from "./WidgetResizeHandle.js";
-import { WidgetTypeSwitcher as C } from "./WidgetTypeSwitcher.js";
-var D = /* @__PURE__ */ c("<div class=text-muted-foreground/50>"), W = /* @__PURE__ */ c('<button class="p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors cursor-pointer pointer-events-auto"title="Remove widget">'), y = /* @__PURE__ */ c('<div class="h-full flex flex-col"><div><span class="flex-1 text-xs font-medium text-foreground truncate"></span></div><div class="flex-1 min-h-0 overflow-auto">');
-function H(t) {
-  const w = _(), o = () => w.editMode(), m = () => t.widget.title ?? t.widgetDef?.name ?? t.widget.type, a = (g) => {
-    g.stopPropagation(), g.preventDefault(), w.removeWidget(t.widget.id);
+import { cn as _ } from "../../utils/cn.js";
+import { useDeck as D } from "../../context/DeckContext.js";
+import { useLayout as k } from "../../context/LayoutContext.js";
+import { GripVertical as C, X as W } from "../icons/index.js";
+import { WidgetResizeHandle as d } from "./WidgetResizeHandle.js";
+import { WidgetTypeSwitcher as R } from "./WidgetTypeSwitcher.js";
+var S = /* @__PURE__ */ a('<div class="text-muted-foreground/50 pointer-events-none">'), z = /* @__PURE__ */ a('<div class="opacity-0 group-hover:opacity-100 transition-opacity">'), A = /* @__PURE__ */ a('<button class="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all cursor-pointer"title="Remove widget">'), E = /* @__PURE__ */ a('<div class="h-full flex flex-col"><div><span class="flex-1 text-xs font-medium text-foreground truncate"></span></div><div class="flex-1 min-h-0 overflow-auto">');
+function T(e) {
+  const m = D(), s = k(), v = () => e.widget.title ?? e.widgetDef?.name ?? e.widget.type, g = () => !s.isMobile(), f = (o) => {
+    o.stopPropagation(), o.preventDefault(), m.removeWidget(e.widget.id);
   };
   return (() => {
-    var g = y(), d = g.firstChild, u = d.firstChild, s = d.nextSibling;
-    return r(d, e(l, {
+    var o = E(), n = o.firstChild, c = n.firstChild, h = n.nextSibling;
+    return i(n, r(l, {
       get when() {
-        return o();
+        return g();
       },
       get children() {
-        var n = D();
-        return r(n, e(b, {
+        var t = S();
+        return i(t, r(C, {
           class: "w-3.5 h-3.5"
-        })), n;
+        })), t;
       }
-    }), u), r(d, e(l, {
+    }), c), i(n, r(l, {
       get when() {
-        return t.widgetDef?.icon;
+        return e.widgetDef?.icon;
       },
-      children: (n) => {
-        const f = n();
-        return e(f, {
+      children: (t) => {
+        const u = t();
+        return r(u, {
           class: "w-3.5 h-3.5 text-muted-foreground"
         });
       }
-    }), u), r(u, m), r(d, e(l, {
+    }), c), i(c, v), i(n, r(l, {
       get when() {
-        return o();
+        return g();
       },
       get children() {
-        return e(C, {
+        var t = z();
+        return i(t, r(R, {
           get widget() {
-            return t.widget;
+            return e.widget;
           }
-        });
+        })), t;
       }
-    }), null), r(d, e(l, {
+    }), null), i(n, r(l, {
       get when() {
-        return o();
+        return g();
       },
       get children() {
-        var n = W();
-        return n.$$click = a, r(n, e(k, {
+        var t = A();
+        return t.$$click = f, i(t, r(W, {
           class: "w-3.5 h-3.5"
-        })), n;
+        })), t;
       }
-    }), null), r(s, () => t.children), r(g, e(l, {
+    }), null), i(h, () => e.children), i(o, r(l, {
       get when() {
-        return o();
+        return g();
       },
       get children() {
-        return [e(i, {
+        return [r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "e"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "s"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "se"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "w"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "n"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "sw"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "ne"
-        }), e(i, {
+        }), r(d, {
           get widget() {
-            return t.widget;
+            return e.widget;
           },
           edge: "nw"
         })];
       }
-    }), null), h(() => v(d, $("widget-header flex items-center gap-1 px-2 py-1.5 border-b border-border bg-muted/30", "select-none"))), g;
+    }), null), x((t) => {
+      var u = _("widget-header flex items-center gap-1 px-2 py-1.5 border-b border-border bg-muted/30", "select-none", g() && !e.isDragging && "cursor-move", e.isDragging && "cursor-grabbing"), w = g() ? e.widget.id : void 0;
+      return u !== t.e && b(n, t.e = u), w !== t.t && $(n, "data-widget-drag-handle", t.t = w), t;
+    }, {
+      e: void 0,
+      t: void 0
+    }), o;
   })();
 }
-x(["click"]);
+y(["click"]);
 export {
-  H as WidgetFrame
+  T as WidgetFrame
 };

package/dist/components/deck/index.d.ts

@@ -7,3 +7,4 @@ export { WidgetTypeSwitcher, type WidgetTypeSwitcherProps } from './WidgetTypeSw
 export { LayoutSelector, type LayoutSelectorProps } from './LayoutSelector';
 export { DeckTopBar, type DeckTopBarProps } from './DeckTopBar';
 export { DropZonePreview, type DropZonePreviewProps } from './DropZonePreview';
+export { DeckContextMenu, type DeckContextMenuItem, type DeckContextMenuProps, } from './DeckContextMenu';

package/dist/components/ui/InfiniteCanvas.d.ts

@@ -25,5 +25,7 @@ export interface InfiniteCanvasProps {
     minScale?: number;
     maxScale?: number;
     wheelZoomSpeed?: number;
+    /** When true, wheel zoom and pan are suppressed. Widgets inside remain interactive. */
+    disablePanZoom?: boolean;
 }
 export declare function InfiniteCanvas(props: InfiniteCanvasProps): JSX.Element;

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,28 @@
+import { type InfiniteCanvasContextMenuEvent } from '../../ui';
+import type { WorkbenchViewport, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchCanvasProps {
+    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;