@nocobase/flow-engine 2.1.0-beta.2 → 2.1.0-beta.21

package/lib/components/settings/wrappers/contextual/StepSettingsDialog.js

@@ -126,6 +126,15 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
     }
   };
   const openView = model.context.viewer[mode].bind(model.context.viewer);
+  const resolvedUiModeProps = (0, import_reactive.toJS)(uiModeProps) || {};
+  const { zIndex: uiModeZIndex, ...restUiModeProps } = resolvedUiModeProps;
+  const resolveDialogZIndex = /* @__PURE__ */ __name((rawZIndex) => {
+    var _a2, _b2;
+    const nextZIndex = typeof ((_a2 = model.context.viewer) == null ? void 0 : _a2.getNextZIndex) === "function" ? model.context.viewer.getNextZIndex() : (((_b2 = model.context.themeToken) == null ? void 0 : _b2.zIndexPopupBase) || 1e3) + 1;
+    const inputZIndex = Number(rawZIndex) || 0;
+    return Math.max(nextZIndex, inputZIndex);
+  }, "resolveDialogZIndex");
+  const mergedZIndex = resolveDialogZIndex(uiModeZIndex);
   const form = (0, import_core.createForm)({
     initialValues: (0, import_utils.compileUiSchema)(scopes, initialValues)
   });
