@nocobase/flow-engine 2.1.0-alpha.1 → 2.1.0-alpha.11

package/lib/JSRunner.d.ts

@@ -11,7 +11,22 @@ export interface JSRunnerOptions {
     timeoutMs?: number;
     globals?: Record<string, any>;
     version?: string;
+    /**
+     * Enable RunJS template compatibility preprocessing for `{{ ... }}`.
+     * When enabled (or falling back to version default),
+     * the code will be rewritten to call `ctx.resolveJsonTemplate(...)` at runtime.
+     */
+    preprocessTemplates?: boolean;
 }
+/**
+ * Decide whether RunJS `{{ ... }}` compatibility preprocessing should run.
+ *
+ * Priority:
+ * 1. Explicit `preprocessTemplates` option always wins.
+ * 2. Otherwise, `version === 'v2'` disables preprocessing.
+ * 3. Fallback keeps v1-compatible behavior (enabled).
+ */
+export declare function shouldPreprocessRunJSTemplates(options?: Pick<JSRunnerOptions, 'preprocessTemplates' | 'version'>): boolean;
 export declare class JSRunner {
     private globals;
     private timeoutMs;

package/lib/JSRunner.js

@@ -27,14 +27,58 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var JSRunner_exports = {};
 __export(JSRunner_exports, {
-  JSRunner: () => JSRunner
+  JSRunner: () => JSRunner,
+  shouldPreprocessRunJSTemplates: () => shouldPreprocessRunJSTemplates
 });
 module.exports = __toCommonJS(JSRunner_exports);
 var import_ses = require("ses");
+var import_exceptions = require("./utils/exceptions");
+function shouldPreprocessRunJSTemplates(options) {
+  if (typeof (options == null ? void 0 : options.preprocessTemplates) === "boolean") {
+    return options.preprocessTemplates;
+  }
+  return (options == null ? void 0 : options.version) !== "v2";
+}
+__name(shouldPreprocessRunJSTemplates, "shouldPreprocessRunJSTemplates");
+const BARE_CTX_TEMPLATE_RE = /(^|[=(:,[\s)])(\{\{\s*(ctx(?:\.|\[|\?\.)[^}]*)\s*\}\})/m;
+function extractDeprecatedCtxTemplateUsage(code) {
+  const src = String(code || "");
+  const m = src.match(BARE_CTX_TEMPLATE_RE);
+  if (!m) return null;
+  const placeholder = String(m[2] || "").trim();
+  const expression = String(m[3] || "").trim();
+  if (!placeholder || !expression) return null;
+  return { placeholder, expression };
+}
+__name(extractDeprecatedCtxTemplateUsage, "extractDeprecatedCtxTemplateUsage");
+function shouldHintCtxTemplateSyntax(err, usage) {
+  const isSyntaxError = err instanceof SyntaxError || String((err == null ? void 0 : err.name) || "") === "SyntaxError";
+  if (!isSyntaxError) return false;
+  if (!usage) return false;
+  const msg = String((err == null ? void 0 : err.message) || err || "");
+  return /unexpected token/i.test(msg);
+}
+__name(shouldHintCtxTemplateSyntax, "shouldHintCtxTemplateSyntax");
+function toCtxTemplateSyntaxHintError(err, usage) {
+  const hint = `"${usage.placeholder}" has been deprecated and cannot be used as executable RunJS syntax. Use await ctx.getVar("${usage.expression}") instead, or keep "${usage.placeholder}" as a plain string.`;
+  const out = new SyntaxError(hint);
+  try {
+    out.cause = err;
+  } catch (_) {
+  }
+  try {
+    out.__runjsHideLocation = true;
+    out.stack = `${out.name}: ${out.message}`;
+  } catch (_) {
+  }
+  return out;
+}
+__name(toCtxTemplateSyntaxHintError, "toCtxTemplateSyntaxHintError");
 const _JSRunner = class _JSRunner {
   globals;
   timeoutMs;
   constructor(options = {}) {
+    var _a, _b;
     const bindWindowFn = /* @__PURE__ */ __name((key) => {
       if (typeof window !== "undefined" && typeof window[key] === "function") {
         return window[key].bind(window);
@@ -42,13 +86,34 @@ const _JSRunner = class _JSRunner {
       const fn = globalThis[key];
       return typeof fn === "function" ? fn.bind(globalThis) : fn;
     }, "bindWindowFn");
+    const providedGlobals = options.globals || {};
+    const liftedGlobals = {};
+    if (!Object.prototype.hasOwnProperty.call(providedGlobals, "Blob")) {
+      try {
+        const blobCtor = (_a = providedGlobals.window) == null ? void 0 : _a.Blob;
+        if (typeof blobCtor !== "undefined") {
+          liftedGlobals.Blob = blobCtor;
+        }
+      } catch {
+      }
+    }
+    if (!Object.prototype.hasOwnProperty.call(providedGlobals, "URL")) {
+      try {
+        const urlCtor = (_b = providedGlobals.window) == null ? void 0 : _b.URL;
+        if (typeof urlCtor !== "undefined") {
+          liftedGlobals.URL = urlCtor;
+        }
+      } catch {
+      }
+    }
     this.globals = {
       console,
       setTimeout: bindWindowFn("setTimeout"),
       clearTimeout: bindWindowFn("clearTimeout"),
       setInterval: bindWindowFn("setInterval"),
       clearInterval: bindWindowFn("clearInterval"),
-      ...options.globals || {}
+      ...liftedGlobals,
+      ...providedGlobals
     };
     this.timeoutMs = options.timeoutMs ?? 5e3;
   }
@@ -62,7 +127,8 @@ const _JSRunner = class _JSRunner {
    * 异步运行代码，带错误处理和超时机制
    */
   async run(code) {
-    if (location == null ? void 0 : location.search.includes("skipRunJs=true")) {
+    const search = typeof location !== "undefined" ? location.search : void 0;
+    if (typeof search === "string" && search.includes("skipRunJs=true")) {
       return { success: true, value: null };
     }
     const wrapped = `(async () => {
@@ -81,11 +147,19 @@ const _JSRunner = class _JSRunner {
       const result = await Promise.race([task, timeoutPromise]);
       return { success: true, value: result };
     } catch (err) {
-      console.error(err);
+      if (err instanceof import_exceptions.FlowExitException) {
+        throw err;
+      }
+      if (err instanceof import_exceptions.FlowExitAllException) {
+        throw err;
+      }
+      const usage = extractDeprecatedCtxTemplateUsage(code);
+      const outErr = shouldHintCtxTemplateSyntax(err, usage) && usage ? toCtxTemplateSyntaxHintError(err, usage) : err;
+      console.error(outErr);
       return {
         success: false,
-        error: err,
-        timeout: err.message === "Execution timed out"
+        error: outErr,
+        timeout: (outErr == null ? void 0 : outErr.message) === "Execution timed out"
       };
     }
   }
@@ -94,5 +168,6 @@ __name(_JSRunner, "JSRunner");
 let JSRunner = _JSRunner;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  JSRunner
+  JSRunner,
+  shouldPreprocessRunJSTemplates
 });

package/lib/ViewScopedFlowEngine.js

@@ -31,8 +31,10 @@ __export(ViewScopedFlowEngine_exports, {
 });
 module.exports = __toCommonJS(ViewScopedFlowEngine_exports);
 var import_flowEngine = require("./flowEngine");
+var import_viewEvents = require("./views/viewEvents");
 function createViewScopedEngine(parent) {
   const local = new import_flowEngine.FlowEngine();
+  Object.defineProperty(local, import_viewEvents.ENGINE_SCOPE_KEY, { value: import_viewEvents.VIEW_ENGINE_SCOPE, configurable: true });
   if (parent.modelRepository) {
     local.setModelRepository(parent.modelRepository);
   }
@@ -48,6 +50,7 @@ function createViewScopedEngine(parent) {
     "_applyFlowCache",
     "executor",
     "context",
+    import_viewEvents.ENGINE_SCOPE_KEY,
     "previousEngine",
     "nextEngine",
     // 调度器与事件总线局部化
@@ -62,7 +65,11 @@ function createViewScopedEngine(parent) {
     "_previousEngine",
     "_nextEngine",
     // getModel 需要在本地执行以确保全局查找时正确遍历整个引擎栈
-    "getModel"
+    "getModel",
+    // 视图销毁回调需要在本地存储，每个视图引擎有自己的销毁逻辑
+    "_destroyView",
+    "setDestroyView",
+    "destroyView"
   ]);
   const handler = {
     get(target, prop, receiver) {

package/lib/acl/Acl.js

@@ -7,9 +7,11 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
@@ -24,13 +26,21 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Acl_exports = {};
 __export(Acl_exports, {
   ACL: () => ACL
 });
 module.exports = __toCommonJS(Acl_exports);
-var import_lodash = require("lodash");
+var import_lodash = __toESM(require("lodash"));
 const _ACL = class _ACL {
   constructor(flowEngine) {
     this.flowEngine = flowEngine;
@@ -43,10 +53,10 @@ const _ACL = class _ACL {
   // 记录上一次用于鉴权的 token，用于识别登录态变更
   lastToken = null;
   setData(data) {
-    this.data = data;
+    this.data = import_lodash.default.cloneDeep(data);
   }
   setMeta(data) {
-    this.meta = data;
+    this.meta = import_lodash.default.cloneDeep(data);
   }
   async load() {
     var _a, _b, _c, _d;

package/lib/components/FlowContextSelector.js

@@ -57,6 +57,35 @@ const cascaderPopupAutoHeightClassName = import_css.css`
     max-height: 50vh;
   }
 `;
+const normalizePath = /* @__PURE__ */ __name((path) => {
+  if (!Array.isArray(path)) {
+    return void 0;
+  }
+  return path.map((segment) => String(segment));
+}, "normalizePath");
+const getSelectedPathInfo = /* @__PURE__ */ __name((path, options) => {
+  var _a;
+  if (!Array.isArray(path) || path.length === 0) {
+    return { text: "", meta: void 0 };
+  }
+  const labels = [];
+  let currentOptions = options;
+  let selectedMeta;
+  for (const segment of path) {
+    const matchedOption = currentOptions.find((item) => String(item.value) === String(segment));
+    if (!matchedOption) {
+      break;
+    }
+    const label = typeof ((_a = matchedOption.meta) == null ? void 0 : _a.title) === "string" ? matchedOption.meta.title : typeof matchedOption.label === "string" ? matchedOption.label : String(matchedOption.value);
+    labels.push(label);
+    selectedMeta = matchedOption.meta;
+    currentOptions = Array.isArray(matchedOption.children) ? matchedOption.children : [];
+  }
+  return {
+    text: labels.join(" / "),
+    meta: selectedMeta
+  };
+}, "getSelectedPathInfo");
 const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   value,
   onChange,
@@ -70,6 +99,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   ignoreFieldNames,
   ...cascaderProps
 }) => {
+  const { token } = import_antd.theme.useToken();
   const lastSelectedRef = (0, import_react.useRef)(null);
   const { resolvedMetaTree, loading } = (0, import_useResolvedMetaTree.useResolvedMetaTree)(metaTree);
   const flowCtx = (0, import_FlowContextProvider.useFlowContext)();
@@ -102,16 +132,28 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
     [flowCtx]
   );
   const [updateFlag, setUpdateFlag] = (0, import_react.useState)(0);
+  const [searchText, setSearchText] = (0, import_react.useState)("");
+  const [dropdownOpen, setDropdownOpen] = (0, import_react.useState)(false);
+  const inlineFocusByPointerRef = (0, import_react.useRef)(false);
   const triggerUpdate = (0, import_react.useCallback)(() => setUpdateFlag((prev) => prev + 1), []);
+  const isSearchEnabled = showSearch || children === null;
   const options = (0, import_react.useMemo)(() => {
     if (!resolvedMetaTree) return [];
+    const refreshSeq = updateFlag;
     const base = (0, import_utils.buildContextSelectorItems)(resolvedMetaTree);
-    return translateOptions(base).filter((item) => {
+    const filtered = translateOptions(base).filter((item) => {
       var _a;
       if (!ignoreFieldNames || ignoreFieldNames.length === 0) return true;
       return !ignoreFieldNames.includes(((_a = item.meta) == null ? void 0 : _a.name) || "");
     });
+    return refreshSeq >= 0 ? filtered : [];
   }, [resolvedMetaTree, updateFlag, translateOptions, ignoreFieldNames]);
+  const displayOptions = (0, import_react.useMemo)(() => {
+    if (!isSearchEnabled || !searchText.trim()) {
+      return options;
+    }
+    return (0, import_utils.filterLoadedContextSelectorItems)(options, searchText);
+  }, [isSearchEnabled, options, searchText]);
   const [tempSelectedPath, setTempSelectedPath] = (0, import_react.useState)([]);
   const handleLoadData = (0, import_react.useCallback)(
     async (selectedOptions) => {
@@ -147,18 +189,27 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
         triggerUpdate();
       }
     },
-    [triggerUpdate]
+    [triggerUpdate, translateOptions]
   );
   const currentPath = (0, import_react.useMemo)(() => {
-    return customParseValueToPath(value);
+    return normalizePath(customParseValueToPath(value));
   }, [value, customParseValueToPath]);
   const effectivePath = (0, import_react.useMemo)(() => {
     if (!currentPath || currentPath.length === 0) return currentPath;
+    if (options.length === 0) {
+      return currentPath;
+    }
     const topValues = new Set(options.map((o) => String(o.value)));
     const needTrim = !topValues.has(String(currentPath[0]));
     const fixed = needTrim ? currentPath.slice(1) : currentPath;
     return fixed;
   }, [currentPath, options]);
+  const cascaderValue = (0, import_react.useMemo)(() => {
+    if (tempSelectedPath.length > 0) {
+      return tempSelectedPath;
+    }
+    return Array.isArray(effectivePath) ? effectivePath : void 0;
+  }, [effectivePath, tempSelectedPath]);
   const pathToPreload = (0, import_react.useMemo)(() => {
     const finalPath = effectivePath && effectivePath.length > 0 ? effectivePath : tempSelectedPath;
     return Array.isArray(finalPath) ? finalPath : [];
@@ -212,22 +263,116 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   const mergedPopupClassName = (0, import_react.useMemo)(() => {
     return (0, import_css.cx)(cascaderPopupAutoHeightClassName, cascaderProps.popupClassName);
   }, [cascaderProps.popupClassName]);
+  const cascaderSearchInputClassName = (0, import_react.useMemo)(() => {
+    return import_css.css`
+      padding: 8px;
+      border-bottom: 1px solid ${token.colorSplit};
+    `;
+  }, [token.colorSplit]);
+  const {
+    onDropdownVisibleChange: cascaderOnDropdownVisibleChange,
+    dropdownRender: cascaderDropdownRender,
+    ...restCascaderProps
+  } = cascaderProps;
+  const selectedPathInfo = (0, import_react.useMemo)(() => getSelectedPathInfo(effectivePath, options), [effectivePath, options]);
+  const mergedOpen = open !== void 0 ? open : children === null ? dropdownOpen : void 0;
+  const isDropdownVisible = !!mergedOpen;
+  const handleDropdownVisibleChange = (0, import_react.useCallback)(
+    (visible) => {
+      if (open === void 0) {
+        setDropdownOpen(visible);
+      }
+      if (!visible) {
+        setSearchText("");
+      }
+      cascaderOnDropdownVisibleChange == null ? void 0 : cascaderOnDropdownVisibleChange(visible);
+    },
+    [cascaderOnDropdownVisibleChange, open]
+  );
+  const renderDropdown = (0, import_react.useCallback)(
+    (menu) => {
+      const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
+      const cascaderMenu = import_react.default.isValidElement(cascaderMenuNode) ? cascaderMenuNode : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, cascaderMenuNode);
+      if (!isSearchEnabled || children === null) {
+        return cascaderMenu;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: cascaderSearchInputClassName }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          allowClear: true,
+          size: "small",
+          value: searchText,
+          placeholder: flowCtx.t("Search"),
+          onChange: (e) => setSearchText(e.target.value),
+          onKeyDown: (e) => e.stopPropagation()
+        }
+      )), cascaderMenu);
+    },
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText]
+  );
+  const inlinePlaceholder = typeof restCascaderProps.placeholder === "string" ? restCascaderProps.placeholder : flowCtx.t("Search");
+  const hasSelectedPath = Array.isArray(effectivePath) && effectivePath.length > 0;
+  const handleInlineInputFocus = (0, import_react.useCallback)(() => {
+    if (open === void 0 && !inlineFocusByPointerRef.current) {
+      setDropdownOpen(true);
+    }
+  }, [open]);
+  const markInlineFocusByPointer = (0, import_react.useCallback)(() => {
+    inlineFocusByPointerRef.current = true;
+  }, []);
+  const resetInlineFocusByPointer = (0, import_react.useCallback)(() => {
+    inlineFocusByPointerRef.current = false;
+  }, []);
+  const handleInlineInputChange = (0, import_react.useCallback)(
+    (event) => {
+      const nextValue = event.target.value;
+      if (!isDropdownVisible && nextValue === "" && hasSelectedPath) {
+        setTempSelectedPath([]);
+        onChange == null ? void 0 : onChange("", void 0);
+        return;
+      }
+      if (open === void 0 && !isDropdownVisible) {
+        setDropdownOpen(true);
+      }
+      setSearchText(nextValue);
+    },
+    [hasSelectedPath, isDropdownVisible, onChange, open]
+  );
+  const inlinePathText = Array.isArray(effectivePath) ? effectivePath.join(" / ") : "";
+  const inlineInputValue = isDropdownVisible ? searchText : selectedPathInfo.text || inlinePathText;
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Cascader,
     {
-      ...cascaderProps,
-      options,
-      value: tempSelectedPath && tempSelectedPath.length > 0 ? tempSelectedPath : effectivePath,
+      ...restCascaderProps,
+      options: displayOptions,
+      value: cascaderValue,
       onChange: handleChange,
       loadData: handleLoadData,
       loading,
       changeOnSelect: !onlyLeafSelectable,
       expandTrigger: "click",
-      open,
-      showSearch: children === null,
-      popupClassName: mergedPopupClassName
+      open: mergedOpen,
+      showSearch: false,
+      popupClassName: mergedPopupClassName,
+      dropdownRender: renderDropdown,
+      onDropdownVisibleChange: handleDropdownVisibleChange
     },
-    children === null ? null : children || defaultChildren
+    children === null ? /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Input,
+      {
+        allowClear: true,
+        value: inlineInputValue,
+        placeholder: inlinePlaceholder,
+        onMouseDown: markInlineFocusByPointer,
+        onMouseUp: resetInlineFocusByPointer,
+        onMouseLeave: resetInlineFocusByPointer,
+        onFocus: handleInlineInputFocus,
+        onBlur: resetInlineFocusByPointer,
+        onChange: handleInlineInputChange,
+        onKeyDown: (e) => e.stopPropagation(),
+        disabled: restCascaderProps.disabled
+      }
+    ) : children || defaultChildren
   );
 }, "FlowContextSelectorComponent");
 const FlowContextSelector = import_react.default.memo(FlowContextSelectorComponent);

package/lib/components/MobilePopup.js

@@ -41,11 +41,12 @@ __export(MobilePopup_exports, {
 });
 module.exports = __toCommonJS(MobilePopup_exports);
 var import_antd = require("antd");
-var import_antd_mobile = require("antd-mobile");
 var import_react = __toESM(require("react"));
-var import_antd_mobile_icons = require("antd-mobile-icons");
 var import_MobilePopup = require("./MobilePopup.style");
 var import_react_i18next = require("react-i18next");
+var import_lazy_helper = require("../lazy-helper");
+const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
+const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
@@ -67,7 +68,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
     };
   }, []);
   return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd_mobile.Popup,
+    Popup,
     {
       className: `${componentCls} ${hashId} ${className || ""}`,
       visible,
@@ -81,7 +82,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       style,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
@@ -90,7 +91,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
         tabIndex: 0,
         "aria-label": t("Close")
       },
-      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+      /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),
     children,
     footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)

package/lib/components/dnd/gridDragPlanner.d.ts

@@ -31,6 +31,7 @@ export interface Point {
 export interface GridLayoutData {
     rows: Record<string, string[][]>;
     sizes: Record<string, number[]>;
+    rowOrder?: string[];
 }
 export interface ColumnSlot {
     type: 'column';

package/lib/components/dnd/gridDragPlanner.js

@@ -59,6 +59,43 @@ const COLUMN_EDGE_MAX_WIDTH = 28;
 const COLUMN_EDGE_WIDTH_RATIO = 0.2;
 const COLUMN_INSERT_THICKNESS_RATIO = 0.5;
 const ROW_GAP_HEIGHT_RATIO = 0.33;
+const deriveRowOrder = /* @__PURE__ */ __name((rows, provided) => {
+  const order = [];
+  const used = /* @__PURE__ */ new Set();
+  (provided || Object.keys(rows)).forEach((rowId) => {
+    if (rows[rowId] && !used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+  Object.keys(rows).forEach((rowId) => {
+    if (!used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+  return order;
+}, "deriveRowOrder");
+const normalizeRowsWithOrder = /* @__PURE__ */ __name((rows, order) => {
+  const next = {};
+  order.forEach((rowId) => {
+    if (rows[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  Object.keys(rows).forEach((rowId) => {
+    if (!next[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  return next;
+}, "normalizeRowsWithOrder");
+const ensureRowOrder = /* @__PURE__ */ __name((layout) => {
+  const order = deriveRowOrder(layout.rows, layout.rowOrder);
+  layout.rowOrder = order;
+  layout.rows = normalizeRowsWithOrder(layout.rows, order);
+  return order;
+}, "ensureRowOrder");
 const toRect = /* @__PURE__ */ __name((domRect) => ({
   top: domRect.top,
   left: domRect.left,
@@ -183,7 +220,9 @@ const buildLayoutSnapshot = /* @__PURE__ */ __name(({ container }) => {
     }
     const columnElements = Array.from(
       container.querySelectorAll(`[data-grid-column-row-id="${rowId}"][data-grid-column-index]`)
-    );
+    ).filter((el) => {
+      return el.closest("[data-grid-row-id]") === rowElement;
+    });
     const sortedColumns = columnElements.sort((a, b) => {
       const indexA = Number(a.dataset.gridColumnIndex || 0);
       const indexB = Number(b.dataset.gridColumnIndex || 0);
@@ -208,7 +247,9 @@ const buildLayoutSnapshot = /* @__PURE__ */ __name(({ container }) => {
       });
       const itemElements = Array.from(
         columnElement.querySelectorAll(`[data-grid-item-row-id="${rowId}"][data-grid-column-index="${columnIndex}"]`)
-      );
+      ).filter((el) => {
+        return el.closest("[data-grid-column-row-id][data-grid-column-index]") === columnElement;
+      });
       const sortedItems = itemElements.sort((a, b) => {
         const indexA = Number(a.dataset.gridItemIndex || 0);
         const indexB = Number(b.dataset.gridItemIndex || 0);
@@ -330,9 +371,11 @@ const removeItemFromLayout = /* @__PURE__ */ __name((layout, uidValue) => {
   if (columns.length === 0) {
     delete layout.rows[rowId];
     delete layout.sizes[rowId];
+    ensureRowOrder(layout);
     return;
   }
   normalizeRowSizes(rowId, layout);
+  ensureRowOrder(layout);
 }, "removeItemFromLayout");
 const toIntSizes = /* @__PURE__ */ __name((weights, count) => {
   if (count === 0) {
@@ -420,8 +463,10 @@ const simulateLayoutForSlot = /* @__PURE__ */ __name(({
 }) => {
   const cloned = {
     rows: import_lodash.default.cloneDeep(layout.rows),
-    sizes: import_lodash.default.cloneDeep(layout.sizes)
+    sizes: import_lodash.default.cloneDeep(layout.sizes),
+    rowOrder: layout.rowOrder ? [...layout.rowOrder] : void 0
   };
+  ensureRowOrder(cloned);
   removeItemFromLayout(cloned, sourceUid);
   const createRowId = generateRowId ?? import_shared.uid;
   switch (slot.type) {
@@ -464,8 +509,15 @@ const simulateLayoutForSlot = /* @__PURE__ */ __name(({
     case "row-gap": {
       const newRowId = createRowId();
       const rowPosition = slot.position === "above" ? "before" : "after";
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
       cloned.rows = insertRow(cloned.rows, slot.targetRowId, newRowId, rowPosition, [[sourceUid]]);
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const targetIndex = currentOrder.indexOf(slot.targetRowId);
+      const insertIndex = targetIndex === -1 ? currentOrder.length : rowPosition === "before" ? targetIndex : targetIndex + 1;
+      const nextOrder = [...currentOrder];
+      nextOrder.splice(insertIndex, 0, newRowId);
+      cloned.rowOrder = nextOrder;
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, nextOrder);
       break;
     }
     case "empty-row": {
@@ -475,11 +527,15 @@ const simulateLayoutForSlot = /* @__PURE__ */ __name(({
         [newRowId]: [[sourceUid]]
       };
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
+      cloned.rowOrder = [...currentOrder.filter((id) => id !== newRowId), newRowId];
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, cloned.rowOrder);
       break;
     }
     default:
       break;
   }
+  ensureRowOrder(cloned);
   return cloned;
 }, "simulateLayoutForSlot");
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/settings/wrappers/component/SwitchWithTitle.js

@@ -73,7 +73,8 @@ const SwitchWithTitle = (0, import_reactive.observer)(
       setChecked(val);
       onChange == null ? void 0 : onChange({ [itemKey]: val });
     }, "handleChange");
-    const handleWrapperClick = /* @__PURE__ */ __name(() => {
+    const handleWrapperClick = /* @__PURE__ */ __name((e) => {
+      e.stopPropagation();
       if (disabled) return;
       handleChange(!checked);
     }, "handleWrapperClick");