@floegence/floe-webapp-core 0.41.4 → 0.42.0

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

@@ -1,6 +1,6 @@
 import { type UIFirstSelectionEvent } from '../../utils/uiFirstSelection';
 import { type WorkbenchContextMenuItem } from './WorkbenchContextMenu';
-import { type WorkbenchDockItemActivation, type WorkbenchDockAction, type WorkbenchExternalDockDragController, type WorkbenchExternalDockDragItem, type WorkbenchHostDockItem } from './WorkbenchFilterBar';
+import { type WorkbenchDockItemActivation, type WorkbenchDockAction, type WorkbenchExternalDockDragController, type WorkbenchHostDockItem } from './WorkbenchFilterBar';
 import type { WorkbenchState, WorkbenchAnnotationItem, WorkbenchBackgroundLayer, WorkbenchBackgroundLayerDefaults, WorkbenchBackgroundLayerPatch, WorkbenchContextMenuState, WorkbenchInteractionAdapter, WorkbenchStickyNoteItem, WorkbenchStickyNotePatch, WorkbenchTextAnnotationDefaults, WorkbenchTextAnnotationPatch, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchCreateAtOptions {
     worldX?: number;
@@ -71,7 +71,6 @@ export interface WorkbenchSurfaceProps {
     dockActions?: readonly WorkbenchDockAction[];
     dockItems?: readonly WorkbenchHostDockItem[];
     registerExternalDockDragController?: (controller: WorkbenchExternalDockDragController | null) => void;
-    onExternalDockDrop?: (item: WorkbenchExternalDockDragItem) => void;
     onLayoutInteractionStart?: () => void;
     onLayoutInteractionEnd?: () => void;
     /** Defer pointer/focus widget activation until the visual selection has painted. */

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,6 +1,6 @@
-import { use as j, spread as K, mergeProps as Z, insert as v, createComponent as l, Portal as G, addEventListener as J, template as E, delegateEvents as Q } from "solid-js/web";
-import { createSignal as W, createMemo as w, untrack as h, createEffect as k, onCleanup as A, Show as ee } from "solid-js";
-import { clientToCanvasWorld as B } from "../ui/canvasGeometry.js";
+import { use as j, spread as K, mergeProps as G, insert as v, createComponent as l, Portal as Z, addEventListener as J, template as R, delegateEvents as Q } from "solid-js/web";
+import { createSignal as W, createMemo as w, untrack as h, createEffect as k, onCleanup as y, Show as ee } from "solid-js";
+import { clientToCanvasWorld as T } from "../ui/canvasGeometry.js";
 import { createUIFirstSelection as te } from "../../utils/uiFirstSelection.js";
 import { WorkbenchCanvas as ne } from "./WorkbenchCanvas.js";
 import { WorkbenchContextMenu as oe } from "./WorkbenchContextMenu.js";
@@ -12,9 +12,10 @@ import { createContextMenuPosition as de, WORKBENCH_CONTEXT_MENU_WIDTH_PX as ue,
 import { resolveWorkbenchWidgetPlacementPreview as le, resolveWorkbenchToolPlacementPreview as ge } from "./workbenchPlacement.js";
 import { useWorkbenchModel as we } from "./useWorkbenchModel.js";
 import { resolveWorkbenchInteractionAdapter as me } from "./workbenchInteractionAdapter.js";
-var fe = /* @__PURE__ */ E("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), ve = /* @__PURE__ */ E("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const ke = "F1";
-function T(i) {
+import { SURFACE_PORTAL_LAYER_ATTR as fe, DIALOG_SURFACE_HOST_ATTR as ve } from "../ui/dialogSurfaceScope.js";
+var ke = /* @__PURE__ */ R("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), Ae = /* @__PURE__ */ R("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const ye = "F1";
+function B(i) {
   if (i)
     try {
       i.focus({
@@ -24,7 +25,7 @@ function T(i) {
       i.focus();
     }
 }
-function Ee(i) {
+function Fe(i) {
   const t = we({
     state: () => i.state(),
     setState: (e) => i.setState(e),
@@ -44,7 +45,7 @@ function Ee(i) {
       t.canvas.selectWidget(e), n?.bringToFront && t.canvas.commitFront(e);
     },
     onEvent: (e) => i.onWidgetActivationEvent?.(e)
-  }), R = () => i.widgetActivationMode === "after-paint" ? u.visual() : t.selectedWidgetId(), F = () => {
+  }), E = () => i.widgetActivationMode === "after-paint" ? u.visual() : t.selectedWidgetId(), O = () => {
     if (i.widgetActivationMode !== "after-paint" || !u.pending())
       return t.selectedObject();
     const e = u.visual();
@@ -52,7 +53,7 @@ function Ee(i) {
       kind: "widget",
       id: e
     } : null;
-  }, N = (e) => {
+  }, F = (e) => {
     if (i.widgetActivationMode === "after-paint") {
       if (u.pending() && u.visual() === e) return;
       u.request(e, {
@@ -61,7 +62,7 @@ function Ee(i) {
       return;
     }
     t.canvas.selectWidget(e);
-  }, O = (e) => {
+  }, N = (e) => {
     if (i.widgetActivationMode === "after-paint") {
       if (u.pending() && u.visual() === e) return;
       u.request(e, {
@@ -70,14 +71,14 @@ function Ee(i) {
       return;
     }
     t.canvas.selectWidget(e), t.canvas.commitFront(e);
-  }, [s, X] = W(null), [_, q] = W(null), c = w(() => me(i.interactionAdapter)), [p, g] = W(h(() => c().createInitialInputOwner())), S = w(() => {
+  }, [s, _] = W(null), [P, X] = W(null), c = w(() => me(i.interactionAdapter)), [S, g] = W(h(() => c().createInitialInputOwner())), p = w(() => {
     const e = i.launcherWidgetTypes;
     return !e || e.length <= 0 ? null : new Set(e);
   }), Y = w(() => {
-    const e = t.widgetDefinitions(), n = S();
+    const e = t.widgetDefinitions(), n = p();
     return n ? e.filter((o) => n.has(o.type)) : e;
   }), b = w(() => {
-    const e = t.contextMenu.state(), n = t.contextMenu.items(), o = S(), r = o ? n.filter((f) => {
+    const e = t.contextMenu.state(), n = t.contextMenu.items(), o = p(), r = o ? n.filter((f) => {
       if (f.kind !== "action")
         return !0;
       const L = /^add-(.+)$/.exec(String(f.id ?? ""));
@@ -103,7 +104,7 @@ function Ee(i) {
       menuWidth: ue,
       menuHeight: se(o, r)
     });
-  }), x = (e, n, o) => {
+  }), I = (e, n, o) => {
     const r = c(), a = r.findWidgetRoot(e), d = r.readWidgetId(a);
     if (d) {
       if (t.queries.findStickyNoteById(d)) {
@@ -115,19 +116,19 @@ function Ee(i) {
     }
     const f = s();
     f && e instanceof Node && f.contains(e) && g(r.createCanvasInputOwner(o));
-  }, I = (e = "selection_cleared") => {
+  }, M = (e = "selection_cleared") => {
     const n = c(), o = s();
     t.selection.clear(), g(n.createCanvasInputOwner(e)), queueMicrotask(() => {
       if (!o || typeof document > "u") return;
       const r = document.activeElement;
       if (!(r instanceof HTMLElement) || !o.contains(r)) {
-        T(o);
+        B(o);
         return;
       }
       const a = n.findWidgetRoot(r);
-      T(o), a && document.activeElement === r && r.isConnected && r.blur();
+      B(o), a && document.activeElement === r && r.isConnected && r.blur();
     });
-  }, y = () => {
+  }, A = () => {
     const e = s()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = t.viewport(), o = e?.getBoundingClientRect(), r = o?.width ?? 0, a = o?.height ?? 0;
     return {
       worldX: r > 0 ? (r / 2 - n.x) / n.scale : 240,
@@ -138,7 +139,7 @@ function Ee(i) {
     queueMicrotask(() => {
       n.focusWidgetElement(o, e), g(n.createWidgetInputOwner(e, "activation"));
     });
-  }, P = (e) => {
+  }, q = (e) => {
     const n = t.navigation.fitWidget(e);
     m(n.id);
   }, V = (e) => {
@@ -149,22 +150,22 @@ function Ee(i) {
     i.onApiReady?.({
       ensureWidget: (e, n) => t.widgetActions.ensureWidget(e, n) ?? null,
       createWidget: (e, n) => {
-        const o = y(), r = t.widgetActions.addWidgetAtWorldCenter(e, n?.worldX ?? o.worldX, n?.worldY ?? o.worldY) ?? null;
+        const o = A(), r = t.widgetActions.addWidgetAtWorldCenter(e, n?.worldX ?? o.worldX, n?.worldY ?? o.worldY) ?? null;
         return r && n?.centerViewport !== !1 && t.navigation.centerOnWidget(r), r;
       },
       createTextAnnotation: (e) => {
-        const n = y();
+        const n = A();
         return t.widgetActions.addTextAnnotationAtCursor(e?.worldX ?? n.worldX, e?.worldY ?? n.worldY) ?? null;
       },
       createStickyNote: (e) => {
-        const n = y();
+        const n = A();
         return t.widgetActions.addStickyNoteAtCursor(e?.worldX ?? n.worldX, e?.worldY ?? n.worldY) ?? null;
       },
       createBackgroundLayer: (e) => {
-        const n = y();
+        const n = A();
         return t.widgetActions.addBackgroundLayerAtCursor(e?.worldX ?? n.worldX, e?.worldY ?? n.worldY) ?? null;
       },
-      clearSelection: () => I("selection_cleared"),
+      clearSelection: () => M("selection_cleared"),
       focusWidget: (e, n) => {
         const o = t.navigation.focusWidget(e, n);
         return m(o.id), o;
@@ -198,36 +199,36 @@ function Ee(i) {
       deleteStickyNote: (e) => t.widgetActions.deleteStickyNote(e),
       deleteAnnotation: (e) => t.widgetActions.deleteAnnotation(e),
       deleteBackgroundLayer: (e) => t.widgetActions.deleteBackgroundLayer(e)
-    }), A(() => {
+    }), y(() => {
       i.onApiReady?.(null);
     });
   });
-  const M = () => i.lockShortcut === void 0 ? ke : i.lockShortcut;
+  const x = () => i.lockShortcut === void 0 ? ye : i.lockShortcut;
   k(() => {
     if (typeof window > "u" || !t.contextMenu.state()) return;
     const e = ce({
       ownerWindow: window,
       onDismiss: t.contextMenu.close
     });
-    A(() => e());
+    y(() => e());
   }), k(() => {
-    const e = p();
+    const e = S();
     if (e.kind !== "widget") return;
     t.widgets().some((o) => o.id === e.widgetId) || g(c().createCanvasInputOwner("widget_removed"));
   }), k(() => {
     const e = s();
     if (!e) return;
     const n = (r) => {
-      x(r.target, "pointer", "background_pointer");
+      I(r.target, "pointer", "background_pointer");
     }, o = (r) => {
-      x(r.target, "focus", "background_focus");
+      I(r.target, "focus", "background_focus");
     };
-    e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", o), A(() => {
+    e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", o), y(() => {
       e.removeEventListener("pointerdown", n, !0), e.removeEventListener("focusin", o);
     });
   }), k(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const e = M(), n = (o) => {
+    const e = x(), n = (o) => {
       if (!(o.defaultPrevented || o.isComposing)) {
         if (e !== null && o.key === e) {
           o.preventDefault(), t.lock.toggle();
@@ -236,7 +237,7 @@ function Ee(i) {
         if (!c().shouldBypassGlobalHotkeys({
           root: s(),
           target: o.target,
-          owner: p(),
+          owner: S(),
           interactiveSelector: c().interactiveSelector
         }))
           switch (o.key) {
@@ -259,18 +260,20 @@ function Ee(i) {
           }
       }
     };
-    document.addEventListener("keydown", n, !0), A(() => document.removeEventListener("keydown", n, !0));
+    document.addEventListener("keydown", n, !0), y(() => document.removeEventListener("keydown", n, !0));
   });
   const C = (e, n, o) => {
+    if (o?.worldPoint)
+      return o.worldPoint;
     if (o?.canvasFrame)
-      return B(o.canvasFrame, t.viewport(), {
+      return T(o.canvasFrame, t.viewport(), {
         clientX: e,
         clientY: n
       });
     const r = s()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!r) return null;
     const a = r.getBoundingClientRect();
-    return B(a, t.viewport(), {
+    return T(a, t.viewport(), {
       clientX: e,
       clientY: n
     });
@@ -291,9 +294,9 @@ function Ee(i) {
       e === "background-region" && t.widgetActions.addBackgroundLayerAtCursor(a.worldX, a.worldY);
     }
   }, U = (e) => {
-    e.button === 0 && (c().findWidgetRoot(e.target) || I("background_pointer"));
+    e.button === 0 && (c().findWidgetRoot(e.target) || M("background_pointer"));
   }, $ = w(() => {
-    const e = _();
+    const e = P();
     if (!e) return null;
     const n = C(e.clientX, e.clientY, e);
     return n ? e.kind === "widget" ? le({
@@ -313,13 +316,16 @@ function Ee(i) {
     }) : null;
   });
   return (() => {
-    var e = ve(), n = e.firstChild;
-    return j(X, e), K(e, Z({
+    var e = Ae(), n = e.firstChild;
+    return j(_, e), K(e, G({
       get class() {
         return `workbench-surface${i.class ? ` ${i.class}` : ""}`;
       }
     }, () => ({
-      [c().surfaceRootAttr]: "true"
+      [c().surfaceRootAttr]: "true",
+      [c().dialogSurfaceHostAttr]: "true",
+      [ve]: "true",
+      [fe]: "true"
     }), {
       get "data-workbench-theme"() {
         return t.theme();
@@ -354,10 +360,10 @@ function Ee(i) {
         return t.canvasFrameSize();
       },
       get selectedWidgetId() {
-        return R();
+        return E();
       },
       get selectedObject() {
-        return F();
+        return O();
       },
       get mode() {
         return t.mode();
@@ -387,8 +393,8 @@ function Ee(i) {
         return t.canvas.openCanvasContextMenu;
       },
       onCanvasPointerDown: U,
-      onSelectWidget: N,
-      onActivateWidget: O,
+      onSelectWidget: F,
+      onActivateWidget: N,
       get onWidgetContextMenu() {
         return t.canvas.openWidgetContextMenu;
       },
@@ -465,7 +471,7 @@ function Ee(i) {
         return t.widgetActions.deleteBackgroundLayer;
       },
       onRequestOverview: V,
-      onRequestFit: P,
+      onRequestFit: q,
       get onRequestDelete() {
         return i.onRequestDelete ?? t.widgetActions.deleteWidget;
       },
@@ -483,7 +489,7 @@ function Ee(i) {
         return t.lock.toggle;
       },
       get shortcutLabel() {
-        return M() ?? void 0;
+        return x() ?? void 0;
       }
     }), null), v(e, l(re, {
       get widgetDefinitions() {
@@ -525,10 +531,7 @@ function Ee(i) {
       get registerExternalDockDragController() {
         return i.registerExternalDockDragController;
       },
-      get onExternalDockDrop() {
-        return i.onExternalDockDrop;
-      },
-      onDragPreviewChange: q
+      onDragPreviewChange: X
     }), null), v(e, l(ie, {
       get scaleLabel() {
         return t.scaleLabel();
@@ -548,10 +551,10 @@ function Ee(i) {
         return t.contextMenu.state();
       },
       get children() {
-        return l(G, {
+        return l(Z, {
           get children() {
             return [(() => {
-              var o = fe();
+              var o = ke();
               return J(o, "contextmenu", t.contextMenu.retarget, !0), o;
             })(), l(oe, {
               get x() {
@@ -572,5 +575,5 @@ function Ee(i) {
 }
 Q(["contextmenu"]);
 export {
-  Ee as WorkbenchSurface
+  Fe as WorkbenchSurface
 };

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

@@ -1,6 +1,7 @@
-export { WorkbenchOverlay, type WorkbenchOverlayProps, } from './WorkbenchOverlay';
+export { WorkbenchOverlay, type WorkbenchOverlayProps } from './WorkbenchOverlay';
+export { WorkbenchDockPopoverSurface, type WorkbenchDockPopoverSurfaceProps, } from './WorkbenchDockPopoverSurface';
 export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchCreateAtOptions, type WorkbenchCreateWidgetOptions, type WorkbenchContextMenuItemsResolver, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
-export type { WorkbenchDockAction, WorkbenchDockItemActivation, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
+export type { WorkbenchDockAction, WorkbenchCanvasWidgetPlacement, WorkbenchDockCanvasPlacement, WorkbenchDockDropContext, WorkbenchDockItemActivation, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
 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';
@@ -8,4 +9,4 @@ export * from './types';
 export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, createWorkbenchProjectedRect, createWorkbenchRenderLayerMap, createWorkbenchViewportCenteredOnWidget, createWorkbenchViewportFitForWidget, createWorkbenchWidgetFrame, createWorkbenchWidgetSurfaceMetrics, resolveWorkbenchProjectedSurfaceScaleBehavior, resolveWorkbenchWidgetRenderMode, type WorkbenchRenderLayerMap, type WorkbenchWidgetFrame, type WorkbenchWidgetPlacement, } from './workbenchHelpers';
 export { WORKBENCH_BACKGROUND_MATERIALS, WORKBENCH_DEFAULT_BACKGROUND_MATERIAL, WORKBENCH_DEFAULT_REGION_FILL, WORKBENCH_DEFAULT_STICKY_NOTE_COLOR, WORKBENCH_DEFAULT_TEXT_COLOR, WORKBENCH_DEFAULT_TEXT_FONT, WORKBENCH_REGION_FILL_OPTIONS, WORKBENCH_STICKY_NOTE_COLORS, WORKBENCH_TEXT_COLOR_OPTIONS, WORKBENCH_TEXT_EMOJI_OPTIONS, WORKBENCH_TEXT_FONT_OPTIONS, } from './workbenchOptions';
 export { DEFAULT_WORKBENCH_THEME, WORKBENCH_THEME_IDS, WORKBENCH_THEMES, isWorkbenchThemeId, workbenchThemeMeta, type WorkbenchThemeId, type WorkbenchThemeMeta, type WorkbenchThemePreview, } from './workbenchThemes';
-export { WorkbenchThemeSelector, type WorkbenchThemeSelectorProps, } from './WorkbenchThemeSelector';
+export { WorkbenchThemeSelector, type WorkbenchThemeSelectorProps } from './WorkbenchThemeSelector';