@@ -141,7 +150,8 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
-    ...(0, import_reactive.toJS)(uiModeProps),
+    ...restUiModeProps,
+    zIndex: mergedZIndex,
     // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
     inputArgs,
     onClose: /* @__PURE__ */ __name(() => {
@@ -155,7 +165,11 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
         (0, import_react2.useEffect)(() => {
           return (0, import_reactive.autorun)(() => {
             const dynamicProps = (0, import_reactive.toJS)(uiModeProps);
-            currentDialog.update(dynamicProps);
+            const { zIndex, ...restDynamicProps } = dynamicProps || {};
+            currentDialog.update({
+              ...restDynamicProps,
+              zIndex: resolveDialogZIndex(zIndex)
+            });
           });
         }, []);
         const compiledFormSchema = (0, import_utils.compileUiSchema)(scopes, formSchema);

package/lib/components/settings/wrappers/contextual/useFloatToolbarPortal.d.ts

@@ -0,0 +1,36 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { CSSProperties, RefObject } from 'react';
+type ToolbarPortalPositioningMode = 'fixed' | 'absolute';
+export interface ToolbarPortalRenderSnapshot {
+    mountElement: HTMLElement;
+    positioningMode: ToolbarPortalPositioningMode;
+}
+export interface ToolbarPortalRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+interface UseFloatToolbarPortalOptions {
+    active: boolean;
+    containerRef: RefObject<HTMLDivElement>;
+    toolbarContainerRef: RefObject<HTMLDivElement>;
+    toolbarStyle?: CSSProperties;
+}
+interface UseFloatToolbarPortalResult {
+    portalRect: ToolbarPortalRect;
+    portalRenderSnapshot: ToolbarPortalRenderSnapshot | null;
+    getPopupContainer: (triggerNode?: HTMLElement) => HTMLElement;
+    updatePortalRect: () => void;
+    schedulePortalRectUpdate: () => void;
+}
+export declare const omitToolbarPortalInsetStyle: (toolbarStyle?: CSSProperties) => CSSProperties | undefined;
+export declare const useFloatToolbarPortal: ({ active, containerRef, toolbarContainerRef, toolbarStyle, }: UseFloatToolbarPortalOptions) => UseFloatToolbarPortalResult;
+export {};

package/lib/components/settings/wrappers/contextual/useFloatToolbarPortal.js

@@ -0,0 +1,272 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFloatToolbarPortal_exports = {};
+__export(useFloatToolbarPortal_exports, {
+  omitToolbarPortalInsetStyle: () => omitToolbarPortalInsetStyle,
+  useFloatToolbarPortal: () => useFloatToolbarPortal
+});
+module.exports = __toCommonJS(useFloatToolbarPortal_exports);
+var import_react = require("react");
+const APP_CONTAINER_SELECTOR = "#nocobase-app-container";
+const DRAWER_CONTENT_WRAPPER_SELECTOR = ".ant-drawer-content-wrapper";
+const DRAWER_CONTENT_SELECTOR = ".ant-drawer-content";
+const DRAWER_ROOT_SELECTOR = ".ant-drawer-root";
+const MODAL_SELECTOR = ".ant-modal";
+const MODAL_WRAP_SELECTOR = ".ant-modal-wrap";
+const MODAL_ROOT_SELECTOR = ".ant-modal-root";
+const defaultPortalRect = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+const getClosestElement = /* @__PURE__ */ __name((hostEl, selector) => hostEl == null ? void 0 : hostEl.closest(selector), "getClosestElement");
+const createAbsolutePortalHostConfig = /* @__PURE__ */ __name((element) => ({
+  mountElement: element,
+  positioningElement: element,
+  positioningMode: "absolute"
+}), "createAbsolutePortalHostConfig");
+const popupPortalHostResolvers = [
+  (hostEl) => getClosestElement(hostEl, DRAWER_CONTENT_WRAPPER_SELECTOR),
+  (hostEl) => getClosestElement(hostEl, MODAL_WRAP_SELECTOR),
+  (hostEl) => getClosestElement(hostEl, MODAL_SELECTOR),
+  (hostEl) => {
+    const drawerContent = getClosestElement(hostEl, DRAWER_CONTENT_SELECTOR);
+    return drawerContent ? getClosestElement(drawerContent, DRAWER_CONTENT_WRAPPER_SELECTOR) || drawerContent : null;
+  },
+  (hostEl) => getClosestElement(hostEl, DRAWER_ROOT_SELECTOR),
+  (hostEl) => getClosestElement(hostEl, MODAL_ROOT_SELECTOR)
+];
+const getPopupPortalHostConfig = /* @__PURE__ */ __name((hostEl) => {
+  for (const resolveHost of popupPortalHostResolvers) {
+    const popupHost = resolveHost(hostEl);
+    if (popupHost) {
+      return createAbsolutePortalHostConfig(popupHost);
+    }
+  }
+  return null;
+}, "getPopupPortalHostConfig");
+const getToolbarPortalHostConfig = /* @__PURE__ */ __name((hostEl) => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const popupRootConfig = getPopupPortalHostConfig(hostEl);
+  if (popupRootConfig) {
+    return popupRootConfig;
+  }
+  const appContainer = document.querySelector(APP_CONTAINER_SELECTOR);
+  if (appContainer) {
+    return createAbsolutePortalHostConfig(appContainer);
+  }
+  return {
+    mountElement: document.body,
+    positioningElement: document.body,
+    positioningMode: "fixed"
+  };
+}, "getToolbarPortalHostConfig");
+const parseToolbarInsetValue = /* @__PURE__ */ __name((value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const trimmedValue = value.trim();
+    if (/^-?\d+(\.\d+)?(px)?$/.test(trimmedValue)) {
+      return Number.parseFloat(trimmedValue);
+    }
+  }
+  return 0;
+}, "parseToolbarInsetValue");
+const resolveToolbarPortalInset = /* @__PURE__ */ __name((toolbarStyle) => {
+  return {
+    top: parseToolbarInsetValue(toolbarStyle == null ? void 0 : toolbarStyle.top),
+    left: parseToolbarInsetValue(toolbarStyle == null ? void 0 : toolbarStyle.left),
+    right: parseToolbarInsetValue(toolbarStyle == null ? void 0 : toolbarStyle.right),
+    bottom: parseToolbarInsetValue(toolbarStyle == null ? void 0 : toolbarStyle.bottom)
+  };
+}, "resolveToolbarPortalInset");
+const getAbsolutePositioningElement = /* @__PURE__ */ __name((toolbarEl, portalHostConfig) => {
+  if (!portalHostConfig || portalHostConfig.positioningMode !== "absolute") {
+    return (portalHostConfig == null ? void 0 : portalHostConfig.positioningElement) || null;
+  }
+  const offsetParent = toolbarEl == null ? void 0 : toolbarEl.offsetParent;
+  if (offsetParent instanceof HTMLElement && offsetParent !== document.body && offsetParent !== document.documentElement) {
+    return offsetParent;
+  }
+  return portalHostConfig.positioningElement;
+}, "getAbsolutePositioningElement");
+const calculatePortalRect = /* @__PURE__ */ __name((hostEl, portalHostConfig, toolbarStyle, toolbarEl) => {
+  if (!hostEl) {
+    return defaultPortalRect;
+  }
+  const inset = resolveToolbarPortalInset(toolbarStyle);
+  const hostRect = hostEl.getBoundingClientRect();
+  let rect;
+  if (!portalHostConfig || portalHostConfig.positioningMode === "fixed") {
+    rect = {
+      top: hostRect.top,
+      left: hostRect.left,
+      width: hostRect.width,
+      height: hostRect.height
+    };
+  } else {
+    const positioningElement = getAbsolutePositioningElement(toolbarEl || null, portalHostConfig);
+    const portalHostRect = (positioningElement == null ? void 0 : positioningElement.getBoundingClientRect()) || portalHostConfig.positioningElement.getBoundingClientRect();
+    const scrollTop = (positioningElement == null ? void 0 : positioningElement.scrollTop) ?? portalHostConfig.positioningElement.scrollTop;
+    const scrollLeft = (positioningElement == null ? void 0 : positioningElement.scrollLeft) ?? portalHostConfig.positioningElement.scrollLeft;
+    rect = {
+      top: hostRect.top - portalHostRect.top + scrollTop,
+      left: hostRect.left - portalHostRect.left + scrollLeft,
+      width: hostRect.width,
+      height: hostRect.height
+    };
+  }
+  return {
+    top: rect.top + inset.top,
+    left: rect.left + inset.left,
+    width: Math.max(0, rect.width - inset.left - inset.right),
+    height: Math.max(0, rect.height - inset.top - inset.bottom)
+  };
+}, "calculatePortalRect");
+const omitToolbarPortalInsetStyle = /* @__PURE__ */ __name((toolbarStyle) => {
+  if (!toolbarStyle) {
+    return void 0;
+  }
+  const nextStyle = { ...toolbarStyle };
+  delete nextStyle.top;
+  delete nextStyle.left;
+  delete nextStyle.right;
+  delete nextStyle.bottom;
+  return nextStyle;
+}, "omitToolbarPortalInsetStyle");
+const useFloatToolbarPortal = /* @__PURE__ */ __name(({
+  active,
+  containerRef,
+  toolbarContainerRef,
+  toolbarStyle
+}) => {
+  const [portalRect, setPortalRect] = (0, import_react.useState)(defaultPortalRect);
+  const [portalRenderSnapshot, setPortalRenderSnapshot] = (0, import_react.useState)(null);
+  const portalHostConfigRef = (0, import_react.useRef)(null);
+  const portalRafIdRef = (0, import_react.useRef)(null);
+  const updatePortalRect = (0, import_react.useCallback)(() => {
+    const hostElement = containerRef.current;
+    if (!hostElement) {
+      return;
+    }
+    const nextPortalHostConfig = getToolbarPortalHostConfig(hostElement);
+    portalHostConfigRef.current = nextPortalHostConfig;
+    setPortalRenderSnapshot((prevSnapshot) => {
+      if (!nextPortalHostConfig) {
+        return prevSnapshot === null ? prevSnapshot : null;
+      }
+      if ((prevSnapshot == null ? void 0 : prevSnapshot.mountElement) === nextPortalHostConfig.mountElement && (prevSnapshot == null ? void 0 : prevSnapshot.positioningMode) === nextPortalHostConfig.positioningMode) {
+        return prevSnapshot;
+      }
+      return {
+        mountElement: nextPortalHostConfig.mountElement,
+        positioningMode: nextPortalHostConfig.positioningMode
+      };
+    });
+    const nextRect = calculatePortalRect(hostElement, nextPortalHostConfig, toolbarStyle, toolbarContainerRef.current);
+    setPortalRect((prevRect) => {
+      if (prevRect.top === nextRect.top && prevRect.left === nextRect.left && prevRect.width === nextRect.width && prevRect.height === nextRect.height) {
+        return prevRect;
+      }
+      return nextRect;
+    });
+  }, [containerRef, toolbarContainerRef, toolbarStyle]);
+  const schedulePortalRectUpdate = (0, import_react.useCallback)(() => {
+    if (portalRafIdRef.current !== null) {
+      return;
+    }
+    portalRafIdRef.current = window.requestAnimationFrame(() => {
+      portalRafIdRef.current = null;
+      updatePortalRect();
+    });
+  }, [updatePortalRect]);
+  const getPopupContainer = (0, import_react.useCallback)(
+    (triggerNode) => {
+      var _a, _b, _c, _d, _e;
+      const fallbackContainer = ((_a = triggerNode == null ? void 0 : triggerNode.ownerDocument) == null ? void 0 : _a.body) || ((_c = (_b = containerRef.current) == null ? void 0 : _b.ownerDocument) == null ? void 0 : _c.body) || (typeof document !== "undefined" ? document.body : null);
+      return ((_d = portalHostConfigRef.current) == null ? void 0 : _d.mountElement) || ((_e = getToolbarPortalHostConfig(triggerNode || containerRef.current)) == null ? void 0 : _e.mountElement) || fallbackContainer;
+    },
+    [containerRef]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    if (!active) {
+      return;
+    }
+    updatePortalRect();
+    const handleViewportChange = /* @__PURE__ */ __name(() => {
+      schedulePortalRectUpdate();
+    }, "handleViewportChange");
+    const container = containerRef.current;
+    const mountElement = (_a = portalHostConfigRef.current) == null ? void 0 : _a.mountElement;
+    const positioningElement = (_b = portalHostConfigRef.current) == null ? void 0 : _b.positioningElement;
+    const resizeObserver = typeof ResizeObserver !== "undefined" && container ? new ResizeObserver(() => {
+      schedulePortalRectUpdate();
+    }) : null;
+    if (container) {
+      resizeObserver == null ? void 0 : resizeObserver.observe(container);
+    }
+    if (mountElement && mountElement !== container) {
+      resizeObserver == null ? void 0 : resizeObserver.observe(mountElement);
+    }
+    if (positioningElement && positioningElement !== container && positioningElement !== mountElement) {
+      resizeObserver == null ? void 0 : resizeObserver.observe(positioningElement);
+    }
+    window.addEventListener("resize", handleViewportChange);
+    window.addEventListener("scroll", handleViewportChange, true);
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      window.removeEventListener("resize", handleViewportChange);
+      window.removeEventListener("scroll", handleViewportChange, true);
+    };
+  }, [active, containerRef, schedulePortalRectUpdate, updatePortalRect]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (portalRafIdRef.current !== null) {
+        window.cancelAnimationFrame(portalRafIdRef.current);
+      }
+      portalHostConfigRef.current = null;
+    };
+  }, []);
+  return {
+    portalRect,
+    portalRenderSnapshot,
+    getPopupContainer,
+    updatePortalRect,
+    schedulePortalRectUpdate
+  };
+}, "useFloatToolbarPortal");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  omitToolbarPortalInsetStyle,
+  useFloatToolbarPortal
+});

