@uniformdev/mesh-sdk-react 19.47.1-alpha.3 → 19.48.0

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   Button: () => import_design_system40.Button,
   Callout: () => import_design_system40.Callout,
   ControlledValuePlugin: () => ControlledValuePlugin,
+  DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
   DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
@@ -197,7 +198,6 @@ __export(src_exports, {
   useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
-  useOnVariableUpdated: () => useOnVariableUpdated,
   useParameterShell: () => import_design_system14.useParameterShell,
   useProductQueryContext: () => useProductQueryContext,
   useProductSearchContext: () => useProductSearchContext,
@@ -205,6 +205,7 @@ __export(src_exports, {
   useRequestHeader: () => useRequestHeader,
   useRequestParameter: () => useRequestParameter,
   useUniformMeshSdk: () => useUniformMeshSdk,
+  useVariableEditor: () => useVariableEditor,
   useVariables: () => useVariables,
   useVariablesMenu: () => useVariablesMenu,
   variableDefaultTextValue: () => variableDefaultTextValue,
@@ -3110,11 +3111,11 @@ function ControlledValuePlugin({
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
 var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
 var import_selection = require("@lexical/selection");
-var import_utils = require("@lexical/utils");
+var import_utils2 = require("@lexical/utils");
 var import_canvas3 = require("@uniformdev/canvas");
 var import_design_system18 = require("@uniformdev/design-system");
 var import_lexical4 = require("lexical");
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
@@ -3180,15 +3181,16 @@ function InfoVariableReference({ children }) {
 }
 
 // src/components/Variables/composer/VariablesPlugin.tsx
-var import_react36 = require("@emotion/react");
+var import_react37 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
+var import_utils = require("@lexical/utils");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
 var import_canvas2 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_lite2 = require("dequal/lite");
 var import_lexical3 = require("lexical");
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3220,16 +3222,17 @@ var variablesTipText = import_react32.css`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useOnVariableUpdated.ts
-var import_react35 = require("react");
+// src/components/Variables/useVariableEditor.ts
+var import_react36 = require("react");
 
 // src/components/Variables/VariablesProvider.tsx
 var import_mitt = __toESM(require("mitt"));
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/Variables/VariableEditor.tsx
 var import_zod = require("@hookform/resolvers/zod");
 var import_design_system16 = require("@uniformdev/design-system");
+var import_react34 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_zod2 = require("zod");
 
@@ -3240,10 +3243,6 @@ var variablesFormContainer = import_react33.css`
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = import_react33.css`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
 
 // src/components/Variables/VariableEditor.tsx
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
@@ -3255,7 +3254,12 @@ var schema = import_zod2.z.object({
   order: import_zod2.z.number().optional(),
   type: import_zod2.z.string().optional()
 });
-function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
+function VariableEditor({
+  variable,
+  onSubmit,
+  onCancel,
+  disableMeshTip
+}) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
@@ -3277,7 +3281,7 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
       type: values.type || void 0,
       displayName: values.displayName || void 0
     };
-    return onSubmit(finalValue);
+    return onSubmit(finalValue, null);
   });
   (0, import_design_system16.useShortcut)({
     shortcut: "enter",
@@ -3286,6 +3290,13 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
     },
     activeWhenEditing: true
   });
+  const nameRef = (0, import_react34.useRef)(null);
+  const { ref, ...nameRegister } = register("name");
+  (0, import_react34.useLayoutEffect)(() => {
+    if (nameRef.current && !nameRef.current.value) {
+      nameRef.current.focus();
+    }
+  }, []);
   return (
     // NOTE: this is intentionally NOT a <form> because it's regularly used in a nested modal and that can make it bubble
     // up a submit to its 'parent form' which is not what we want.
@@ -3293,12 +3304,15 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         import_design_system16.Input,
         {
-          ...register("name"),
+          ...nameRegister,
           label: "Name",
           disabled: variable !== "",
           caption: "This cannot change once created.",
           errorMessage: (_e = formState.errors.name) == null ? void 0 : _e.message,
-          "data-af": "1"
+          ref: (e) => {
+            ref(e);
+            nameRef.current = e;
+          }
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -3320,14 +3334,22 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
           errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: variablesFormBtnGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_design_system16.HorizontalRhythm, { gap: "sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.Button, { type: "button", onClick: submitHandler, children: "OK" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-      ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.Button, { type: "button", buttonType: "ghost", onClick: () => onCancel({ disconnect: false }), children: "cancel" })
+      ] }) }),
       disableMeshTip ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_design_system16.Callout, { type: "tip", title: "Customized User Interfaces", children: [
         "Developers can create customized user interfaces for variable editing by building a Uniform mesh integration. Get started quickly with our",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "a",
+          {
+            href: "https://docs.uniform.app/docs/integrations/mesh-integrations/custom-integrations",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Mesh SDK"
+          }
+        ),
         "."
       ] })
     ] })
@@ -3336,7 +3358,7 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
 
 // src/components/Variables/VariablesProvider.tsx
 var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
-var VariablesContext = (0, import_react34.createContext)(null);
+var VariablesContext = (0, import_react35.createContext)(null);
 function VariablesProvider({
   value,
   onChange,
@@ -3346,14 +3368,17 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = (0, import_react34.useState)();
-  const [editingContext, setEditingContext] = (0, import_react34.useState)();
-  const events = (0, import_react34.useMemo)(() => (0, import_mitt.default)(), []);
+  const [editing, setEditing] = (0, import_react35.useState)();
+  const [editingContext, setEditingContext] = (0, import_react35.useState)();
+  const events = (0, import_react35.useMemo)(
+    () => (0, import_mitt.default)(),
+    []
+  );
   if (!readOnly && !onChange) {
     throw new Error("onChange must be provided when readOnly is false");
   }
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
-  const valueBasedContextValue = (0, import_react34.useMemo)(
+  const valueBasedContextValue = (0, import_react35.useMemo)(
     () => ({
       flatVariables: flattenVariables(value),
       dispatch: (event) => {
@@ -3391,7 +3416,7 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
-  const contextValue = (0, import_react34.useMemo)(() => {
+  const contextValue = (0, import_react35.useMemo)(() => {
     return {
       ...valueBasedContextValue,
       isEditing: typeof editing !== "undefined",
@@ -3407,15 +3432,23 @@ function VariablesProvider({
       Editor,
       {
         context: editingContext,
-        onSubmit: (val) => {
+        onSubmit: (val, editorCompletedContext) => {
           contextValue.dispatch({ type: "cancelEdit" });
           const { name, ...varValue } = val;
           const latestValue = { ...value, [name]: varValue };
           onChange == null ? void 0 : onChange(latestValue);
-          events.emit("update", { name, latestValue });
+          events.emit("editCompleted", {
+            canceled: false,
+            selectedVariable: val,
+            editorCompletedContext
+          });
         },
-        onCancel: () => {
+        onCancel: (editorCancelledContext) => {
           contextValue.dispatch({ type: "cancelEdit" });
+          events.emit("editCompleted", {
+            canceled: true,
+            editorCancelledContext
+          });
         },
         variable: editing
       }
@@ -3423,7 +3456,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = (0, import_react34.useContext)(VariablesContext);
+  const context = (0, import_react35.useContext)(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3451,16 +3484,57 @@ function flattenVariables(variables) {
   return flatVariables;
 }
 
-// src/components/Variables/useOnVariableUpdated.ts
-function useOnVariableUpdated(fn, disabled) {
-  const { variables, events, canDispatch } = useVariables(true);
-  (0, import_react35.useEffect)(() => {
-    if (disabled || !canDispatch) {
+// src/components/Variables/useVariableEditor.ts
+function useVariableEditor() {
+  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
+  const [isEditingBinding, setIsEditingBinding] = (0, import_react36.useState)();
+  (0, import_react36.useEffect)(() => {
+    if (!canDispatch || !isEditingBinding) {
       return;
     }
-    events.on("update", fn);
-    return () => events.off("update", fn);
-  }, [canDispatch, disabled, events, fn, variables]);
+    const fn = (e) => {
+      isEditingBinding.resolve(e);
+      setIsEditingBinding(void 0);
+    };
+    events.on("editCompleted", fn);
+    return () => events.off("editCompleted", fn);
+  }, [canDispatch, events, isEditingBinding, variables]);
+  (0, import_react36.useEffect)(() => {
+    if (!isEditing) {
+      setIsEditingBinding(void 0);
+    }
+  }, [isEditing]);
+  return {
+    async editVariable(variable, context) {
+      if (!canDispatch) {
+        throw new Error("Cannot edit variable. VariablesProvider is not mounted.");
+      }
+      if (isEditingBinding) {
+        throw new Error("Cannot edit variable. Another variable is already being edited.");
+      }
+      return new Promise((resolve) => {
+        setIsEditingBinding({
+          resolve,
+          variable
+        });
+        dispatch({ type: "edit", variable, context });
+      });
+    }
+  };
+}
+
+// src/components/Variables/util/variableDefaultTextValue.ts
+function variableDefaultTextValue(defaultValue) {
+  if (defaultValue === void 0 || defaultValue === null) {
+    return "";
+  }
+  if (typeof defaultValue === "string") {
+    return defaultValue;
+  }
+  if (defaultValue.toString) {
+    return defaultValue.toString();
+  }
+  return "unknown";
 }
 
 // src/components/Variables/variablesToList.ts
@@ -3513,6 +3587,9 @@ function variablesToGroupedList(variables, filterFn, context) {
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 var OPEN_INSERT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:open-insert-variable");
 var EDIT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:edit-variable");
+var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)(
+  "uniform:disconnect-variable"
+);
 var INSERT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:insert-variable");
 var TRIGGER = "\\$\\$";
 var LENGTH_LIMIT = 20;
@@ -3538,7 +3615,7 @@ function useVariablesMenu({
   getEditorContext
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const canEditVariable = (0, import_react37.useCallback)(
+  const canEditVariable = (0, import_react38.useCallback)(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3546,7 +3623,7 @@ function useVariablesMenu({
     [canDispatch, enableEditingVariables, readOnly]
   );
   const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
-  const { groupedVariables, menuOptions } = (0, import_react37.useMemo)(() => {
+  const { groupedVariables, menuOptions } = (0, import_react38.useMemo)(() => {
     const groupedVariables2 = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
     if (canAddVariable) {
       groupedVariables2.unshift({
@@ -3568,7 +3645,7 @@ function useVariablesMenu({
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
   }, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
-  const onSelect = (0, import_react37.useCallback)(
+  const onSelect = (0, import_react38.useCallback)(
     ({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
       if (value === ADD_VARIABLE_OPTION) {
         editor.update(() => {
@@ -3616,43 +3693,23 @@ function VariablesPlugin({
 }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
-  const variablesRef = (0, import_react37.useRef)({ variables, knownUndefinedValues, isLoading });
+  const variablesRef = (0, import_react38.useRef)({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
-  const canEditVariable = (0, import_react37.useCallback)(
+  const canEditVariable = (0, import_react38.useCallback)(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
     ),
     [canDispatch, enableEditingVariables, readOnly]
   );
-  const [editingKey, setEditingKey] = (0, import_react37.useState)(null);
-  useOnVariableUpdated(({ name, latestValue }) => {
-    editor.update(() => {
-      var _a;
-      if (editingKey === null) {
-        return;
-      }
-      const targetKey = editingKey === ADD_VARIABLE_OPTION ? void 0 : editingKey;
-      editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
-        reference: name,
-        initialDisplayName: (_a = latestValue[name]) == null ? void 0 : _a.displayName,
-        targetKey,
-        overwriteExistingValue: replaceValueOnVariableInsert
-      });
-    });
-  }, editingKey === null);
-  (0, import_react37.useEffect)(() => {
-    if (editingKey !== null && !isEditing) {
-      setEditingKey(null);
-    }
-  }, [editingKey, isEditing]);
-  const [queryString, setQueryString] = (0, import_react37.useState)(null);
+  const { editVariable } = useVariableEditor();
+  const [queryString, setQueryString] = (0, import_react38.useState)(null);
   const { groupedVariables, menuOptions, onSelect } = useVariablesMenu({
     showAddVariableMenuOption,
     filterVariable,
     getEditorContext
   });
-  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react37.useMemo)(() => {
+  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react38.useMemo)(() => {
     if (!queryString) {
       return {
         filteredGroupedVariables: groupedVariables,
@@ -3672,11 +3729,8 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = (0, import_react37.useCallback)(
+  const onSelectOption = (0, import_react38.useCallback)(
     (selectedOption, nodeToReplace, closeMenu) => {
-      if (selectedOption.key === ADD_VARIABLE_OPTION) {
-        setEditingKey(void 0);
-      }
       onSelect({
         queryString: queryString != null ? queryString : void 0,
         value: selectedOption.key,
@@ -3688,59 +3742,128 @@ function VariablesPlugin({
     },
     [editor, onSelect, queryString, replaceValueOnVariableInsert]
   );
-  (0, import_react37.useEffect)(() => {
-    editor.registerCommand(
-      EDIT_VARIABLE_COMMAND,
-      ({ reference, sourceKey }) => {
-        if (!disableVariables && canEditVariable(reference, variablesRef.current.variables[reference])) {
-          dispatch({ type: "edit", variable: reference, context: getEditorContext == null ? void 0 : getEditorContext() });
-          setEditingKey(sourceKey);
-        }
-        return true;
-      },
-      import_lexical3.COMMAND_PRIORITY_NORMAL
-    );
-    editor.registerCommand(
-      OPEN_INSERT_VARIABLE_COMMAND,
-      () => {
-        if (!disableVariables) {
-          dispatch({ type: "edit", variable: "", context: getEditorContext == null ? void 0 : getEditorContext() });
-          setEditingKey(ADD_VARIABLE_OPTION);
-        }
-        return true;
-      },
-      import_lexical3.COMMAND_PRIORITY_NORMAL
-    );
-    editor.registerCommand(
-      INSERT_VARIABLE_COMMAND,
-      ({ reference, initialDisplayName, targetKey, overwriteExistingValue }) => {
-        var _a, _b;
-        if (!disableVariables) {
-          const targetVariable = variablesRef.current.variables[reference];
-          if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(reference));
-            return true;
+  (0, import_react38.useEffect)(() => {
+    return (0, import_utils.mergeRegister)(
+      editor.registerCommand(
+        EDIT_VARIABLE_COMMAND,
+        ({ reference, sourceKey }) => {
+          const currentValue = variablesRef.current.variables[reference];
+          if (!disableVariables && canEditVariable(reference, currentValue)) {
+            editVariable(reference, getEditorContext == null ? void 0 : getEditorContext()).then((result) => {
+              var _a;
+              if (result.canceled) {
+                if (((_a = result.editorCancelledContext) == null ? void 0 : _a.disconnect) && sourceKey) {
+                  editor.dispatchCommand(DISCONNECT_VARIABLE_COMMAND, { sourceKey });
+                  return;
+                }
+                return;
+              }
+              editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
+                variable: result.selectedVariable.name,
+                initialDisplayName: result.selectedVariable.displayName,
+                targetKey: sourceKey,
+                overwriteExistingValue: replaceValueOnVariableInsert
+              });
+            });
           }
-          const variableNode = $createVariableNode(reference, {
-            displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || reference,
-            hasClickEvent: canEditVariable(reference, targetVariable),
-            referenceIsValid: true,
-            tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
-            isFresh: true,
-            isLoading: false
+          return true;
+        },
+        import_lexical3.COMMAND_PRIORITY_NORMAL
+      ),
+      // disconnects a variable node from its variable value and leaves the variable's default value
+      // as a string literal in its place. Note that single-valued binding UIs override this so that it
+      // acts as a reset to default component as well as a binding disconnect.
+      editor.registerCommand(
+        DISCONNECT_VARIABLE_COMMAND,
+        ({ sourceKey }) => {
+          editor.update(() => {
+            var _a;
+            const currentNode = (0, import_lexical3.$getNodeByKey)(sourceKey);
+            if (!$isVariableNode(currentNode)) {
+              throw new Error("Cannot disconnect a non-variable node");
+            }
+            const currentVariableDefinition = variablesRef.current.variables[currentNode.reference];
+            const variableTextNode = (0, import_lexical3.$createTextNode)(
+              variableDefaultTextValue(
+                (_a = currentVariableDefinition == null ? void 0 : currentVariableDefinition.default) != null ? _a : currentNode.getState().displayName
+              )
+            );
+            const variableNode = (0, import_lexical3.$getNodeByKey)(sourceKey);
+            if (!variableNode) {
+              console.error("Disconnected from unknown node.");
+              return true;
+            }
+            variableNode.replace(variableTextNode);
+            variableTextNode.select();
           });
-          if (targetKey) {
-            (_b = (0, import_lexical3.$getNodeByKey)(targetKey)) == null ? void 0 : _b.replace(variableNode);
-          } else {
-            (0, import_lexical3.$insertNodes)([variableNode]);
+          return true;
+        },
+        import_lexical3.COMMAND_PRIORITY_NORMAL
+      ),
+      editor.registerCommand(
+        OPEN_INSERT_VARIABLE_COMMAND,
+        () => {
+          if (!disableVariables) {
+            editVariable("", getEditorContext == null ? void 0 : getEditorContext()).then((result) => {
+              if (result.canceled) {
+                return;
+              }
+              editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
+                variable: result.selectedVariable.name,
+                initialDisplayName: result.selectedVariable.displayName,
+                targetKey: void 0,
+                overwriteExistingValue: replaceValueOnVariableInsert
+              });
+            });
           }
-        }
-        return true;
-      },
-      import_lexical3.COMMAND_PRIORITY_NORMAL
+          return true;
+        },
+        import_lexical3.COMMAND_PRIORITY_NORMAL
+      ),
+      // register the insert variable command, used to handle inserting
+      // a variable reference from non-autocomplete menus at the current selection,
+      // or replacing an existing variable node with a new variable reference (when targetKey is set to a node ID)
+      editor.registerCommand(
+        INSERT_VARIABLE_COMMAND,
+        ({ variable: reference, initialDisplayName, targetKey, overwriteExistingValue }) => {
+          var _a, _b;
+          if (!disableVariables) {
+            const targetVariable = variablesRef.current.variables[reference];
+            if (overwriteExistingValue) {
+              setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(reference));
+              return true;
+            }
+            const variableNode = $createVariableNode(reference, {
+              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || reference,
+              hasClickEvent: canEditVariable(reference, targetVariable),
+              referenceIsValid: true,
+              tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
+              isFresh: true,
+              isLoading: false
+            });
+            if (targetKey) {
+              (_b = (0, import_lexical3.$getNodeByKey)(targetKey)) == null ? void 0 : _b.replace(variableNode);
+            } else {
+              (0, import_lexical3.$insertNodes)([variableNode]);
+            }
+          }
+          return true;
+        },
+        import_lexical3.COMMAND_PRIORITY_NORMAL
+      )
     );
-  }, [editor, disableVariables, canDispatch, dispatch, canEditVariable, readOnly, getEditorContext]);
-  const updateExistingNodeIfChanged = (0, import_react37.useCallback)(
+  }, [
+    editor,
+    disableVariables,
+    canDispatch,
+    dispatch,
+    canEditVariable,
+    readOnly,
+    getEditorContext,
+    editVariable,
+    replaceValueOnVariableInsert
+  ]);
+  const updateExistingNodeIfChanged = (0, import_react38.useCallback)(
     (variableNode) => {
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -3764,14 +3887,14 @@ function VariablesPlugin({
     },
     [canEditVariable]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     editor.update(() => {
       (0, import_lexical3.$nodesOfType)(VariableNode).forEach((variableNode) => {
         updateExistingNodeIfChanged(variableNode);
       });
     });
   }, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
     });
@@ -3787,7 +3910,7 @@ function VariablesPlugin({
       triggerFn: getPossibleQueryMatch,
       options: filteredMenuOptions,
       menuRenderFn: (anchorElementRef, { selectOptionAndCleanUp, setHighlightedIndex, selectedIndex }) => {
-        if (!anchorElementRef.current || groupedVariables.length === 0 || editingKey !== null) {
+        if (!anchorElementRef.current || groupedVariables.length === 0 || isEditing) {
           return null;
         }
         let currentCumulativeMenuIndex = -1;
@@ -3795,7 +3918,7 @@ function VariablesPlugin({
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
-              css: import_react36.css`
+              css: import_react37.css`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
               background: var(--gray-50);
@@ -3936,7 +4059,7 @@ function VariableNodeComponent({
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
   const [isSelected, setSelected, clearSelection] = (0, import_useLexicalNodeSelection.useLexicalNodeSelection)(nodeKey);
   const readOnly = !editor.isEditable();
-  const onDelete = (0, import_react38.useCallback)(
+  const onDelete = (0, import_react39.useCallback)(
     (event) => {
       if (isSelected && (0, import_lexical4.$isNodeSelection)((0, import_lexical4.$getSelection)())) {
         event.preventDefault();
@@ -3949,8 +4072,8 @@ function VariableNodeComponent({
     },
     [isSelected, nodeKey]
   );
-  (0, import_react38.useEffect)(() => {
-    return (0, import_utils.mergeRegister)(
+  (0, import_react39.useEffect)(() => {
+    return (0, import_utils2.mergeRegister)(
       editor.registerCommand(import_lexical4.KEY_DELETE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
       editor.registerCommand(import_lexical4.KEY_BACKSPACE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
       // HACK: see https://github.com/facebook/lexical/issues/4214
@@ -4037,7 +4160,7 @@ function $isTargetWithinDecorator(target) {
 
 // src/components/Variables/InputVariables.tsx
 var import_design_system20 = require("@uniformdev/design-system");
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_uuid2 = require("uuid");
 
 // src/components/Variables/composer/EditorRefPlugin.tsx
@@ -4056,44 +4179,47 @@ function EditorRefPlugin({
 
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
+var import_utils3 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react39 = require("react");
+var import_react40 = require("react");
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react39.useEffect)(() => {
-    editor.registerCommand(
-      import_lexical5.PASTE_COMMAND,
-      (event) => {
-        var _a;
-        const selection = (0, import_lexical5.$getSelection)();
-        const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
-        if (pastedText && transformPaste && (0, import_lexical5.$isRangeSelection)(selection)) {
-          const result = transformPaste(pastedText);
-          if (result !== void 0) {
-            selection.insertText(result);
-            return true;
+  (0, import_react40.useEffect)(() => {
+    return (0, import_utils3.mergeRegister)(
+      editor.registerCommand(
+        import_lexical5.PASTE_COMMAND,
+        (event) => {
+          var _a;
+          const selection = (0, import_lexical5.$getSelection)();
+          const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
+          if (pastedText && transformPaste && (0, import_lexical5.$isRangeSelection)(selection)) {
+            const result = transformPaste(pastedText);
+            if (result !== void 0) {
+              selection.insertText(result);
+              return true;
+            }
           }
-        }
-        return false;
-      },
-      import_lexical5.COMMAND_PRIORITY_HIGH
+          return false;
+        },
+        import_lexical5.COMMAND_PRIORITY_HIGH
+      )
     );
   }, [editor, transformPaste]);
   return null;
 }
 
 // src/components/Variables/styles/InputVariables.styles.ts
-var import_react40 = require("@emotion/react");
-var menuContainer = import_react40.css`
+var import_react41 = require("@emotion/react");
+var menuContainer = import_react41.css`
   position: relative;
 `;
-var menuBtn2 = import_react40.css`
+var menuBtn2 = import_react41.css`
   position: absolute;
   top: 50%;
   right: var(--spacing-sm);
   transform: translateY(-50%);
 `;
-var input = import_react40.css`
+var input = import_react41.css`
   appearance: none;
   background-color: var(--white);
   border: 1px solid var(--gray-400);
@@ -4130,7 +4256,7 @@ var input = import_react40.css`
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var React10 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
 var import_canvas4 = require("@uniformdev/canvas");
@@ -4175,7 +4301,7 @@ function useInputVariablesState({
   const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : hasVariablesInValue;
   const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
-  const sharedMenuProps = (0, import_react41.useMemo)(
+  const sharedMenuProps = (0, import_react42.useMemo)(
     () => ({
       menuTooltip,
       showAddVariableMenuOption,
@@ -4200,20 +4326,21 @@ function useInputVariablesState({
     sharedMenuProps,
     disableVariablesForReals,
     hasVariablesInValue,
-    hadVariablesInValue: hadVariablesInValueForReals
+    hadVariablesInValue: hadVariablesInValueForReals,
+    setHadVariablesInValue
   };
 }
 
 // src/components/Variables/toolbox/VariableField.styles.ts
-var import_react42 = require("@emotion/react");
-var labelText = import_react42.css`
+var import_react43 = require("@emotion/react");
+var labelText = import_react43.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton = import_react42.css`
+var variableBindButton = import_react43.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4245,7 +4372,7 @@ var import_lexical6 = require("lexical");
 var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
 var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
 var import_design_system19 = require("@uniformdev/design-system");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 function SelectVariableMenu({
   onSelectVariable,
@@ -4258,17 +4385,9 @@ function SelectVariableMenu({
   menuTooltip = "Insert variable",
   filterVariable
 }) {
-  const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables(true);
-  const btnRef = (0, import_react43.useRef)(null);
-  const [openedAdd, setOpenedAdd] = (0, import_react43.useState)(false);
-  useOnVariableUpdated(({ name, latestValue }) => {
-    onSelectVariable == null ? void 0 : onSelectVariable({ ...latestValue[name], name });
-  }, !openedAdd);
-  (0, import_react43.useEffect)(() => {
-    if (openedAdd && !isEditing) {
-      setOpenedAdd(false);
-    }
-  }, [isEditing, openedAdd]);
+  const { variables, canDispatch, readOnly } = useVariables(true);
+  const btnRef = (0, import_react44.useRef)(null);
+  const { editVariable } = useVariableEditor();
   const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
   const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
   const menuHasVariableOptions = variablesGroups.length > 0;
@@ -4297,9 +4416,12 @@ function SelectVariableMenu({
         showAddVariableMenuOptionForReals ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           import_design_system19.MenuItem,
           {
-            onClick: () => {
-              setOpenedAdd(true);
-              dispatch({ type: "edit", variable: "", context: getEditorContext == null ? void 0 : getEditorContext() });
+            onClick: async () => {
+              const result = await editVariable("", getEditorContext == null ? void 0 : getEditorContext());
+              if (result.canceled) {
+                return;
+              }
+              onSelectVariable == null ? void 0 : onSelectVariable(result.selectedVariable);
             },
             "data-testid": "add-variable-button",
             children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_design_system19.HorizontalRhythm, { gap: "sm", align: "center", children: [
@@ -4343,7 +4465,7 @@ function VariablesComposerVariableMenu(props) {
   const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
   const onSelectVariable = (selectedVariable) => {
     editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
-      reference: selectedVariable.name,
+      variable: selectedVariable.name,
       initialDisplayName: selectedVariable.displayName,
       targetKey: void 0,
       overwriteExistingValue: props.replaceValueOnVariableInsert
@@ -4398,14 +4520,14 @@ var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlug
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
 var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/Variables/composer/DisablePlugin.tsx
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
-var import_react44 = require("react");
+var import_react45 = require("react");
 function DisablePlugin({ disabled }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     editor.setEditable(!disabled);
   }, [editor, disabled]);
   return null;
@@ -4414,10 +4536,10 @@ function DisablePlugin({ disabled }) {
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var import_lexical7 = require("lexical");
-var import_react45 = require("react");
+var import_react46 = require("react");
 function SingleLineTextPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     editor.registerNodeTransform(import_lexical7.LineBreakNode, (node) => {
       node.remove();
     });
@@ -4470,8 +4592,8 @@ function VariablesComposer(props) {
     autoFocus,
     ...variablesPluginProps
   } = props;
-  const [lastEmittedValue, setLastEmittedValue] = (0, import_react46.useState)(value);
-  const editorConfig = (0, import_react46.useMemo)(
+  const [lastEmittedValue, setLastEmittedValue] = (0, import_react47.useState)(value);
+  const editorConfig = (0, import_react47.useMemo)(
     () => ({
       namespace: "uniform",
       onError(error) {
@@ -4483,8 +4605,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = (0, import_react46.useRef)();
-  const updateTimeout = (0, import_react46.useRef)();
+  const editorState = (0, import_react47.useRef)();
+  const updateTimeout = (0, import_react47.useRef)();
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
@@ -4524,9 +4646,9 @@ var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditab
 var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
 var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
 var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
-var import_utils2 = require("@lexical/utils");
+var import_utils4 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
@@ -4544,67 +4666,75 @@ function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
 }
 function RichishCopyAndPastePlugin() {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  (0, import_react47.useEffect)(() => {
-    editor.registerCommand(
-      import_lexical9.COPY_COMMAND,
-      (event) => {
-        (0, import_clipboard.copyToClipboard)(editor, (0, import_utils2.objectKlassEquals)(event, ClipboardEvent) ? event : null);
-        return true;
-      },
-      import_lexical9.COMMAND_PRIORITY_HIGH
-    );
-    editor.registerCommand(
-      import_lexical9.CUT_COMMAND,
-      (event) => {
-        (0, import_clipboard.copyToClipboard)(editor, (0, import_utils2.objectKlassEquals)(event, ClipboardEvent) ? event : null);
-        editor.update(() => {
+  (0, import_react48.useEffect)(() => {
+    return (0, import_utils4.mergeRegister)(
+      editor.registerCommand(
+        import_lexical9.COPY_COMMAND,
+        (event) => {
+          (0, import_clipboard.copyToClipboard)(
+            editor,
+            (0, import_utils4.objectKlassEquals)(event, ClipboardEvent) ? event : null
+          );
+          return true;
+        },
+        import_lexical9.COMMAND_PRIORITY_HIGH
+      ),
+      editor.registerCommand(
+        import_lexical9.CUT_COMMAND,
+        (event) => {
+          (0, import_clipboard.copyToClipboard)(
+            editor,
+            (0, import_utils4.objectKlassEquals)(event, ClipboardEvent) ? event : null
+          );
+          editor.update(() => {
+            const selection = (0, import_lexical9.$getSelection)();
+            if ((0, import_lexical9.$isRangeSelection)(selection)) {
+              selection.removeText();
+            } else if ((0, import_lexical9.$isNodeSelection)(selection)) {
+              selection.getNodes().forEach((node) => node.remove());
+            }
+          });
+          return true;
+        },
+        import_lexical9.COMMAND_PRIORITY_HIGH
+      ),
+      editor.registerCommand(
+        import_lexical9.PASTE_COMMAND,
+        (event) => {
           const selection = (0, import_lexical9.$getSelection)();
           if ((0, import_lexical9.$isRangeSelection)(selection)) {
-            selection.removeText();
-          } else if ((0, import_lexical9.$isNodeSelection)(selection)) {
-            selection.getNodes().forEach((node) => node.remove());
-          }
-        });
-        return true;
-      },
-      import_lexical9.COMMAND_PRIORITY_HIGH
-    );
-    editor.registerCommand(
-      import_lexical9.PASTE_COMMAND,
-      (event) => {
-        const selection = (0, import_lexical9.$getSelection)();
-        if ((0, import_lexical9.$isRangeSelection)(selection)) {
-          event.preventDefault();
-          editor.update(
-            () => {
-              const selection2 = (0, import_lexical9.$getSelection)();
-              const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
-              if (clipboardData != null && (0, import_lexical9.$isRangeSelection)(selection2)) {
-                const lexicalString = clipboardData.getData("application/x-lexical-editor");
-                if (lexicalString) {
-                  try {
-                    const payload = JSON.parse(lexicalString);
-                    if (Array.isArray(payload.nodes)) {
-                      const nodes = (0, import_clipboard.$generateNodesFromSerializedNodes)(payload.nodes);
-                      return (0, import_clipboard.$insertGeneratedNodes)(editor, nodes, selection2);
+            event.preventDefault();
+            editor.update(
+              () => {
+                const selection2 = (0, import_lexical9.$getSelection)();
+                const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
+                if (clipboardData != null && (0, import_lexical9.$isRangeSelection)(selection2)) {
+                  const lexicalString = clipboardData.getData("application/x-lexical-editor");
+                  if (lexicalString) {
+                    try {
+                      const payload = JSON.parse(lexicalString);
+                      if (Array.isArray(payload.nodes)) {
+                        const nodes = (0, import_clipboard.$generateNodesFromSerializedNodes)(payload.nodes);
+                        return (0, import_clipboard.$insertGeneratedNodes)(editor, nodes, selection2);
+                      }
+                    } catch (e) {
                     }
-                  } catch (e) {
+                  }
+                  const text = clipboardData.getData("text/plain") || clipboardData.getData("text/uri-list");
+                  if (text != null) {
+                    selection2.insertRawText(text);
                   }
                 }
-                const text = clipboardData.getData("text/plain") || clipboardData.getData("text/uri-list");
-                if (text != null) {
-                  selection2.insertRawText(text);
-                }
+              },
+              {
+                tag: "paste"
               }
-            },
-            {
-              tag: "paste"
-            }
-          );
-        }
-        return true;
-      },
-      import_lexical9.COMMAND_PRIORITY_HIGH
+            );
+          }
+          return true;
+        },
+        import_lexical9.COMMAND_PRIORITY_HIGH
+      )
     );
   }, [editor]);
   return null;
@@ -4636,7 +4766,7 @@ function InputVariables(props) {
     editorRef,
     filterVariable
   } = props;
-  const [finalId] = (0, import_react48.useState)(id != null ? id : () => (0, import_uuid2.v4)());
+  const [finalId] = (0, import_react49.useState)(id != null ? id : () => (0, import_uuid2.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
@@ -4742,11 +4872,11 @@ function InputVariablesOverlayMenu({
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
 var import_canvas6 = require("@uniformdev/canvas");
 var import_design_system21 = require("@uniformdev/design-system");
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
-var import_react49 = require("@emotion/react");
-var variableBindButton2 = import_react49.css`
+var import_react50 = require("@emotion/react");
+var variableBindButton2 = import_react50.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4775,7 +4905,7 @@ var variableBindButton2 = import_react49.css`
     max-height: unset;
   }
 `;
-var input2 = import_react49.css`
+var input2 = import_react50.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -4824,7 +4954,7 @@ var input2 = import_react49.css`
     margin: 0;
   }
 `;
-var inputMultiLine = (lines) => import_react49.css`
+var inputMultiLine = (lines) => import_react50.css`
   // 1.5 = line height, spacing-md = top and bottom padding
   height: calc(${lines * 1.5}em + var(--spacing-md));
   resize: vertical;
@@ -4840,7 +4970,7 @@ function ParameterConnectionIndicator({
   disabled,
   menuTooltip = "Insert variable"
 }) {
-  const hasVariablesInValue = (0, import_react50.useMemo)(() => {
+  const hasVariablesInValue = (0, import_react51.useMemo)(() => {
     let result = false;
     (0, import_canvas6.bindVariablesToObject)({
       value,
@@ -4877,6 +5007,46 @@ function ParameterConnectionIndicator({
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
 var import_design_system22 = require("@uniformdev/design-system");
+var import_react53 = require("react");
+
+// src/components/Variables/composer/OnDisconnectPlugin.tsx
+var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
+var import_utils5 = require("@lexical/utils");
+var import_lexical10 = require("lexical");
+var import_react52 = require("react");
+function OnDisconnectPlugin({
+  onDisconnect
+}) {
+  const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
+  const { variables } = useVariables(true);
+  const variablesRef = (0, import_react52.useRef)(variables);
+  variablesRef.current = variables;
+  (0, import_react52.useEffect)(() => {
+    return (0, import_utils5.mergeRegister)(
+      editor.registerCommand(
+        DISCONNECT_VARIABLE_COMMAND,
+        ({ sourceKey }) => {
+          editor.update(() => {
+            const currentNode = (0, import_lexical10.$getNodeByKey)(sourceKey);
+            if (!$isVariableNode(currentNode)) {
+              return;
+            }
+            const currentVariableDefinition = variablesRef.current[currentNode.reference];
+            if (!currentVariableDefinition) {
+              return;
+            }
+            onDisconnect({ name: currentNode.reference, ...currentVariableDefinition });
+          });
+          return false;
+        },
+        import_lexical10.COMMAND_PRIORITY_HIGH
+      )
+    );
+  }, [editor, onDisconnect]);
+  return null;
+}
+
+// src/components/Variables/ParameterOrSingleVariable.tsx
 var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 function ParameterOrSingleVariable(props) {
   const {
@@ -4886,9 +5056,25 @@ function ParameterOrSingleVariable(props) {
     enableEditingVariables,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    onDisconnect
   } = props;
-  const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps, hasVariablesInValue } = useInputVariablesState(props);
+  const {
+    disableVariablesForReals,
+    hadVariablesInValue,
+    sharedMenuProps,
+    hasVariablesInValue,
+    setHadVariablesInValue
+  } = useInputVariablesState(props);
+  const handleDisconnect = (0, import_react53.useCallback)(
+    (variable) => {
+      setHadVariablesInValue(false);
+      if (onDisconnect) {
+        onDisconnect(variable);
+      }
+    },
+    [onDisconnect, setHadVariablesInValue]
+  );
   return (
     // we use a "fauxical" lexical here to render the vars the same as other editors do,
     // and also to enable us to dispatch the same editor commands as other editors do
@@ -4903,6 +5089,7 @@ function ParameterOrSingleVariable(props) {
         replaceValueOnVariableInsert: true,
         disabled: true,
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
           editorRef ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorRefPlugin, { editorRef }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ControlledValuePlugin, { enabled: true, value }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
@@ -4932,7 +5119,7 @@ function ParameterOrSingleVariable(props) {
 }
 
 // src/components/Variables/ParameterVariables.tsx
-var import_react51 = require("@emotion/react");
+var import_react54 = require("@emotion/react");
 var import_design_system23 = require("@uniformdev/design-system");
 var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 function ParameterVariables(props) {
@@ -4990,7 +5177,7 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react51.css``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react54.css``
                   ]
                 }
               ) }),
@@ -5025,28 +5212,14 @@ ${prettifyBindExpression(bindExpression)}`
   };
 }
 
-// src/components/Variables/util/variableDefaultTextValue.ts
-function variableDefaultTextValue(defaultValue) {
-  if (defaultValue === void 0 || defaultValue === null) {
-    return "";
-  }
-  if (typeof defaultValue === "string") {
-    return defaultValue;
-  }
-  if (defaultValue.toString) {
-    return defaultValue.toString();
-  }
-  return "unknown";
-}
-
 // src/components/Variables/VariablesList.tsx
-var import_react53 = require("@emotion/react");
+var import_react56 = require("@emotion/react");
 var import_design_system24 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
-var import_react52 = require("@emotion/react");
-var tableRow = (isDragging) => import_react52.css`
+var import_react55 = require("@emotion/react");
+var tableRow = (isDragging) => import_react55.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -5054,7 +5227,7 @@ var tableRow = (isDragging) => import_react52.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react52.css`
+var tableCellDragIcon = import_react55.css`
   &::after {
     content: '';
     display: block;
@@ -5072,7 +5245,7 @@ var tableCellDragIcon = import_react52.css`
     opacity: 1;
   }
 `;
-var variableName = import_react52.css`
+var variableName = import_react55.css`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -5083,7 +5256,7 @@ var variableName = import_react52.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react52.css`
+var variableValue = import_react55.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5160,7 +5333,7 @@ function VariablesList() {
                         title: `delete ${text}`,
                         css: [
                           import_design_system24.button,
-                          import_react53.css`
+                          import_react56.css`
                                     background: transparent;
                                   `
                         ],
@@ -5287,9 +5460,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react55 = require("@emotion/react");
+var import_react58 = require("@emotion/react");
 var import_design_system26 = require("@uniformdev/design-system");
-var import_react56 = require("react");
+var import_react59 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React11 = __toESM(require("react"));
@@ -5373,11 +5546,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react54 = require("@emotion/react");
-var innerContentStyles = import_react54.css`
+var import_react57 = require("@emotion/react");
+var innerContentStyles = import_react57.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react54.css`
+var requestTypeContainer = (bgColor) => import_react57.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5415,11 +5588,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react56.useState)("json");
+  const [language, setLanguage] = (0, import_react59.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
-      css: import_react55.css`
+      css: import_react58.css`
         background: var(--white);
       `,
       children: [
@@ -5427,7 +5600,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react55.css`
+            css: import_react58.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -5698,8 +5871,8 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react57 = require("@emotion/react");
-var import_react58 = require("react");
+var import_react60 = require("@emotion/react");
+var import_react61 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -5725,7 +5898,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react58.useMemo)(() => {
+  const mergedParameters = (0, import_react61.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -5735,7 +5908,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "small",
     {
-      css: import_react57.css`
+      css: import_react60.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -5973,12 +6146,12 @@ var import_design_system30 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react59 = require("react");
+var import_react62 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react59.useState)();
-  const [sdk, setSdk] = (0, import_react59.useState)();
-  const initializationInProgress = (0, import_react59.useRef)(false);
-  (0, import_react59.useEffect)(
+  const [error, setError] = (0, import_react62.useState)();
+  const [sdk, setSdk] = (0, import_react62.useState)();
+  const initializationInProgress = (0, import_react62.useRef)(false);
+  (0, import_react62.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -6036,7 +6209,7 @@ var MeshApp = ({
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react60 = require("@emotion/react");
+var import_react63 = require("@emotion/react");
 var import_design_system31 = require("@uniformdev/design-system");
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
@@ -6049,7 +6222,7 @@ var DataRefreshButton = ({
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       import_design_system31.LoadingIndicator,
       {
-        css: import_react60.css`
+        css: import_react63.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6059,15 +6232,15 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react62 = require("@emotion/react");
+var import_react65 = require("@emotion/react");
 var import_canvas8 = require("@uniformdev/canvas");
 var import_design_system32 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas7 = require("@uniformdev/canvas");
-var import_react61 = require("react");
+var import_react64 = require("react");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react61.createContext)({
+var ObjectSearchContext = (0, import_react64.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6082,15 +6255,15 @@ var ObjectSearchContext = (0, import_react61.createContext)({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = (0, import_react61.useState)({
+  const [query, setQuery] = (0, import_react64.useState)({
     contentType: "",
     keyword: ""
   });
   const { flatVariables } = useVariables(true);
-  const querySearchDeferred = (0, import_react61.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react61.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react61.useState)({});
-  const onSetQuery = (0, import_react61.useCallback)(
+  const querySearchDeferred = (0, import_react64.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react64.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react64.useState)({});
+  const onSetQuery = (0, import_react64.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6102,7 +6275,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react61.useCallback)(
+  const onSelectItem = (0, import_react64.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6116,17 +6289,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react61.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react64.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react61.useCallback)(
+  const onSetList = (0, import_react64.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react61.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react61.useMemo)(
+  const boundQuery = (0, import_react64.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react64.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6151,7 +6324,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react61.useContext)(ObjectSearchContext);
+  return (0, import_react64.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = (0, import_canvas7.bindVariablesToObject)({
@@ -6183,7 +6356,7 @@ var ObjectSearchContainer = ({
       import_design_system32.ScrollableList,
       {
         role: "list",
-        css: import_react62.css`
+        css: import_react65.css`
             > div {
               transition: max-height var(--duration-slow) var(--timing-ease-out);
               max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
@@ -6237,11 +6410,11 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 var import_design_system33 = require("@uniformdev/design-system");
-var import_react64 = require("react");
+var import_react67 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react63 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react63.css`
+var import_react66 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react66.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6249,14 +6422,14 @@ var ObjectSearchFilterContainerLabel = import_react63.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react63.css`
+var ObjectSearchFilterContainer = import_react66.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react63.css`
+var ObjectSearchFilterDropdownAndTextSearch = import_react66.css`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react63.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react66.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -6273,7 +6446,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react64.useState)({
+  const [searchState, setSearchState] = (0, import_react67.useState)({
     contentType: "",
     keyword: ""
   });
@@ -6327,9 +6500,9 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react65 = require("@emotion/react");
+var import_react68 = require("@emotion/react");
 var import_design_system34 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react65.css`
+var ObjectListItemContainer = import_react68.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6338,11 +6511,11 @@ var ObjectListItemContainer = import_react65.css`
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemContainerDisabled = import_react65.css`
+var ObjectListItemContainerDisabled = import_react68.css`
   opacity: var(--opacity-50);
   pointer-events: none;
 `;
-var ObjectListItemLoading = import_react65.css`
+var ObjectListItemLoading = import_react68.css`
   animation: ${import_design_system34.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6366,32 +6539,32 @@ var ObjectListItemLoading = import_react65.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react65.css`
+var ObjectListItemHeadingGroup = import_react68.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = import_react65.css`
+var ObjectListItemTitle = import_react68.css`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react65.css`
+var ObjectListItemSubtitle = import_react68.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react65.css`
+var ObjectListItemInfoContainer = import_react68.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react65.css`
+var ObjectListItemControlledContent = import_react68.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react65.css`
+var ObjectListItemUnControlledContent = import_react68.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6461,9 +6634,9 @@ var import_design_system37 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-var import_react66 = require("@emotion/react");
+var import_react69 = require("@emotion/react");
 var import_design_system36 = require("@uniformdev/design-system");
-var ButtonStyles = import_react66.css`
+var ButtonStyles = import_react69.css`
   ${import_design_system36.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
@@ -6490,7 +6663,7 @@ var ButtonStyles = import_react66.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react66.css`
+var ButtonIcon = import_react69.css`
   width: 1rem;
   height: 1rem;
 `;
@@ -6519,8 +6692,8 @@ var LinkButton = ({
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-var import_react67 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react67.css`
+var import_react70 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react70.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6536,7 +6709,7 @@ var ObjectSearchResultItemContainer = import_react67.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react67.css`
+var ObjectSearchDragHandle = import_react70.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6545,35 +6718,35 @@ var ObjectSearchDragHandle = import_react67.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react67.css`
+var ObjectSearchResultItemSubtitle = import_react70.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react67.css`
+var ObjectSearchResultItemTitle = import_react70.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react67.css`
+var ObjectSearchResultItemTimeStamp = import_react70.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react67.css`
+var ObjectSearchAuthorStateGroup = import_react70.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react67.css`
+var ObjectSearchUpdateGroup = import_react70.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react67.css`
+var ObjectSearchContentContainer = import_react70.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react67.css`
+var ObjectSearchImage = import_react70.css`
   width: 56px;
   object-fit: contain;
 `;
@@ -6641,26 +6814,26 @@ var import_design_system38 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-var import_react68 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react68.css`
+var import_react71 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react71.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react68.css`
+var ObjectSearchDragContainer = import_react71.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = import_react68.css`
+var ObjectSearchContainerDragging = import_react71.css`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = import_react68.css`
+var ObjectSearchResultListCounterContainer = import_react71.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react68.css`
+var ObjectSearchResultListTitle = import_react71.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6749,7 +6922,7 @@ function ObjectSearchResultList({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 var import_design_system39 = require("@uniformdev/design-system");
-var import_react69 = require("react");
+var import_react72 = require("react");
 var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
@@ -6781,7 +6954,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react69.useState)({
+  const [queryState, setQueryState] = (0, import_react72.useState)({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -6792,7 +6965,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react69.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
@@ -6935,7 +7108,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-var import_react70 = require("react");
+var import_react73 = require("react");
 var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -6944,7 +7117,7 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = (0, import_react70.useMemo)(
+  const variables = (0, import_react73.useMemo)(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
@@ -6957,9 +7130,9 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = (0, import_react70.useRef)(false);
+  const sillyRef = (0, import_react73.useRef)(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  (0, import_react70.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (sillyRef.current) {
       return;
     }
@@ -6977,10 +7150,10 @@ var JsonMeshVariableEditor = ({
         existingConnectedData: variable
       });
       if (result.canceled) {
-        onCancel();
+        onCancel(result.editorCancelledContext);
         return;
       }
-      onSubmit(result.connectedData);
+      onSubmit(result.connectedData, null);
     };
     effect();
   }, [context == null ? void 0 : context.connectsTo, editConnectedData, onCancel, onSubmit, variable]);
@@ -7006,6 +7179,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   Button,
   Callout,
   ControlledValuePlugin,
+  DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceDynamicInputProvider,
@@ -7166,7 +7340,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useDynamicInputsAsVariables,
   useMeshLocation,
   useObjectSearchContext,
-  useOnVariableUpdated,
   useParameterShell,
   useProductQueryContext,
   useProductSearchContext,
@@ -7174,6 +7347,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useRequestHeader,
   useRequestParameter,
   useUniformMeshSdk,
+  useVariableEditor,
   useVariables,
   useVariablesMenu,
   variableDefaultTextValue,