@floegence/floe-webapp-core 0.36.33 → 0.36.35

package/dist/components/ui/Dialog.js

@@ -1,142 +1,192 @@
-import { createComponent as n, Portal as D, setAttribute as u, spread as x, mergeProps as $, memo as C, insert as l, effect as S, template as c, use as E } from "solid-js/web";
-import { createUniqueId as M, createMemo as T, Show as s } from "solid-js";
-import { cn as _ } from "../../utils/cn.js";
-import { Button as y } from "./Button.js";
-import { X as P } from "../icons/index.js";
-import { useResolvedFloeConfig as j } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as z } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as F, projectSurfacePortalRect as H, resolveSurfacePortalBoundaryRect as N, DIALOG_SURFACE_BOUNDARY_ATTR as h, isSurfacePortalMode as U, resolveSurfacePortalMount as L } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as W } from "./localInteractionSurface.js";
-var q = /* @__PURE__ */ c('<h2 class="text-sm font-semibold">'), G = /* @__PURE__ */ c('<p class="mt-0.5 text-xs text-muted-foreground">'), X = /* @__PURE__ */ c('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), Y = /* @__PURE__ */ c('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), J = /* @__PURE__ */ c('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), K = /* @__PURE__ */ c("<div>");
-function Q(e) {
-  const o = M(), w = () => `dialog-${o}-title`, k = () => `dialog-${o}-description`;
-  let b;
-  const f = T(() => e.open ? F() : {
+import { createComponent as n, use as D, setAttribute as s, style as K, Portal as W, spread as A, mergeProps as O, memo as R, insert as d, effect as E, template as u } from "solid-js/web";
+import { createUniqueId as Y, createSignal as k, createMemo as I, createEffect as X, onCleanup as J, Show as g, untrack as Q } from "solid-js";
+import { cn as S } from "../../utils/cn.js";
+import { Button as P } from "./Button.js";
+import { X as Z } from "../icons/index.js";
+import { useResolvedFloeConfig as ee } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as te } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as re, isSurfacePortalMode as F, DIALOG_SURFACE_BOUNDARY_ATTR as x, projectSurfacePortalRect as ne, resolveSurfacePortalBoundaryRect as oe, resolveSurfacePortalMount as ie } from "./dialogSurfaceScope.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as le } from "./localInteractionSurface.js";
+var ae = /* @__PURE__ */ u("<span aria-hidden=true>"), de = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), ce = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), ue = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), se = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), fe = /* @__PURE__ */ u('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), me = /* @__PURE__ */ u("<div>");
+const ge = {
+  display: "none"
+};
+function he(e) {
+  if (typeof queueMicrotask == "function") {
+    queueMicrotask(e);
+    return;
+  }
+  Promise.resolve().then(e);
+}
+function M(e) {
+  return `${e.left}|${e.top}|${e.right}|${e.bottom}|${e.width}|${e.height}`;
+}
+function we(e) {
+  return typeof window < "u" && typeof window.requestAnimationFrame == "function" ? window.requestAnimationFrame(e) : window.setTimeout(() => e(Date.now()), 16);
+}
+function be(e) {
+  if (typeof window < "u" && typeof window.cancelAnimationFrame == "function") {
+    window.cancelAnimationFrame(e);
+    return;
+  }
+  window.clearTimeout(e);
+}
+function ve(e) {
+  const o = Y(), T = () => `dialog-${o}-title`, B = () => `dialog-${o}-description`;
+  let p;
+  const [_, H] = k(null), [N, j] = k(0), [q, G] = k(0), h = () => e.open && !!_() && N() > 0, z = (t) => {
+    H(t), he(() => {
+      Q(_) === t && j((l) => l + 1);
+    });
+  }, w = I(() => h() ? re({
+    owner: _()
+  }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), g = () => `dialog-boundary-${o}`, t = () => U(f()), A = () => L(f()), m = T(() => H(N(f()), f())), B = (r) => typeof Element < "u" && r instanceof Element ? !!r.closest(`[${h}="${g()}"]`) : typeof Node < "u" && r instanceof Node ? !!r.parentElement?.closest(`[${h}="${g()}"]`) : !1;
-  return z({
-    open: () => e.open,
-    root: () => b,
-    containsTarget: (r) => t() && B(r),
+  }), b = () => `dialog-boundary-${o}`, r = () => F(w()), L = () => ie(w()), C = (t) => ne(oe(t), t), U = () => C(w()), v = I(() => (q(), U())), V = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${x}="${b()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${x}="${b()}"]`) : !1;
+  return X(() => {
+    const t = w();
+    if (!h() || !F(t) || typeof window > "u")
+      return;
+    let l = !1, f = null, i = M(C(t));
+    const y = () => {
+      if (l || !F(t))
+        return;
+      const a = M(C(t));
+      a !== i && (i = a, G(($) => $ + 1));
+    }, m = () => {
+      l || (f = we(() => {
+        y(), m();
+      }));
+    };
+    m(), J(() => {
+      l = !0, f !== null && be(f);
+    });
+  }), te({
+    open: h,
+    root: () => p,
+    containsTarget: (t) => r() && V(t),
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: () => !t(),
+    lockBodyScroll: () => !r(),
     trapFocus: !0,
-    closeOnEscape: () => t() ? "inside" : !0,
+    closeOnEscape: () => r() ? "inside" : !0,
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: () => t() ? "none" : "outside",
-    blockTouchMove: () => t() ? "none" : "outside",
+    blockWheel: () => r() ? "none" : "outside",
+    blockTouchMove: () => r() ? "none" : "outside",
     restoreFocus: !0
-  }), n(s, {
+  }), [(() => {
+    var t = ae();
+    return D(z, t), s(t, "data-floe-dialog-owner-anchor", o), K(t, ge), t;
+  })(), n(g, {
     get when() {
-      return e.open;
+      return h();
     },
     get children() {
-      return n(D, {
+      return n(W, {
         get mount() {
-          return A();
+          return L();
         },
         get children() {
-          var r = J(), v = r.firstChild, I = v.nextSibling, i = I.firstChild, p = i.firstChild;
-          u(r, "data-floe-dialog-overlay-root", o), x(r, $({
+          var t = fe(), l = t.firstChild, f = l.nextSibling, i = f.firstChild, y = i.firstChild;
+          s(t, "data-floe-dialog-overlay-root", o), A(t, O({
             get "data-floe-dialog-mode"() {
-              return t() ? "surface" : "global";
+              return r() ? "surface" : "global";
             }
           }, () => ({
-            [W]: t() ? "true" : void 0
+            [le]: r() ? "true" : void 0
           }), {
             get class() {
-              return _(t() ? "absolute z-20 box-border p-3" : "fixed inset-0 box-border z-50 p-4");
+              return S(r() ? "absolute z-20 box-border p-3" : "fixed inset-0 box-border z-50 p-4");
             },
             get style() {
-              return C(() => !!t())() ? {
-                left: `${m().left}px`,
-                top: `${m().top}px`,
-                width: `${m().width}px`,
-                height: `${m().height}px`
+              return R(() => !!r())() ? {
+                left: `${v().left}px`,
+                top: `${v().top}px`,
+                width: `${v().width}px`,
+                height: `${v().height}px`
               } : void 0;
             }
-          }), !1, !0), u(v, "data-floe-dialog-backdrop", o), x(v, $(() => ({
-            [h]: g()
+          }), !1, !0), s(l, "data-floe-dialog-backdrop", o), A(l, O(() => ({
+            [x]: b()
           }), {
             get class() {
-              return _("absolute inset-0 cursor-pointer animate-in fade-in", t() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return S("absolute inset-0 cursor-pointer animate-in fade-in", r() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => e.onOpenChange(!1)
           }), !1, !1);
-          var O = b;
-          return typeof O == "function" ? E(O, i) : b = i, u(i, "data-floe-dialog-panel", o), x(i, $(() => ({
-            [h]: g()
+          var m = p;
+          return typeof m == "function" ? D(m, i) : p = i, s(i, "data-floe-dialog-panel", o), A(i, O(() => ({
+            [x]: b()
           }), {
             get class() {
-              return _(t() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
+              return S(r() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
             },
             role: "dialog",
             get "aria-modal"() {
-              return t() ? void 0 : "true";
+              return r() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return C(() => !!e.title)() ? w() : void 0;
+              return R(() => !!e.title)() ? T() : void 0;
             },
             get "aria-describedby"() {
-              return C(() => !!e.description)() ? k() : void 0;
+              return R(() => !!e.description)() ? B() : void 0;
             },
             tabIndex: -1
-          }), !1, !0), l(i, n(s, {
+          }), !1, !0), d(i, n(g, {
             get when() {
               return e.title || e.description;
             },
             get children() {
-              var d = X(), R = d.firstChild;
-              return l(R, n(s, {
+              var a = ue(), $ = a.firstChild;
+              return d($, n(g, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var a = q();
-                  return l(a, () => e.title), S(() => u(a, "id", w())), a;
+                  var c = de();
+                  return d(c, () => e.title), E(() => s(c, "id", T())), c;
                 }
-              }), null), l(R, n(s, {
+              }), null), d($, n(g, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var a = G();
-                  return l(a, () => e.description), S(() => u(a, "id", k())), a;
+                  var c = ce();
+                  return d(c, () => e.description), E(() => s(c, "id", B())), c;
                 }
-              }), null), l(d, n(y, {
+              }), null), d(a, n(P, {
                 variant: "ghost-destructive",
                 size: "icon",
                 class: "h-6 w-6 -mr-1",
                 onClick: () => e.onOpenChange(!1),
                 "aria-label": "Close",
                 get children() {
-                  return n(P, {
+                  return n(Z, {
                     class: "w-3.5 h-3.5"
                   });
                 }
-              }), null), d;
+              }), null), a;
             }
-          }), p), l(p, () => e.children), l(i, n(s, {
+          }), y), d(y, () => e.children), d(i, n(g, {
             get when() {
               return e.footer;
             },
             get children() {
-              var d = Y();
-              return l(d, () => e.footer), d;
+              var a = se();
+              return d(a, () => e.footer), a;
             }
-          }), null), r;
+          }), null), t;
         }
       });
     }
-  });
+  })];
 }
-function ae(e) {
-  const o = j();
-  return n(Q, {
+function ke(e) {
+  const o = ee();
+  return n(ve, {
     get open() {
       return e.open;
     },
@@ -150,7 +200,7 @@ function ae(e) {
       return e.description;
     },
     get footer() {
-      return [n(y, {
+      return [n(P, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
@@ -159,7 +209,7 @@ function ae(e) {
         get children() {
           return e.cancelText ?? o.config.strings.confirmDialog.cancel;
         }
-      }), n(y, {
+      }), n(P, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -175,11 +225,11 @@ function ae(e) {
       })];
     },
     get children() {
-      return e.children ?? K();
+      return e.children ?? me();
     }
   });
 }
 export {
-  ae as ConfirmDialog,
-  Q as Dialog
+  ke as ConfirmDialog,
+  ve as Dialog
 };

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

@@ -19,10 +19,13 @@ export type ResolvedDialogSurfaceHost = Readonly<{
 export type ResolvedSurfacePortalHost = ResolvedDialogSurfaceHost;
 export type SurfacePortalBoundaryRect = SurfacePortalRect;
 export type { SurfacePortalRect };
+export type SurfacePortalHostResolutionOptions = Readonly<{
+    owner?: Element | null;
+}>;
 export declare function ensureDialogSurfaceInteractionTracking(): void;
 export declare function ensureSurfacePortalInteractionTracking(): void;
-export declare function resolveDialogSurfaceHost(): ResolvedDialogSurfaceHost;
-export declare function resolveSurfacePortalHost(): ResolvedSurfacePortalHost;
+export declare function resolveDialogSurfaceHost(options?: SurfacePortalHostResolutionOptions): ResolvedDialogSurfaceHost;
+export declare function resolveSurfacePortalHost(options?: SurfacePortalHostResolutionOptions): ResolvedSurfacePortalHost;
 export declare function isSurfacePortalMode(surfaceHost: ResolvedSurfacePortalHost): boolean;
 export declare function resolveSurfacePortalMount(surfaceHost: ResolvedSurfacePortalHost): HTMLElement | undefined;
 export declare function resolveSurfacePortalBoundaryRect(surfaceHost: ResolvedSurfacePortalHost): SurfacePortalBoundaryRect;

package/dist/components/ui/dialogSurfaceScope.js

@@ -3,52 +3,52 @@ let r = null, o = null;
 function E(t) {
   return typeof Element < "u" && t instanceof Element ? t : typeof Node < "u" && t instanceof Node ? t.parentElement : null;
 }
-function T(t) {
+function w(t) {
   const e = t?.activeElement;
   return e instanceof Element ? e : null;
 }
-function i(t) {
+function l(t) {
   const e = typeof document < "u" ? document : null;
   r = {
     target: E(t),
-    activeElement: T(e),
+    activeElement: w(e),
     recordedAt: Date.now()
   };
 }
-function l(t) {
-  i(t.target);
-}
 function c(t) {
-  i(t.target);
+  l(t.target);
+}
+function f(t) {
+  l(t.target);
 }
 function d(t) {
-  i(t.target);
+  l(t.target);
 }
 function s() {
-  w();
+  T();
 }
-function w() {
-  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", l, !0), o.removeEventListener("focusin", c, !0), o.removeEventListener("contextmenu", d, !0)), document.addEventListener("pointerdown", l, !0), document.addEventListener("focusin", c, !0), document.addEventListener("contextmenu", d, !0), o = document);
+function T() {
+  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", c, !0), o.removeEventListener("focusin", f, !0), o.removeEventListener("contextmenu", d, !0)), document.addEventListener("pointerdown", c, !0), document.addEventListener("focusin", f, !0), document.addEventListener("contextmenu", d, !0), o = document);
 }
 function R() {
   return !r || Date.now() - r.recordedAt > g ? null : r;
 }
-function f(t) {
+function i(t) {
   const e = t?.closest(`[${a}="true"]`);
-  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
 function S(t) {
   if (!t) return null;
   const e = t.closest(`[${p}="true"]`);
-  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
-function L() {
+function L(t = {}) {
   s();
-  const t = R(), e = f(t?.target ?? null) ?? f(t?.activeElement ?? null);
-  return e ? {
-    host: e,
-    boundaryHost: e,
-    mountHost: S(e) ?? e,
+  const e = R(), n = i(t.owner ?? null) ?? i(e?.target ?? null) ?? i(e?.activeElement ?? null);
+  return n ? {
+    host: n,
+    boundaryHost: n,
+    mountHost: S(n) ?? n,
     mode: "surface"
   } : { host: null, boundaryHost: null, mountHost: null, mode: "global" };
 }
@@ -112,7 +112,7 @@ function b(t, e) {
     y: t.y - n.top
   };
 }
-function C(t, e) {
+function P(t, e) {
   if (!u(e))
     return t;
   const n = h(e);
@@ -125,7 +125,7 @@ function C(t, e) {
     height: t.height
   };
 }
-function P() {
+function C() {
   r = null;
 }
 typeof document < "u" && s();
@@ -134,12 +134,12 @@ export {
   a as DIALOG_SURFACE_HOST_ATTR,
   y as SURFACE_PORTAL_HOST_ATTR,
   p as SURFACE_PORTAL_LAYER_ATTR,
-  P as __resetSurfacePortalScopeForTests,
+  C as __resetSurfacePortalScopeForTests,
   s as ensureDialogSurfaceInteractionTracking,
-  w as ensureSurfacePortalInteractionTracking,
+  T as ensureSurfacePortalInteractionTracking,
   u as isSurfacePortalMode,
   b as projectSurfacePortalPosition,
-  C as projectSurfacePortalRect,
+  P as projectSurfacePortalRect,
   _ as resolveSurfacePortalBoundaryRect,
   L as resolveSurfacePortalHost,
   v as resolveSurfacePortalMount,

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

@@ -1 +1 @@
-export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalHostResolutionOptions, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';

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

@@ -1,4 +1,12 @@
-import type { WorkbenchState, WorkbenchInteractionAdapter, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+import { type WorkbenchContextMenuItem } from './WorkbenchContextMenu';
+import type { WorkbenchState, WorkbenchContextMenuState, WorkbenchInteractionAdapter, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export type WorkbenchContextMenuItemsResolver = (context: Readonly<{
+    menu: WorkbenchContextMenuState;
+    items: readonly WorkbenchContextMenuItem[];
+    widgets: readonly WorkbenchWidgetItem[];
+    widget: WorkbenchWidgetItem | null;
+    closeMenu: () => void;
+}>) => readonly WorkbenchContextMenuItem[];
 export interface WorkbenchSurfaceApi {
     ensureWidget: (type: WorkbenchWidgetType, options?: {
         centerViewport?: boolean;
@@ -41,6 +49,7 @@ export interface WorkbenchSurfaceProps {
     widgetDefinitions?: readonly WorkbenchWidgetDefinition[];
     launcherWidgetTypes?: readonly WorkbenchWidgetType[];
     interactionAdapter?: WorkbenchInteractionAdapter;
+    resolveContextMenuItems?: WorkbenchContextMenuItemsResolver;
     onApiReady?: (api: WorkbenchSurfaceApi | null) => void;
     onRequestDelete?: (widgetId: string) => void;
     onLayoutInteractionStart?: () => void;

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,17 +1,18 @@
-import { use as T, spread as _, mergeProps as B, insert as f, createComponent as u, Portal as q, addEventListener as z, template as A, delegateEvents as $ } from "solid-js/web";
-import { createSignal as S, createMemo as w, untrack as h, createEffect as m, onCleanup as v, Show as V } from "solid-js";
-import { clientToCanvasWorld as N } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as P } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as H } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as X } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as Y } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as K } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as U } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as Z } from "./useWorkbenchModel.js";
-import { resolveWorkbenchInteractionAdapter as G } from "./workbenchInteractionAdapter.js";
-var j = /* @__PURE__ */ A("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), J = /* @__PURE__ */ A("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const Q = "F1";
-function I(i) {
+import { use as _, spread as B, mergeProps as q, insert as m, createComponent as u, Portal as N, addEventListener as z, template as A, delegateEvents as H } from "solid-js/web";
+import { createSignal as M, createMemo as w, untrack as W, createEffect as v, onCleanup as h, Show as P } from "solid-js";
+import { clientToCanvasWorld as X } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as $ } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as V } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as Y } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as K } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as U } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as Z } from "./workbenchContextMenuDismiss.js";
+import { createContextMenuPosition as G, WORKBENCH_CONTEXT_MENU_WIDTH_PX as j, estimateContextMenuHeight as J } from "./workbenchHelpers.js";
+import { useWorkbenchModel as Q } from "./useWorkbenchModel.js";
+import { resolveWorkbenchInteractionAdapter as ee } from "./workbenchInteractionAdapter.js";
+var te = /* @__PURE__ */ A("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), ne = /* @__PURE__ */ A("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const re = "F1";
+function x(i) {
   if (i)
     try {
       i.focus({
@@ -21,186 +22,205 @@ function I(i) {
       i.focus();
     }
 }
-function ge(i) {
-  const t = Z({
+function he(i) {
+  const t = Q({
     state: () => i.state(),
     setState: (e) => i.setState(e),
     widgetDefinitions: () => i.widgetDefinitions,
     onClose: () => {
     }
-  }), [s, x] = S(null), a = w(() => G(i.interactionAdapter)), [p, l] = S(h(() => a().createInitialInputOwner())), W = w(() => {
+  }), [d, E] = M(null), s = w(() => ee(i.interactionAdapter)), [p, l] = M(W(() => s().createInitialInputOwner())), k = w(() => {
     const e = i.launcherWidgetTypes;
     return !e || e.length <= 0 ? null : new Set(e);
   }), D = w(() => {
-    const e = t.widgetDefinitions(), r = W();
-    return r ? e.filter((n) => r.has(n.type)) : e;
-  }), E = w(() => {
-    const e = t.contextMenu.items(), r = W();
-    return r ? e.filter((n) => {
-      if (n.kind !== "action")
+    const e = t.widgetDefinitions(), n = k();
+    return n ? e.filter((r) => n.has(r.type)) : e;
+  }), C = w(() => {
+    const e = t.contextMenu.state(), n = t.contextMenu.items(), r = k(), o = r ? n.filter((c) => {
+      if (c.kind !== "action")
         return !0;
-      const o = /^add-(.+)$/.exec(String(n.id ?? ""));
-      return o ? r.has(o[1]) : !0;
-    }) : e;
-  }), k = (e, r, n) => {
-    const o = a(), c = o.findWidgetRoot(e), d = o.readWidgetId(c);
-    if (d) {
-      l(o.createWidgetInputOwner(d, r));
+      const f = /^add-(.+)$/.exec(String(c.id ?? ""));
+      return f ? r.has(f[1]) : !0;
+    }) : n;
+    if (!e || !i.resolveContextMenuItems)
+      return o;
+    const a = e.widgetId ? t.queries.findWidgetById(e.widgetId) : null;
+    return i.resolveContextMenuItems({
+      menu: e,
+      items: o,
+      widgets: t.widgets(),
+      widget: a,
+      closeMenu: t.contextMenu.close
+    });
+  }), b = w(() => {
+    const e = t.contextMenu.state();
+    if (!e) return;
+    const n = C(), r = n.filter((a) => a.kind === "action").length, o = n.filter((a) => a.kind === "separator").length;
+    return G({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      menuWidth: j,
+      menuHeight: J(r, o)
+    });
+  }), I = (e, n, r) => {
+    const o = s(), a = o.findWidgetRoot(e), c = o.readWidgetId(a);
+    if (c) {
+      l(o.createWidgetInputOwner(c, n));
       return;
     }
-    const y = s();
-    y && e instanceof Node && y.contains(e) && l(o.createCanvasInputOwner(n));
-  }, b = (e = "selection_cleared") => {
-    const r = a(), n = s();
-    t.selection.clear(), l(r.createCanvasInputOwner(e)), queueMicrotask(() => {
-      if (!n || typeof document > "u") return;
+    const f = d();
+    f && e instanceof Node && f.contains(e) && l(o.createCanvasInputOwner(r));
+  }, y = (e = "selection_cleared") => {
+    const n = s(), r = d();
+    t.selection.clear(), l(n.createCanvasInputOwner(e)), queueMicrotask(() => {
+      if (!r || typeof document > "u") return;
       const o = document.activeElement;
-      if (!(o instanceof HTMLElement) || !n.contains(o)) {
-        I(n);
+      if (!(o instanceof HTMLElement) || !r.contains(o)) {
+        x(r);
         return;
       }
-      const c = r.findWidgetRoot(o);
-      I(n), c && document.activeElement === o && o.isConnected && o.blur();
+      const a = n.findWidgetRoot(o);
+      x(r), a && document.activeElement === o && o.isConnected && o.blur();
     });
   }, R = () => {
-    const e = s()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), r = t.viewport(), n = e?.getBoundingClientRect(), o = n?.width ?? 0, c = n?.height ?? 0;
+    const e = d()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = t.viewport(), r = e?.getBoundingClientRect(), o = r?.width ?? 0, a = r?.height ?? 0;
     return {
-      worldX: o > 0 ? (o / 2 - r.x) / r.scale : 240,
-      worldY: c > 0 ? (c / 2 - r.y) / r.scale : 180
+      worldX: o > 0 ? (o / 2 - n.x) / n.scale : 240,
+      worldY: a > 0 ? (a / 2 - n.y) / n.scale : 180
     };
   }, g = (e) => {
-    const r = h(a), n = h(s);
+    const n = W(s), r = W(d);
     queueMicrotask(() => {
-      r.focusWidgetElement(n, e), l(r.createWidgetInputOwner(e, "activation"));
+      n.focusWidgetElement(r, e), l(n.createWidgetInputOwner(e, "activation"));
     });
-  }, M = (e) => {
-    const r = t.navigation.fitWidget(e);
-    g(r.id);
-  }, L = (e) => {
-    const r = t.navigation.overviewWidget(e);
-    g(r.id);
+  }, O = (e) => {
+    const n = t.navigation.fitWidget(e);
+    g(n.id);
+  }, T = (e) => {
+    const n = t.navigation.overviewWidget(e);
+    g(n.id);
   };
-  m(() => {
+  v(() => {
     i.onApiReady?.({
-      ensureWidget: (e, r) => t.widgetActions.ensureWidget(e, r) ?? null,
-      createWidget: (e, r) => {
-        const n = R(), o = t.widgetActions.addWidgetAtCursor(e, r?.worldX ?? n.worldX, r?.worldY ?? n.worldY) ?? null;
-        return o && r?.centerViewport !== !1 && t.navigation.centerOnWidget(o), o;
-      },
-      clearSelection: () => b("selection_cleared"),
-      focusWidget: (e, r) => {
-        const n = t.navigation.focusWidget(e, r);
-        return g(n.id), n;
+      ensureWidget: (e, n) => t.widgetActions.ensureWidget(e, n) ?? null,
+      createWidget: (e, n) => {
+        const r = R(), o = t.widgetActions.addWidgetAtCursor(e, n?.worldX ?? r.worldX, n?.worldY ?? r.worldY) ?? null;
+        return o && n?.centerViewport !== !1 && t.navigation.centerOnWidget(o), o;
+      },
+      clearSelection: () => y("selection_cleared"),
+      focusWidget: (e, n) => {
+        const r = t.navigation.focusWidget(e, n);
+        return g(r.id), r;
       },
       fitWidget: (e) => {
-        const r = t.navigation.fitWidget(e);
-        return g(r.id), r;
+        const n = t.navigation.fitWidget(e);
+        return g(n.id), n;
       },
       overviewWidget: (e) => {
-        const r = t.navigation.overviewWidget(e);
-        return g(r.id), r;
+        const n = t.navigation.overviewWidget(e);
+        return g(n.id), n;
       },
       findWidgetByType: (e) => t.queries.findWidgetByType(e),
       findWidgetById: (e) => t.queries.findWidgetById(e),
-      updateWidgetTitle: (e, r) => {
-        const n = String(e ?? "").trim(), o = String(r ?? "").trim();
-        !n || !o || i.setState((c) => ({
-          ...c,
-          widgets: c.widgets.map((d) => d.id === n && d.title !== o ? {
-            ...d,
+      updateWidgetTitle: (e, n) => {
+        const r = String(e ?? "").trim(), o = String(n ?? "").trim();
+        !r || !o || i.setState((a) => ({
+          ...a,
+          widgets: a.widgets.map((c) => c.id === r && c.title !== o ? {
+            ...c,
             title: o
-          } : d)
+          } : c)
         }));
       }
-    }), v(() => {
+    }), h(() => {
       i.onApiReady?.(null);
     });
   });
-  const C = () => i.lockShortcut === void 0 ? Q : i.lockShortcut;
-  m(() => {
+  const S = () => i.lockShortcut === void 0 ? re : i.lockShortcut;
+  v(() => {
     if (typeof window > "u" || !t.contextMenu.state()) return;
-    const e = U({
+    const e = Z({
       ownerWindow: window,
       onDismiss: t.contextMenu.close
     });
-    v(() => e());
-  }), m(() => {
+    h(() => e());
+  }), v(() => {
     const e = p();
     if (e.kind !== "widget") return;
-    t.widgets().some((n) => n.id === e.widgetId) || l(a().createCanvasInputOwner("widget_removed"));
-  }), m(() => {
-    const e = s();
+    t.widgets().some((r) => r.id === e.widgetId) || l(s().createCanvasInputOwner("widget_removed"));
+  }), v(() => {
+    const e = d();
     if (!e) return;
-    const r = (o) => {
-      k(o.target, "pointer", "background_pointer");
-    }, n = (o) => {
-      k(o.target, "focus", "background_focus");
+    const n = (o) => {
+      I(o.target, "pointer", "background_pointer");
+    }, r = (o) => {
+      I(o.target, "focus", "background_focus");
     };
-    e.addEventListener("pointerdown", r, !0), e.addEventListener("focusin", n), v(() => {
-      e.removeEventListener("pointerdown", r, !0), e.removeEventListener("focusin", n);
+    e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", r), h(() => {
+      e.removeEventListener("pointerdown", n, !0), e.removeEventListener("focusin", r);
     });
-  }), m(() => {
+  }), v(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const e = C(), r = (n) => {
-      if (!(n.defaultPrevented || n.isComposing)) {
-        if (e !== null && n.key === e) {
-          n.preventDefault(), t.lock.toggle();
+    const e = S(), n = (r) => {
+      if (!(r.defaultPrevented || r.isComposing)) {
+        if (e !== null && r.key === e) {
+          r.preventDefault(), t.lock.toggle();
           return;
         }
-        if (!a().shouldBypassGlobalHotkeys({
-          root: s(),
-          target: n.target,
+        if (!s().shouldBypassGlobalHotkeys({
+          root: d(),
+          target: r.target,
           owner: p(),
-          interactiveSelector: a().interactiveSelector
+          interactiveSelector: s().interactiveSelector
         }))
-          switch (n.key) {
+          switch (r.key) {
             case "ArrowUp":
-              n.preventDefault(), t.navigation.handleArrowNavigation("up");
+              r.preventDefault(), t.navigation.handleArrowNavigation("up");
               break;
             case "ArrowDown":
-              n.preventDefault(), t.navigation.handleArrowNavigation("down");
+              r.preventDefault(), t.navigation.handleArrowNavigation("down");
               break;
             case "ArrowLeft":
-              n.preventDefault(), t.navigation.handleArrowNavigation("left");
+              r.preventDefault(), t.navigation.handleArrowNavigation("left");
               break;
             case "ArrowRight":
-              n.preventDefault(), t.navigation.handleArrowNavigation("right");
+              r.preventDefault(), t.navigation.handleArrowNavigation("right");
               break;
             case "Delete":
             case "Backspace":
-              t.selectedWidgetId() && (n.preventDefault(), t.widgetActions.deleteSelected());
+              t.selectedWidgetId() && (r.preventDefault(), t.widgetActions.deleteSelected());
               break;
           }
       }
     };
-    document.addEventListener("keydown", r, !0), v(() => document.removeEventListener("keydown", r, !0));
+    document.addEventListener("keydown", n, !0), h(() => document.removeEventListener("keydown", n, !0));
   });
-  const F = (e, r) => {
-    const n = s()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
-    if (!n) return null;
-    const o = n.getBoundingClientRect();
-    return N(o, t.viewport(), {
+  const L = (e, n) => {
+    const r = d()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
+    if (!r) return null;
+    const o = r.getBoundingClientRect();
+    return X(o, t.viewport(), {
       clientX: e,
-      clientY: r
+      clientY: n
     });
-  }, O = (e, r, n) => {
-    const o = F(r, n);
+  }, F = (e, n, r) => {
+    const o = L(n, r);
     o && t.widgetActions.addWidgetAtCursor(e, o.worldX, o.worldY);
   };
   return (() => {
-    var e = J(), r = e.firstChild;
-    return T(x, e), _(e, B({
+    var e = ne(), n = e.firstChild;
+    return _(E, e), B(e, q({
       get class() {
         return `workbench-surface${i.class ? ` ${i.class}` : ""}`;
       }
     }, () => ({
-      [a().surfaceRootAttr]: "true"
+      [s().surfaceRootAttr]: "true"
     }), {
       get "data-workbench-theme"() {
         return t.theme();
       },
       tabIndex: -1
-    }), !1, !0), f(r, u(P, {
+    }), !1, !0), m(n, u($, {
       get widgetDefinitions() {
         return t.widgetDefinitions();
       },
@@ -226,7 +246,7 @@ function ge(i) {
         return t.filters();
       },
       get interactionAdapter() {
-        return a();
+        return s();
       },
       get setCanvasFrameRef() {
         return t.setCanvasFrameRef;
@@ -240,7 +260,7 @@ function ge(i) {
       get onCanvasContextMenu() {
         return t.canvas.openCanvasContextMenu;
       },
-      onCanvasPointerDown: () => b("background_pointer"),
+      onCanvasPointerDown: () => y("background_pointer"),
       get onSelectWidget() {
         return t.canvas.selectWidget;
       },
@@ -259,8 +279,8 @@ function ge(i) {
       get onCommitResize() {
         return t.canvas.commitResize;
       },
-      onRequestOverview: L,
-      onRequestFit: M,
+      onRequestOverview: T,
+      onRequestFit: O,
       get onRequestDelete() {
         return i.onRequestDelete ?? t.widgetActions.deleteWidget;
       },
@@ -270,7 +290,7 @@ function ge(i) {
       get onLayoutInteractionEnd() {
         return i.onLayoutInteractionEnd;
       }
-    })), f(e, u(K, {
+    })), m(e, u(U, {
       get locked() {
         return t.locked();
       },
@@ -278,9 +298,9 @@ function ge(i) {
         return t.lock.toggle;
       },
       get shortcutLabel() {
-        return C() ?? void 0;
+        return S() ?? void 0;
       }
-    }), null), f(e, u(X, {
+    }), null), m(e, u(Y, {
       get widgetDefinitions() {
         return D();
       },
@@ -296,8 +316,8 @@ function ge(i) {
       get onShowAll() {
         return t.filter.showAll;
       },
-      onCreateAt: O
-    }), null), f(e, u(Y, {
+      onCreateAt: F
+    }), null), m(e, u(K, {
       get scaleLabel() {
         return t.scaleLabel();
       },
@@ -310,26 +330,26 @@ function ge(i) {
       get activeTheme() {
         return t.theme();
       },
-      onSelectTheme: (n) => t.appearance.setTheme(n)
-    }), null), f(e, u(V, {
+      onSelectTheme: (r) => t.appearance.setTheme(r)
+    }), null), m(e, u(P, {
       get when() {
         return t.contextMenu.state();
       },
       get children() {
-        return u(q, {
+        return u(N, {
           get children() {
             return [(() => {
-              var n = j();
-              return z(n, "contextmenu", t.contextMenu.retarget, !0), n;
-            })(), u(H, {
+              var r = te();
+              return z(r, "contextmenu", t.contextMenu.retarget, !0), r;
+            })(), u(V, {
               get x() {
-                return t.contextMenu.position()?.left ?? 0;
+                return b()?.left ?? 0;
               },
               get y() {
-                return t.contextMenu.position()?.top ?? 0;
+                return b()?.top ?? 0;
               },
               get items() {
-                return E();
+                return C();
               }
             })];
           }
@@ -338,7 +358,7 @@ function ge(i) {
     }), null), e;
   })();
 }
-$(["contextmenu"]);
+H(["contextmenu"]);
 export {
-  ge as WorkbenchSurface
+  he as WorkbenchSurface
 };

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

@@ -1,5 +1,5 @@
 export { WorkbenchOverlay, type WorkbenchOverlayProps, } from './WorkbenchOverlay';
-export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
+export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchContextMenuItemsResolver, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
 export { WorkbenchContextMenu, type WorkbenchContextMenuItem, type WorkbenchContextMenuProps, } from './WorkbenchContextMenu';
 export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbenchModel';
 export { WIDGET_REGISTRY, createWorkbenchFilterState, getWidgetEntry, isValidWorkbenchWidgetType, resolveWorkbenchWidgetDefinitions, type WidgetRegistryEntry, } from './widgets/widgetRegistry';

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,6 +1,6 @@
 import { createSignal as A, createMemo as r, onCleanup as Ct } from "solid-js";
 import { ArrowUp as bt, Copy as kt, Trash as Ft } from "../icons/index.js";
-import { getTopZIndex as It, createContextMenuPosition as Mt, createWorkbenchId as vt, createWorkbenchViewportCenteredOnWidget as K, findNearestWidget as Xt, clampScale as Yt, WORKBENCH_CANVAS_ZOOM_STEP as L, WORKBENCH_MIN_SCALE as yt, createWorkbenchViewportFitForWidget as Ot, WORKBENCH_CONTEXT_MENU_WIDTH_PX as _t, estimateContextMenuHeight as zt } from "./workbenchHelpers.js";
+import { getTopZIndex as It, createContextMenuPosition as Mt, createWorkbenchId as vt, createWorkbenchViewportCenteredOnWidget as K, findNearestWidget as Xt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Yt, estimateContextMenuHeight as yt, clampScale as Ot, WORKBENCH_CANVAS_ZOOM_STEP as L, WORKBENCH_MIN_SCALE as _t, createWorkbenchViewportFitForWidget as zt } from "./workbenchHelpers.js";
 import { resolveWorkbenchWidgetDefinitions as Tt, getWidgetEntry as j, createWorkbenchFilterState as Vt } from "./widgets/widgetRegistry.js";
 function Kt(c) {
   const [x, S] = A(null), [U, N] = A(null), [D, G] = A({ width: 0, height: 0 });
@@ -107,8 +107,8 @@ function Kt(c) {
     return Mt({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: _t,
-      menuHeight: zt(n, i)
+      menuWidth: Yt,
+      menuHeight: yt(n, i)
     });
   }), v = (t, e, n) => {
     const i = j(t, w()), o = i.singleton ? C(t) : null;
@@ -167,7 +167,7 @@ function Kt(c) {
   }, y = (t) => {
     c.setState((e) => ({ ...e, viewport: t }));
   }, q = (t) => {
-    const e = h(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Yt(
+    const e = h(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Ot(
       t === "in" ? e.scale * L : e.scale / L
     ), u = {
       x: n.width / 2 - i * s,
@@ -232,7 +232,7 @@ function Kt(c) {
     }));
   }, Wt = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || _(Ot({
+    e.width === 0 || e.height === 0 || _(zt({
       widget: t,
       frameWidth: e.width,
       frameHeight: e.height
@@ -241,7 +241,7 @@ function Kt(c) {
     const e = a();
     e.width === 0 || e.height === 0 || _(K({
       widget: t,
-      scale: yt,
+      scale: _t,
       frameWidth: e.width,
       frameHeight: e.height
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.33",
+  "version": "0.36.35",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",