package/lib/components/settings/wrappers/contextual/useFloatToolbarVisibility.d.ts

@@ -0,0 +1,30 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+interface UseFloatToolbarVisibilityOptions {
+    modelUid: string;
+    containerRef: RefObject<HTMLDivElement>;
+    toolbarContainerRef: RefObject<HTMLDivElement>;
+    updatePortalRect: () => void;
+    schedulePortalRectUpdate: () => void;
+}
+interface UseFloatToolbarVisibilityResult {
+    isToolbarVisible: boolean;
+    shouldRenderToolbar: boolean;
+    handleSettingsMenuOpenChange: (open: boolean) => void;
+    handleChildHover: (e: ReactMouseEvent) => void;
+    handleHostMouseEnter: () => void;
+    handleHostMouseLeave: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    handleToolbarMouseEnter: () => void;
+    handleToolbarMouseLeave: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    handleResizeDragStart: () => void;
+    handleResizeDragEnd: () => void;
+}
+export declare const useFloatToolbarVisibility: ({ modelUid, containerRef, toolbarContainerRef, updatePortalRect, schedulePortalRectUpdate, }: UseFloatToolbarVisibilityOptions) => UseFloatToolbarVisibilityResult;
+export {};

package/lib/components/settings/wrappers/contextual/useFloatToolbarVisibility.js

