@floegence/floe-webapp-core 0.36.15 → 0.36.16

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

@@ -19,6 +19,7 @@ export interface InfiniteCanvasProps {
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
     onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu?: (event: InfiniteCanvasContextMenuEvent) => void;
+    onCanvasPointerDown?: (event: PointerEvent) => void;
     ariaLabel?: string;
     class?: string;
     contentClass?: string;

package/dist/components/ui/InfiniteCanvas.js

@@ -1,14 +1,14 @@
 import { spread as B, mergeProps as j, insert as T, effect as q, className as G, setStyleProperty as J, template as K, use as Q } from "solid-js/web";
 import { createSignal as _, untrack as I, createEffect as L, onCleanup as A } from "solid-js";
-import { cn as x } from "../../utils/cn.js";
-import { startHotInteraction as D } from "../../utils/hotInteraction.js";
+import { cn as D } from "../../utils/cn.js";
+import { startHotInteraction as x } from "../../utils/hotInteraction.js";
 import { resolveSurfaceInteractionTargetRole as ee, resolveSurfaceWheelRouting as te, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as ne } from "./localInteractionSurface.js";
 import { clientToCanvasLocal as Y, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
-import { SURFACE_PORTAL_LAYER_ATTR as ie } from "./dialogSurfaceScope.js";
-var ae = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
+import { SURFACE_PORTAL_LAYER_ATTR as ae } from "./dialogSurfaceScope.js";
+var ie = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
 const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, de = '[data-floe-canvas-pan-surface="true"]', R = 3;
-function fe(t, i, u) {
-  return Math.max(i, Math.min(u, t));
+function fe(t, a, u) {
+  return Math.max(a, Math.min(u, t));
 }
 function b(t) {
   return {
@@ -17,12 +17,12 @@ function b(t) {
     scale: Number.isFinite(t.scale) && t.scale > 0 ? t.scale : ce
   };
 }
-function me(t, i) {
-  return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (i?.clientHeight ?? window.innerHeight) : t.deltaY;
+function me(t, a) {
+  return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (a?.clientHeight ?? window.innerHeight) : t.deltaY;
 }
-function Pe(t) {
-  const [i, u] = _(I(() => b(t.viewport))), [m, S] = _(null);
-  let a, d, f = !1, l;
+function ge(t) {
+  const [a, u] = _(I(() => b(t.viewport))), [m, S] = _(null);
+  let i, d, f = !1, l;
   const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? de, F = () => t.wheelInteractiveSelector ?? ne, V = () => t.minScale ?? le, y = () => t.maxScale ?? se, k = () => t.wheelZoomSpeed ?? ue, U = () => {
     const e = m();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
@@ -48,44 +48,46 @@ function Pe(t) {
     w(), d = window.setTimeout(() => {
       d = void 0, v(e);
     }, 90);
-  }, p = (e) => ee({
+  }, h = (e) => ee({
     target: e,
     interactiveSelector: M(),
     panSurfaceSelector: X()
-  }), h = (e) => {
+  }), p = (e) => {
     const n = m();
     if (!n || e !== void 0 && n.pointerId !== e) return;
     n.stopInteraction?.();
-    const r = i();
-    S(null), a && a.hasPointerCapture(n.pointerId) && a.releasePointerCapture(n.pointerId), n.startedFromPanSurface && n.moved && (f = !0, N()), v(r);
+    const r = a();
+    S(null), i && i.hasPointerCapture(n.pointerId) && i.releasePointerCapture(n.pointerId), n.startedFromPanSurface && n.moved && (f = !0, N()), v(r);
   };
   L(() => {
     m() || u(b(t.viewport));
   }), L(() => {
-    const e = a;
+    const e = i;
     if (!e) return;
     const n = (r) => {
-      !f || p(r.target) !== "pan_surface" || (C(), r.preventDefault(), r.stopPropagation());
+      !f || h(r.target) !== "pan_surface" || (C(), r.preventDefault(), r.stopPropagation());
     };
-    e.addEventListener("click", n, !0), e.addEventListener("wheel", g, {
+    e.addEventListener("click", n, !0), e.addEventListener("wheel", P, {
       passive: !1
     }), A(() => {
-      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", g);
+      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", P);
     });
   }), A(() => {
-    w(), h(), C();
+    w(), p(), C();
   });
   const H = (e) => {
-    if (e.button !== 0 || t.disablePanZoom) return;
-    const n = p(e.target), r = n === "pan_surface";
-    n !== "local_surface" && (w(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault(), a?.setPointerCapture(e.pointerId)), S({
+    if (e.button !== 0) return;
+    const n = h(e.target);
+    if (n === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
+    const r = n === "pan_surface";
+    n !== "local_surface" && (w(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault(), i?.setPointerCapture(e.pointerId)), S({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
-      startViewport: i(),
+      startViewport: a(),
       moved: !1,
       startedFromPanSurface: r,
-      stopInteraction: r ? void 0 : D({
+      stopInteraction: r ? void 0 : x({
         kind: "drag",
         cursor: "grabbing"
       })
@@ -95,7 +97,7 @@ function Pe(t) {
     if (!n || n.pointerId !== e.pointerId) return;
     const r = e.clientX - n.startClientX, o = e.clientY - n.startClientY;
     if (!(n.moved || Math.abs(r) > R || Math.abs(o) > R)) return;
-    n.moved || (e.preventDefault(), a?.hasPointerCapture(e.pointerId) || a?.setPointerCapture(e.pointerId));
+    n.moved || (e.preventDefault(), i?.hasPointerCapture(e.pointerId) || i?.setPointerCapture(e.pointerId));
     const s = {
       ...n.startViewport,
       x: n.startViewport.x + r,
@@ -104,43 +106,43 @@ function Pe(t) {
     n.moved || S({
       ...n,
       moved: !0,
-      stopInteraction: n.stopInteraction ?? D({
+      stopInteraction: n.stopInteraction ?? x({
         kind: "drag",
         cursor: "grabbing"
       })
     }), u(s);
   }, O = (e) => {
-    h(e.pointerId);
+    p(e.pointerId);
   }, $ = (e) => {
-    h(e.pointerId);
-  }, g = (e) => {
-    const n = a?.getBoundingClientRect();
+    p(e.pointerId);
+  }, P = (e) => {
+    const n = i?.getBoundingClientRect();
     if (!n || te({
       target: e.target,
       disablePanZoom: !!t.disablePanZoom,
       wheelInteractiveSelector: F()
     }).kind !== "canvas_zoom") return;
     e.preventDefault(), t.onViewportInteractionStart?.("wheel");
-    const o = i(), c = Y(n, {
+    const o = a(), c = Y(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), s = me(e, a), P = fe(o.scale * Math.exp(-s * k()), V(), y());
-    if (Math.abs(P - o.scale) < 1e-4) return;
+    }), s = me(e, i), g = fe(o.scale * Math.exp(-s * k()), V(), y());
+    if (Math.abs(g - o.scale) < 1e-4) return;
     const E = oe({
       viewport: o,
       localPoint: c,
-      nextScale: P
+      nextScale: g
     });
     u(E), Z(E);
   }, z = (e) => {
-    if (p(e.target) !== "canvas") return;
-    const n = a?.getBoundingClientRect();
+    if (h(e.target) !== "canvas") return;
+    const n = i?.getBoundingClientRect();
     if (!n) return;
     e.preventDefault();
     const r = Y(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), o = i(), c = re(o, r);
+    }), o = a(), c = re(o, r);
     t.onCanvasContextMenu?.({
       clientX: e.clientX,
       clientY: e.clientY,
@@ -151,13 +153,13 @@ function Pe(t) {
     });
   };
   return (() => {
-    var e = ae(), n = e.firstChild, r = a;
-    return typeof r == "function" ? Q(r, e) : a = e, B(e, j({
+    var e = ie(), n = e.firstChild, r = i;
+    return typeof r == "function" ? Q(r, e) : i = e, B(e, j({
       get class() {
-        return x("floe-infinite-canvas", U() && "is-panning", t.disablePanZoom && "is-locked", t.class);
+        return D("floe-infinite-canvas", U() && "is-panning", t.disablePanZoom && "is-locked", t.class);
       }
     }, {
-      [ie]: "true"
+      [ae]: "true"
     }, {
       onPointerDown: H,
       onPointerMove: W,
@@ -167,8 +169,8 @@ function Pe(t) {
       get "aria-label"() {
         return t.ariaLabel ?? "Infinite canvas";
       }
-    }), !1, !0), T(n, () => t.children), T(e, () => t.overlay?.(i()), null), q((o) => {
-      var c = x("floe-infinite-canvas__viewport", t.contentClass), s = `translate(${i().x}px, ${i().y}px) scale(${i().scale})`;
+    }), !1, !0), T(n, () => t.children), T(e, () => t.overlay?.(a()), null), q((o) => {
+      var c = D("floe-infinite-canvas__viewport", t.contentClass), s = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
       return c !== o.e && G(n, o.e = c), s !== o.t && J(n, "transform", o.t = s), o;
     }, {
       e: void 0,
@@ -177,5 +179,5 @@ function Pe(t) {
   })();
 }
 export {
-  Pe as InfiniteCanvas
+  ge as InfiniteCanvas
 };

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

@@ -16,6 +16,7 @@ export interface WorkbenchCanvasProps {
     onViewportCommit: (viewport: WorkbenchViewport) => void;
     onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
+    onCanvasPointerDown?: (event: PointerEvent) => void;
     onSelectWidget: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onStartOptimisticFront: (widgetId: string) => void;
@@ -28,6 +29,8 @@ export interface WorkbenchCanvasProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchCanvas(props: WorkbenchCanvasProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,19 +1,19 @@
-import { use as v, insert as m, createComponent as i, effect as W, template as w } from "solid-js/web";
-import { createMemo as o, Show as h, For as F } from "solid-js";
-import { WorkbenchCanvasField as y } from "./WorkbenchCanvasField.js";
-import { WorkbenchWidget as I } from "./WorkbenchWidget.js";
-import { createWorkbenchRenderLayerMap as R, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
-import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+import { use as C, insert as m, createComponent as i, effect as R, template as w } from "solid-js/web";
+import { createMemo as o, Show as h, For as W } from "solid-js";
+import { WorkbenchCanvasField as F } from "./WorkbenchCanvasField.js";
+import { WorkbenchWidget as y } from "./WorkbenchWidget.js";
+import { createWorkbenchRenderLayerMap as I, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
+import { getWidgetEntry as u } from "./widgets/widgetRegistry.js";
 import { InfiniteCanvas as S } from "../ui/InfiniteCanvas.js";
-var M = /* @__PURE__ */ w("<div class=workbench-canvas>"), k = /* @__PURE__ */ w("<div class=workbench-canvas__projected-layer>");
-function b(e) {
+var k = /* @__PURE__ */ w("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), M = /* @__PURE__ */ w("<div class=workbench-canvas__projected-layer>");
+function q(e) {
   const n = o((g) => {
     const d = e.widgetById().get(e.widgetId);
     if (d) return d;
     if (g) return g;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
-  }), a = o(() => c(n().type, e.widgetDefinitions));
-  return i(I, {
+  }), a = o(() => u(n().type, e.widgetDefinitions));
+  return i(y, {
     get definition() {
       return a();
     },
@@ -85,22 +85,30 @@ function b(e) {
     get onCommitResize() {
       return e.onCommitResize;
     },
+    get onRequestOverview() {
+      return e.onRequestOverview;
+    },
+    get onRequestFit() {
+      return e.onRequestFit;
+    },
     get onRequestDelete() {
       return e.onRequestDelete;
     }
   });
 }
-function q(e) {
-  const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => R(e.widgets)), g = o(() => e.widgets.filter((t) => {
-    const r = c(t.type, e.widgetDefinitions);
+function V(e) {
+  const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => I(e.widgets)), g = o(() => e.widgets.filter((t) => {
+    const r = u(t.type, e.widgetDefinitions);
     return l(r) === "canvas_scaled";
   })), d = o(() => e.widgets.filter((t) => {
-    const r = c(t.type, e.widgetDefinitions);
+    const r = u(t.type, e.widgetDefinitions);
     return l(r) === "projected_surface";
-  }).map((t) => t.id)), f = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
+  }).map((t) => t.id)), s = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
   return (() => {
-    var t = M(), r = e.setCanvasFrameRef;
-    return typeof r == "function" ? v(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
+    var t = k();
+    t.firstChild;
+    var r = e.setCanvasFrameRef;
+    return typeof r == "function" ? C(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -115,21 +123,24 @@ function q(e) {
       get onCanvasContextMenu() {
         return e.onCanvasContextMenu;
       },
+      get onCanvasPointerDown() {
+        return e.onCanvasPointerDown;
+      },
       get disablePanZoom() {
         return e.locked;
       },
-      overlay: (s) => i(h, {
+      overlay: (v) => i(h, {
         get when() {
           return d().length > 0;
         },
         get children() {
-          var u = k();
-          return m(u, i(F, {
+          var c = M();
+          return m(c, i(W, {
             get each() {
               return d();
             },
-            children: (C) => i(b, {
-              widgetId: C,
+            children: (f) => i(q, {
+              widgetId: f,
               get widgetDefinitions() {
                 return e.widgetDefinitions;
               },
@@ -177,19 +188,25 @@ function q(e) {
               get onCommitResize() {
                 return e.onCommitResize;
               },
+              get onRequestOverview() {
+                return e.onRequestOverview;
+              },
+              get onRequestFit() {
+                return e.onRequestFit;
+              },
               get onRequestDelete() {
                 return e.onRequestDelete;
               },
-              projectedViewport: s,
+              projectedViewport: v,
               get surfaceReady() {
-                return f();
+                return s();
               }
             })
-          })), u;
+          })), c;
         }
       }),
       get children() {
-        return i(y, {
+        return i(F, {
           get widgetDefinitions() {
             return e.widgetDefinitions;
           },
@@ -229,14 +246,20 @@ function q(e) {
           get onCommitResize() {
             return e.onCommitResize;
           },
+          get onRequestOverview() {
+            return e.onRequestOverview;
+          },
+          get onRequestFit() {
+            return e.onRequestFit;
+          },
           get onRequestDelete() {
             return e.onRequestDelete;
           }
         });
       }
-    })), W(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    }), null), R(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  q as WorkbenchCanvas
+  V as WorkbenchCanvas
 };

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

@@ -19,6 +19,8 @@ export interface WorkbenchCanvasFieldProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -3,8 +3,8 @@ import { createMemo as i, For as c } from "solid-js";
 import { createWorkbenchRenderLayerMap as a } from "./workbenchHelpers.js";
 import { getWidgetEntry as l } from "./widgets/widgetRegistry.js";
 import { WorkbenchWidget as w } from "./WorkbenchWidget.js";
-var f = /* @__PURE__ */ m("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
-function W(e) {
+var v = /* @__PURE__ */ m("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
+function f(e) {
   const t = i((r) => {
     const n = e.widgetById().get(e.widgetId);
     if (n) return n;
@@ -76,20 +76,26 @@ function W(e) {
     get onCommitResize() {
       return e.onCommitResize;
     },
+    get onRequestOverview() {
+      return e.onRequestOverview;
+    },
+    get onRequestFit() {
+      return e.onRequestFit;
+    },
     get onRequestDelete() {
       return e.onRequestDelete;
     }
   });
 }
-function v(e) {
+function F(e) {
   const t = i(() => e.widgets.map((n) => n.id)), d = i(() => new Map(e.widgets.map((n) => [n.id, n]))), r = i(() => a(e.widgets));
   return (() => {
-    var n = f();
+    var n = v();
     return n.firstChild, u(n, g(c, {
       get each() {
         return t();
       },
-      children: (o) => g(W, {
+      children: (o) => g(f, {
         widgetId: o,
         get widgetDefinitions() {
           return e.widgetDefinitions;
@@ -132,6 +138,12 @@ function v(e) {
         get onCommitResize() {
           return e.onCommitResize;
         },
+        get onRequestOverview() {
+          return e.onRequestOverview;
+        },
+        get onRequestFit() {
+          return e.onRequestFit;
+        },
         get onRequestDelete() {
           return e.onRequestDelete;
         }
@@ -140,5 +152,5 @@ function v(e) {
   })();
 }
 export {
-  v as WorkbenchCanvasField
+  F as WorkbenchCanvasField
 };

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

@@ -1,6 +1,15 @@
+import type { WorkbenchThemeId } from './workbenchThemes';
 export interface WorkbenchHudProps {
     scaleLabel: string;
     onZoomOut: () => void;
     onZoomIn: () => void;
+    /**
+     * Current workbench theme. When provided alongside {@link onSelectTheme},
+     * the HUD renders an inline theme selector next to the zoom controls.
+     * Omit both to hide the selector entirely (e.g. when the consumer provides
+     * its own theming UI elsewhere).
+     */
+    activeTheme?: WorkbenchThemeId;
+    onSelectTheme?: (id: WorkbenchThemeId) => void;
 }
 export declare function WorkbenchHud(props: WorkbenchHudProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchHud.js

@@ -1,17 +1,31 @@
-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) {
+import { insert as n, createComponent as o, memo as h, template as i, delegateEvents as u } from "solid-js/web";
+import { Show as m } from "solid-js";
+import { Minus as b, Plus as d } from "../icons/index.js";
+import { WorkbenchThemeSelector as s } from "./WorkbenchThemeSelector.js";
+var _ = /* @__PURE__ */ i("<div class=workbench-hud__divider aria-hidden=true>"), v = /* @__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 S(e) {
   return (() => {
-    var o = b(), e = o.firstChild, l = e.nextSibling, a = l.nextSibling;
-    return e.$$click = () => t.onZoomOut(), n(e, c(u, {
+    var l = v(), t = l.firstChild, c = t.nextSibling, r = c.nextSibling;
+    return n(l, o(m, {
+      get when() {
+        return h(() => !!e.activeTheme)() && e.onSelectTheme;
+      },
+      get children() {
+        return [o(s, {
+          get activeTheme() {
+            return e.activeTheme;
+          },
+          onSelect: (a) => e.onSelectTheme?.(a)
+        }), _()];
+      }
+    }), t), t.$$click = () => e.onZoomOut(), n(t, o(b, {
       class: "w-3.5 h-3.5"
-    })), n(l, () => t.scaleLabel), a.$$click = () => t.onZoomIn(), n(a, c(s, {
+    })), n(c, () => e.scaleLabel), r.$$click = () => e.onZoomIn(), n(r, o(d, {
       class: "w-3.5 h-3.5"
-    })), o;
+    })), l;
   })();
 }
-r(["click"]);
+u(["click"]);
 export {
-  m as WorkbenchHud
+  S as WorkbenchHud
 };