@@ -0,0 +1,247 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useFloatToolbarVisibility_exports = {};
+__export(useFloatToolbarVisibility_exports, {
+  useFloatToolbarVisibility: () => useFloatToolbarVisibility
+});
+module.exports = __toCommonJS(useFloatToolbarVisibility_exports);
+var import_react = require("react");
+const TOOLBAR_HIDE_DELAY = 180;
+const CHILD_FLOAT_MENU_ACTIVITY_EVENT = "nb-float-menu-child-activity";
+const isNodeWithin = /* @__PURE__ */ __name((target, container) => {
+  return target instanceof Node && !!(container == null ? void 0 : container.contains(target));
+}, "isNodeWithin");
+const getToolbarModelUidFromTarget = /* @__PURE__ */ __name((target) => {
+  var _a;
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  return ((_a = target.closest(".nb-toolbar-container[data-model-uid]")) == null ? void 0 : _a.getAttribute("data-model-uid")) || null;
+}, "getToolbarModelUidFromTarget");
+const isNodeWithinDescendantFloatToolbar = /* @__PURE__ */ __name((target, container, currentModelUid) => {
+  const targetModelUid = getToolbarModelUidFromTarget(target);
+  if (!container || !targetModelUid || targetModelUid === currentModelUid) {
+    return false;
+  }
+  return Array.from(
+    container.querySelectorAll('[data-has-float-menu="true"][data-float-menu-model-uid]')
+  ).some(
+    (hostElement) => hostElement !== container && hostElement.getAttribute("data-float-menu-model-uid") === targetModelUid
+  );
+}, "isNodeWithinDescendantFloatToolbar");
+const useFloatToolbarVisibility = /* @__PURE__ */ __name(({
+  modelUid,
+  containerRef,
+  toolbarContainerRef,
+  updatePortalRect,
+  schedulePortalRectUpdate
+}) => {
+  const [hideMenu, setHideMenu] = (0, import_react.useState)(false);
+  const [isHostHovered, setIsHostHovered] = (0, import_react.useState)(false);
+  const [isToolbarHovered, setIsToolbarHovered] = (0, import_react.useState)(false);
+  const [isDraggingToolbar, setIsDraggingToolbar] = (0, import_react.useState)(false);
+  const [isToolbarPinned, setIsToolbarPinned] = (0, import_react.useState)(false);
+  const [isHidePending, setIsHidePending] = (0, import_react.useState)(false);
+  const [activeChildToolbarIds, setActiveChildToolbarIds] = (0, import_react.useState)([]);
+  const hideToolbarTimerRef = (0, import_react.useRef)(null);
+  const reportedChildActivityToAncestorsRef = (0, import_react.useRef)(false);
+  const hasActiveChildToolbar = activeChildToolbarIds.length > 0;
+  const isToolbarVisible = !hideMenu && !hasActiveChildToolbar && (isHostHovered || isToolbarHovered || isDraggingToolbar || isToolbarPinned);
+  const shouldRenderToolbar = isToolbarVisible || isToolbarPinned || isDraggingToolbar;
+  const isToolbarInteractionActive = isHostHovered || isToolbarHovered || isDraggingToolbar || isToolbarPinned || isHidePending;
+  const clearHideToolbarTimer = (0, import_react.useCallback)(() => {
+    if (hideToolbarTimerRef.current !== null) {
+      window.clearTimeout(hideToolbarTimerRef.current);
+      hideToolbarTimerRef.current = null;
+    }
+    setIsHidePending(false);
+  }, []);
+  const scheduleHideToolbar = (0, import_react.useCallback)(() => {
+    clearHideToolbarTimer();
+    setIsHidePending(true);
+    hideToolbarTimerRef.current = window.setTimeout(() => {
+      hideToolbarTimerRef.current = null;
+      setIsHidePending(false);
+      if (isDraggingToolbar || isToolbarPinned) {
+        return;
+      }
+      setIsHostHovered(false);
+      setIsToolbarHovered(false);
+    }, TOOLBAR_HIDE_DELAY);
+  }, [clearHideToolbarTimer, isDraggingToolbar, isToolbarPinned]);
+  const handleSettingsMenuOpenChange = (0, import_react.useCallback)((open) => {
+    setIsToolbarPinned(open);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const hostElement = containerRef.current;
+    if (!hostElement) {
+      return;
+    }
+    const handleChildToolbarActivity = /* @__PURE__ */ __name((event) => {
+      var _a;
+      const customEvent = event;
+      if (!(customEvent.target instanceof HTMLElement) || customEvent.target === hostElement) {
+        return;
+      }
+      const childModelUid = (_a = customEvent.detail) == null ? void 0 : _a.modelUid;
+      if (!childModelUid) {
+        return;
+      }
+      setActiveChildToolbarIds((prevIds) => {
+        var _a2;
+        return ((_a2 = customEvent.detail) == null ? void 0 : _a2.active) ? prevIds.includes(childModelUid) ? prevIds : [...prevIds, childModelUid] : prevIds.filter((id) => id !== childModelUid);
+      });
+    }, "handleChildToolbarActivity");
+    hostElement.addEventListener(CHILD_FLOAT_MENU_ACTIVITY_EVENT, handleChildToolbarActivity);
+    return () => {
+      hostElement.removeEventListener(CHILD_FLOAT_MENU_ACTIVITY_EVENT, handleChildToolbarActivity);
+    };
+  }, [containerRef]);
+  (0, import_react.useEffect)(() => {
+    const hostElement = containerRef.current;
+    if (!hostElement || reportedChildActivityToAncestorsRef.current === isToolbarInteractionActive) {
+      return;
+    }
+    reportedChildActivityToAncestorsRef.current = isToolbarInteractionActive;
+    hostElement.dispatchEvent(
+      new CustomEvent(CHILD_FLOAT_MENU_ACTIVITY_EVENT, {
+        bubbles: true,
+        detail: { active: isToolbarInteractionActive, modelUid }
+      })
+    );
+  }, [containerRef, isToolbarInteractionActive, modelUid]);
+  (0, import_react.useEffect)(() => {
+    const hostElement = containerRef.current;
+    return () => {
+      if (hostElement && reportedChildActivityToAncestorsRef.current) {
+        hostElement.dispatchEvent(
+          new CustomEvent(CHILD_FLOAT_MENU_ACTIVITY_EVENT, {
+            bubbles: true,
+            detail: { active: false, modelUid }
+          })
+        );
+        reportedChildActivityToAncestorsRef.current = false;
+      }
+      clearHideToolbarTimer();
+    };
+  }, [clearHideToolbarTimer, containerRef, modelUid]);
+  (0, import_react.useEffect)(() => {
+    if (isToolbarPinned) {
+      clearHideToolbarTimer();
+      updatePortalRect();
+    }
+  }, [clearHideToolbarTimer, isToolbarPinned, updatePortalRect]);
+  const handleChildHover = (0, import_react.useCallback)(
+    (e) => {
+      const target = e.target;
+      const childWithMenu = target.closest("[data-has-float-menu]");
+      const isCurrentHostTarget = !childWithMenu || childWithMenu === containerRef.current;
+      if (isCurrentHostTarget) {
+        clearHideToolbarTimer();
+        setIsHostHovered(true);
+      }
+      setHideMenu(!!childWithMenu && childWithMenu !== containerRef.current);
+    },
+    [clearHideToolbarTimer, containerRef]
+  );
+  const handleHostMouseEnter = (0, import_react.useCallback)(() => {
+    clearHideToolbarTimer();
+    setHideMenu(false);
+    updatePortalRect();
+    setIsHostHovered(true);
+  }, [clearHideToolbarTimer, updatePortalRect]);
+  const handleHostMouseLeave = (0, import_react.useCallback)(
+    (e) => {
+      if (isToolbarPinned) {
+        setIsHostHovered(false);
+        return;
+      }
+      if (isNodeWithin(e.relatedTarget, toolbarContainerRef.current)) {
+        clearHideToolbarTimer();
+        setIsHostHovered(false);
+        setIsToolbarHovered(true);
+        return;
+      }
+      if (isNodeWithinDescendantFloatToolbar(e.relatedTarget, containerRef.current, modelUid)) {
+        clearHideToolbarTimer();
+        setHideMenu(false);
+        setIsHostHovered(true);
+        return;
+      }
+      scheduleHideToolbar();
+    },
+    [clearHideToolbarTimer, containerRef, isToolbarPinned, modelUid, scheduleHideToolbar, toolbarContainerRef]
+  );
+  const handleToolbarMouseEnter = (0, import_react.useCallback)(() => {
+    clearHideToolbarTimer();
+    updatePortalRect();
+    setIsHostHovered(false);
+    setIsToolbarHovered(true);
+  }, [clearHideToolbarTimer, updatePortalRect]);
+  const handleToolbarMouseLeave = (0, import_react.useCallback)(
+    (e) => {
+      if (isToolbarPinned) {
+        setIsToolbarHovered(false);
+        return;
+      }
+      setIsToolbarHovered(false);
+      if (isNodeWithin(e.relatedTarget, containerRef.current)) {
+        clearHideToolbarTimer();
+        setIsHostHovered(true);
+        return;
+      }
+      scheduleHideToolbar();
+    },
+    [clearHideToolbarTimer, containerRef, isToolbarPinned, scheduleHideToolbar]
+  );
+  const handleResizeDragStart = (0, import_react.useCallback)(() => {
+    updatePortalRect();
+    setIsDraggingToolbar(true);
+    schedulePortalRectUpdate();
+  }, [schedulePortalRectUpdate, updatePortalRect]);
+  const handleResizeDragEnd = (0, import_react.useCallback)(() => {
+    setIsDraggingToolbar(false);
+    schedulePortalRectUpdate();
+  }, [schedulePortalRectUpdate]);
+  return {
+    isToolbarVisible,
+    shouldRenderToolbar,
+    handleSettingsMenuOpenChange,
+    handleChildHover,
+    handleHostMouseEnter,
+    handleHostMouseLeave,
+    handleToolbarMouseEnter,
+    handleToolbarMouseLeave,
+    handleResizeDragStart,
+    handleResizeDragEnd
+  };
+}, "useFloatToolbarVisibility");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFloatToolbarVisibility
+});

package/lib/components/subModel/AddSubModelButton.js

@@ -376,6 +376,21 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     }),
     [model, subModelKey, subModelType]
   );
+  import_react.default.useEffect(() => {
+    var _a, _b, _c;
+    const handleSubModelChanged = /* @__PURE__ */ __name(() => {
+      setRefreshTick((x) => x + 1);
+    }, "handleSubModelChanged");
+    (_a = model.emitter) == null ? void 0 : _a.on("onSubModelAdded", handleSubModelChanged);
+    (_b = model.emitter) == null ? void 0 : _b.on("onSubModelRemoved", handleSubModelChanged);
+    (_c = model.emitter) == null ? void 0 : _c.on("onSubModelReplaced", handleSubModelChanged);
+    return () => {
+      var _a2, _b2, _c2;
+      (_a2 = model.emitter) == null ? void 0 : _a2.off("onSubModelAdded", handleSubModelChanged);
+      (_b2 = model.emitter) == null ? void 0 : _b2.off("onSubModelRemoved", handleSubModelChanged);
+      (_c2 = model.emitter) == null ? void 0 : _c2.off("onSubModelReplaced", handleSubModelChanged);
+    };
+  }, [model]);
   const onClick = /* @__PURE__ */ __name(async (info) => {
     const clickedItem = info.originalItem || info;
     const item = clickedItem.originalItem || clickedItem;
@@ -415,7 +430,7 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     }
     let addedModel;
     try {
-      addedModel = model.flowEngine.createModel({
+      addedModel = await model.flowEngine.createModelAsync({
         ...import_lodash.default.cloneDeep(createOpts),
         parentId: model.uid,
         subKey: subModelKey,
@@ -461,6 +476,17 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     () => transformItems(finalItems, model, subModelKey, subModelType),
     [finalItems, model, subModelKey, subModelType]
   );
+  (0, import_react.useEffect)(() => {
+    const handleSubModelChange = /* @__PURE__ */ __name(() => {
+      setRefreshTick((x) => x + 1);
+    }, "handleSubModelChange");
+    model.emitter.on("onSubModelAdded", handleSubModelChange);
+    model.emitter.on("onSubModelRemoved", handleSubModelChange);
+    return () => {
+      model.emitter.off("onSubModelAdded", handleSubModelChange);
+      model.emitter.off("onSubModelRemoved", handleSubModelChange);
+    };
+  }, [model]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_LazyDropdown.default,
     {