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

package/dist/index.esm.js

@@ -2909,7 +2909,7 @@ function ControlledValuePlugin({
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { $moveCharacter, $shouldOverrideDefaultCharacterSelection } from "@lexical/selection";
-import { mergeRegister } from "@lexical/utils";
+import { mergeRegister as mergeRegister2 } from "@lexical/utils";
 import { createVariableReference as createVariableReference2 } from "@uniformdev/canvas";
 import { LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
 import {
@@ -2999,18 +2999,20 @@ import {
   LexicalTypeaheadMenuPlugin,
   MenuOption
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { mergeRegister } from "@lexical/utils";
 import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
 import { createVariableReference } from "@uniformdev/canvas";
-import { HorizontalRhythm, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm2, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
 import { dequal as dequal2 } from "dequal/lite";
 import {
+  $createTextNode,
   $getNodeByKey,
   $insertNodes,
   $nodesOfType as $nodesOfType2,
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState9 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3042,8 +3044,8 @@ var variablesTipText = css18`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useOnVariableUpdated.ts
-import { useEffect as useEffect6 } from "react";
+// src/components/Variables/useVariableEditor.ts
+import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
@@ -3051,7 +3053,8 @@ import { createContext as createContext3, useContext as useContext5, useMemo as
 
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button as Button2, Callout as Callout3, Input as Input2, useShortcut } from "@uniformdev/design-system";
+import { Button as Button2, Callout as Callout3, HorizontalRhythm, Input as Input2, useShortcut } from "@uniformdev/design-system";
+import { useLayoutEffect, useRef as useRef9 } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -3062,10 +3065,6 @@ var variablesFormContainer = css19`
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = css19`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
 
 // src/components/Variables/VariableEditor.tsx
 import { jsx as jsx30, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
@@ -3077,7 +3076,12 @@ var schema = z.object({
   order: z.number().optional(),
   type: 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];
@@ -3099,7 +3103,7 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
       type: values.type || void 0,
       displayName: values.displayName || void 0
     };
-    return onSubmit(finalValue);
+    return onSubmit(finalValue, null);
   });
   useShortcut({
     shortcut: "enter",
@@ -3108,6 +3112,13 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
     },
     activeWhenEditing: true
   });
+  const nameRef = useRef9(null);
+  const { ref, ...nameRegister } = register("name");
+  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.
@@ -3115,12 +3126,15 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
       /* @__PURE__ */ jsx30(
         Input2,
         {
-          ...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__ */ jsx30(
@@ -3142,14 +3156,22 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
           errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
         }
       ),
-      /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
+      /* @__PURE__ */ jsx30(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
         /* @__PURE__ */ jsx30(Button2, { type: "button", onClick: submitHandler, children: "OK" }),
-        /* @__PURE__ */ jsx30(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-      ] }),
+        /* @__PURE__ */ jsx30(Button2, { type: "button", buttonType: "ghost", onClick: () => onCancel({ disconnect: false }), children: "cancel" })
+      ] }) }),
       disableMeshTip ? null : /* @__PURE__ */ jsxs16(Callout3, { 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__ */ jsx30("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        /* @__PURE__ */ jsx30(
+          "a",
+          {
+            href: "https://docs.uniform.app/docs/integrations/mesh-integrations/custom-integrations",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Mesh SDK"
+          }
+        ),
         "."
       ] })
     ] })
@@ -3170,7 +3192,10 @@ function VariablesProvider({
 }) {
   const [editing, setEditing] = useState7();
   const [editingContext, setEditingContext] = useState7();
-  const events = useMemo7(() => mitt(), []);
+  const events = useMemo7(
+    () => mitt(),
+    []
+  );
   if (!readOnly && !onChange) {
     throw new Error("onChange must be provided when readOnly is false");
   }
@@ -3229,15 +3254,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
       }
@@ -3273,16 +3306,57 @@ function flattenVariables(variables) {
   return flatVariables;
 }
 
-// src/components/Variables/useOnVariableUpdated.ts
-function useOnVariableUpdated(fn, disabled) {
-  const { variables, events, canDispatch } = useVariables(true);
+// src/components/Variables/useVariableEditor.ts
+function useVariableEditor() {
+  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
+  const [isEditingBinding, setIsEditingBinding] = useState8();
   useEffect6(() => {
-    if (disabled || !canDispatch) {
+    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]);
+  useEffect6(() => {
+    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
@@ -3335,6 +3409,9 @@ function variablesToGroupedList(variables, filterFn, context) {
 import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var OPEN_INSERT_VARIABLE_COMMAND = createCommand("uniform:open-insert-variable");
 var EDIT_VARIABLE_COMMAND = createCommand("uniform:edit-variable");
+var DISCONNECT_VARIABLE_COMMAND = createCommand(
+  "uniform:disconnect-variable"
+);
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
 var TRIGGER = "\\$\\$";
 var LENGTH_LIMIT = 20;
@@ -3438,7 +3515,7 @@ function VariablesPlugin({
 }) {
   const [editor] = useLexicalComposerContext2();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
-  const variablesRef = useRef9({ variables, knownUndefinedValues, isLoading });
+  const variablesRef = useRef10({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
   const canEditVariable = useCallback(
     (name, variable) => (
@@ -3447,28 +3524,8 @@ function VariablesPlugin({
     ),
     [canDispatch, enableEditingVariables, readOnly]
   );
-  const [editingKey, setEditingKey] = useState8(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);
-  useEffect7(() => {
-    if (editingKey !== null && !isEditing) {
-      setEditingKey(null);
-    }
-  }, [editingKey, isEditing]);
-  const [queryString, setQueryString] = useState8(null);
+  const { editVariable } = useVariableEditor();
+  const [queryString, setQueryString] = useState9(null);
   const { groupedVariables, menuOptions, onSelect } = useVariablesMenu({
     showAddVariableMenuOption,
     filterVariable,
@@ -3496,9 +3553,6 @@ function VariablesPlugin({
   }, [queryString, groupedVariables, menuOptions]);
   const onSelectOption = useCallback(
     (selectedOption, nodeToReplace, closeMenu) => {
-      if (selectedOption.key === ADD_VARIABLE_OPTION) {
-        setEditingKey(void 0);
-      }
       onSelect({
         queryString: queryString != null ? queryString : void 0,
         value: selectedOption.key,
@@ -3511,57 +3565,126 @@ function VariablesPlugin({
     [editor, onSelect, queryString, replaceValueOnVariableInsert]
   );
   useEffect7(() => {
-    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;
-      },
-      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;
-      },
-      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, createVariableReference(reference));
-            return true;
+    return 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;
+        },
+        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 = $getNodeByKey(sourceKey);
+            if (!$isVariableNode(currentNode)) {
+              throw new Error("Cannot disconnect a non-variable node");
+            }
+            const currentVariableDefinition = variablesRef.current.variables[currentNode.reference];
+            const variableTextNode = $createTextNode(
+              variableDefaultTextValue(
+                (_a = currentVariableDefinition == null ? void 0 : currentVariableDefinition.default) != null ? _a : currentNode.getState().displayName
+              )
+            );
+            const variableNode = $getNodeByKey(sourceKey);
+            if (!variableNode) {
+              console.error("Disconnected from unknown node.");
+              return true;
+            }
+            variableNode.replace(variableTextNode);
+            variableTextNode.select();
           });
-          if (targetKey) {
-            (_b = $getNodeByKey(targetKey)) == null ? void 0 : _b.replace(variableNode);
-          } else {
-            $insertNodes([variableNode]);
+          return true;
+        },
+        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;
-      },
-      COMMAND_PRIORITY_NORMAL
+          return true;
+        },
+        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, 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 = $getNodeByKey(targetKey)) == null ? void 0 : _b.replace(variableNode);
+            } else {
+              $insertNodes([variableNode]);
+            }
+          }
+          return true;
+        },
+        COMMAND_PRIORITY_NORMAL
+      )
     );
-  }, [editor, disableVariables, canDispatch, dispatch, canEditVariable, readOnly, getEditorContext]);
+  }, [
+    editor,
+    disableVariables,
+    canDispatch,
+    dispatch,
+    canEditVariable,
+    readOnly,
+    getEditorContext,
+    editVariable,
+    replaceValueOnVariableInsert
+  ]);
   const updateExistingNodeIfChanged = useCallback(
     (variableNode) => {
       var _a, _b, _c;
@@ -3609,7 +3732,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;
@@ -3651,7 +3774,7 @@ function VariablesPlugin({
                           setHighlightedIndex(myCumulativeIndex);
                         },
                         css: menuItemTextGroup,
-                        children: variable.name === ADD_VARIABLE_OPTION ? /* @__PURE__ */ jsxs18(HorizontalRhythm, { gap: "sm", align: "center", children: [
+                        children: variable.name === ADD_VARIABLE_OPTION ? /* @__PURE__ */ jsxs18(HorizontalRhythm2, { gap: "sm", align: "center", children: [
                           /* @__PURE__ */ jsx32(AiFillPlusCircle, { fill: "var(--gray-500)" }),
                           " ",
                           /* @__PURE__ */ jsx32("span", { children: variable.displayName })
@@ -3772,7 +3895,7 @@ function VariableNodeComponent({
     [isSelected, nodeKey]
   );
   useEffect8(() => {
-    return mergeRegister(
+    return mergeRegister2(
       editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
       editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
       // HACK: see https://github.com/facebook/lexical/issues/4214
@@ -3878,27 +4001,30 @@ function EditorRefPlugin({
 
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister as mergeRegister3 } from "@lexical/utils";
 import { $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
 import { useEffect as useEffect9 } from "react";
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = useLexicalComposerContext5();
   useEffect9(() => {
-    editor.registerCommand(
-      PASTE_COMMAND,
-      (event) => {
-        var _a;
-        const selection = $getSelection2();
-        const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
-        if (pastedText && transformPaste && $isRangeSelection2(selection)) {
-          const result = transformPaste(pastedText);
-          if (result !== void 0) {
-            selection.insertText(result);
-            return true;
+    return mergeRegister3(
+      editor.registerCommand(
+        PASTE_COMMAND,
+        (event) => {
+          var _a;
+          const selection = $getSelection2();
+          const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
+          if (pastedText && transformPaste && $isRangeSelection2(selection)) {
+            const result = transformPaste(pastedText);
+            if (result !== void 0) {
+              selection.insertText(result);
+              return true;
+            }
           }
-        }
-        return false;
-      },
-      COMMAND_PRIORITY_HIGH
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH
+      )
     );
   }, [editor, transformPaste]);
   return null;
@@ -4022,7 +4148,8 @@ function useInputVariablesState({
     sharedMenuProps,
     disableVariablesForReals,
     hasVariablesInValue,
-    hadVariablesInValue: hadVariablesInValueForReals
+    hadVariablesInValue: hadVariablesInValueForReals,
+    setHadVariablesInValue
   };
 }
 
@@ -4066,8 +4193,8 @@ import { CLEAR_EDITOR_COMMAND } from "lexical";
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
 import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
 import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
-import { HorizontalRhythm as HorizontalRhythm2, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
-import { useEffect as useEffect11, useRef as useRef10, useState as useState10 } from "react";
+import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
+import { useRef as useRef11 } from "react";
 import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
   onSelectVariable,
@@ -4080,17 +4207,9 @@ function SelectVariableMenu({
   menuTooltip = "Insert variable",
   filterVariable
 }) {
-  const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables(true);
-  const btnRef = useRef10(null);
-  const [openedAdd, setOpenedAdd] = useState10(false);
-  useOnVariableUpdated(({ name, latestValue }) => {
-    onSelectVariable == null ? void 0 : onSelectVariable({ ...latestValue[name], name });
-  }, !openedAdd);
-  useEffect11(() => {
-    if (openedAdd && !isEditing) {
-      setOpenedAdd(false);
-    }
-  }, [isEditing, openedAdd]);
+  const { variables, canDispatch, readOnly } = useVariables(true);
+  const btnRef = useRef11(null);
+  const { editVariable } = useVariableEditor();
   const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
   const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
   const menuHasVariableOptions = variablesGroups.length > 0;
@@ -4119,12 +4238,15 @@ function SelectVariableMenu({
         showAddVariableMenuOptionForReals ? /* @__PURE__ */ jsx34(
           MenuItem3,
           {
-            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__ */ jsxs19(HorizontalRhythm2, { gap: "sm", align: "center", children: [
+            children: /* @__PURE__ */ jsxs19(HorizontalRhythm3, { gap: "sm", align: "center", children: [
               /* @__PURE__ */ jsx34(BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
               /* @__PURE__ */ jsx34("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ jsx34(Fragment7, { children: "Add\u2026" }) })
             ] })
@@ -4165,7 +4287,7 @@ function VariablesComposerVariableMenu(props) {
   const [editor] = useLexicalComposerContext6();
   const onSelectVariable = (selectedVariable) => {
     editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
-      reference: selectedVariable.name,
+      variable: selectedVariable.name,
       initialDisplayName: selectedVariable.displayName,
       targetKey: void 0,
       overwriteExistingValue: props.replaceValueOnVariableInsert
@@ -4220,14 +4342,14 @@ import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { useMemo as useMemo10, useRef as useRef11, useState as useState11 } from "react";
+import { useMemo as useMemo10, useRef as useRef12, useState as useState11 } from "react";
 
 // src/components/Variables/composer/DisablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect11 } from "react";
 function DisablePlugin({ disabled }) {
   const [editor] = useLexicalComposerContext7();
-  useEffect12(() => {
+  useEffect11(() => {
     editor.setEditable(!disabled);
   }, [editor, disabled]);
   return null;
@@ -4236,10 +4358,10 @@ function DisablePlugin({ disabled }) {
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { LineBreakNode } from "lexical";
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect12 } from "react";
 function SingleLineTextPlugin() {
   const [editor] = useLexicalComposerContext8();
-  useEffect13(() => {
+  useEffect12(() => {
     editor.registerNodeTransform(LineBreakNode, (node) => {
       node.remove();
     });
@@ -4305,8 +4427,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = useRef11();
-  const updateTimeout = useRef11();
+  const editorState = useRef12();
+  const updateTimeout = useRef12();
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ jsxs21(LexicalComposer, { initialConfig: editorConfig, children: [
@@ -4350,7 +4472,7 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
-import { objectKlassEquals } from "@lexical/utils";
+import { mergeRegister as mergeRegister4, objectKlassEquals } from "@lexical/utils";
 import {
   $getSelection as $getSelection3,
   $isNodeSelection as $isNodeSelection2,
@@ -4360,7 +4482,7 @@ import {
   CUT_COMMAND,
   PASTE_COMMAND as PASTE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
   return /* @__PURE__ */ jsxs22("div", { children: [
@@ -4378,67 +4500,75 @@ function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
 }
 function RichishCopyAndPastePlugin() {
   const [editor] = useLexicalComposerContext9();
-  useEffect14(() => {
-    editor.registerCommand(
-      COPY_COMMAND,
-      (event) => {
-        copyToClipboard(editor, objectKlassEquals(event, ClipboardEvent) ? event : null);
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH2
-    );
-    editor.registerCommand(
-      CUT_COMMAND,
-      (event) => {
-        copyToClipboard(editor, objectKlassEquals(event, ClipboardEvent) ? event : null);
-        editor.update(() => {
+  useEffect13(() => {
+    return mergeRegister4(
+      editor.registerCommand(
+        COPY_COMMAND,
+        (event) => {
+          copyToClipboard(
+            editor,
+            objectKlassEquals(event, ClipboardEvent) ? event : null
+          );
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH2
+      ),
+      editor.registerCommand(
+        CUT_COMMAND,
+        (event) => {
+          copyToClipboard(
+            editor,
+            objectKlassEquals(event, ClipboardEvent) ? event : null
+          );
+          editor.update(() => {
+            const selection = $getSelection3();
+            if ($isRangeSelection3(selection)) {
+              selection.removeText();
+            } else if ($isNodeSelection2(selection)) {
+              selection.getNodes().forEach((node) => node.remove());
+            }
+          });
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH2
+      ),
+      editor.registerCommand(
+        PASTE_COMMAND2,
+        (event) => {
           const selection = $getSelection3();
           if ($isRangeSelection3(selection)) {
-            selection.removeText();
-          } else if ($isNodeSelection2(selection)) {
-            selection.getNodes().forEach((node) => node.remove());
-          }
-        });
-        return true;
-      },
-      COMMAND_PRIORITY_HIGH2
-    );
-    editor.registerCommand(
-      PASTE_COMMAND2,
-      (event) => {
-        const selection = $getSelection3();
-        if ($isRangeSelection3(selection)) {
-          event.preventDefault();
-          editor.update(
-            () => {
-              const selection2 = $getSelection3();
-              const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
-              if (clipboardData != null && $isRangeSelection3(selection2)) {
-                const lexicalString = clipboardData.getData("application/x-lexical-editor");
-                if (lexicalString) {
-                  try {
-                    const payload = JSON.parse(lexicalString);
-                    if (Array.isArray(payload.nodes)) {
-                      const nodes = $generateNodesFromSerializedNodes(payload.nodes);
-                      return $insertGeneratedNodes(editor, nodes, selection2);
+            event.preventDefault();
+            editor.update(
+              () => {
+                const selection2 = $getSelection3();
+                const clipboardData = event instanceof InputEvent || event instanceof KeyboardEvent ? null : event.clipboardData;
+                if (clipboardData != null && $isRangeSelection3(selection2)) {
+                  const lexicalString = clipboardData.getData("application/x-lexical-editor");
+                  if (lexicalString) {
+                    try {
+                      const payload = JSON.parse(lexicalString);
+                      if (Array.isArray(payload.nodes)) {
+                        const nodes = $generateNodesFromSerializedNodes(payload.nodes);
+                        return $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;
-      },
-      COMMAND_PRIORITY_HIGH2
+            );
+          }
+          return true;
+        },
+        COMMAND_PRIORITY_HIGH2
+      )
     );
   }, [editor]);
   return null;
@@ -4575,7 +4705,7 @@ function InputVariablesOverlayMenu({
 // src/components/Variables/ParameterConnectionIndicator.tsx
 import { CgUsbC as CgUsbC2 } from "@react-icons/all-files/cg/CgUsbC";
 import { bindVariablesToObject } from "@uniformdev/canvas";
-import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu3 } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm4, Menu as Menu3 } from "@uniformdev/design-system";
 import { useMemo as useMemo11 } from "react";
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
@@ -4685,7 +4815,7 @@ function ParameterConnectionIndicator({
     });
     return result;
   }, [value]);
-  return /* @__PURE__ */ jsxs24(HorizontalRhythm3, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs24(HorizontalRhythm4, { align: "center", gap: "xs", css: { width: "100%" }, children: [
     /* @__PURE__ */ jsx40("div", { css: { flex: 1 }, children }),
     disabled ? null : /* @__PURE__ */ jsx40(
       Menu3,
@@ -4710,7 +4840,47 @@ function ParameterConnectionIndicator({
 }
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
-import { HorizontalRhythm as HorizontalRhythm4 } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm5 } from "@uniformdev/design-system";
+import { useCallback as useCallback3 } from "react";
+
+// src/components/Variables/composer/OnDisconnectPlugin.tsx
+import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister as mergeRegister5 } from "@lexical/utils";
+import { $getNodeByKey as $getNodeByKey3, COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH3 } from "lexical";
+import { useEffect as useEffect14, useRef as useRef13 } from "react";
+function OnDisconnectPlugin({
+  onDisconnect
+}) {
+  const [editor] = useLexicalComposerContext10();
+  const { variables } = useVariables(true);
+  const variablesRef = useRef13(variables);
+  variablesRef.current = variables;
+  useEffect14(() => {
+    return mergeRegister5(
+      editor.registerCommand(
+        DISCONNECT_VARIABLE_COMMAND,
+        ({ sourceKey }) => {
+          editor.update(() => {
+            const currentNode = $getNodeByKey3(sourceKey);
+            if (!$isVariableNode(currentNode)) {
+              return;
+            }
+            const currentVariableDefinition = variablesRef.current[currentNode.reference];
+            if (!currentVariableDefinition) {
+              return;
+            }
+            onDisconnect({ name: currentNode.reference, ...currentVariableDefinition });
+          });
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH3
+      )
+    );
+  }, [editor, onDisconnect]);
+  return null;
+}
+
+// src/components/Variables/ParameterOrSingleVariable.tsx
 import { jsx as jsx41, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 function ParameterOrSingleVariable(props) {
   const {
@@ -4720,9 +4890,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 = useCallback3(
+    (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
@@ -4737,9 +4923,10 @@ function ParameterOrSingleVariable(props) {
         replaceValueOnVariableInsert: true,
         disabled: true,
         children: [
+          /* @__PURE__ */ jsx41(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
           editorRef ? /* @__PURE__ */ jsx41(EditorRefPlugin, { editorRef }) : null,
           /* @__PURE__ */ jsx41(ControlledValuePlugin, { enabled: true, value }),
-          /* @__PURE__ */ jsxs25(HorizontalRhythm4, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+          /* @__PURE__ */ jsxs25(HorizontalRhythm5, { align: "center", gap: "xs", css: { width: "100%" }, children: [
             /* @__PURE__ */ jsx41("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx41(
               VariablesComposerInput,
               {
@@ -4767,7 +4954,7 @@ function ParameterOrSingleVariable(props) {
 
 // src/components/Variables/ParameterVariables.tsx
 import { css as css24 } from "@emotion/react";
-import { HorizontalRhythm as HorizontalRhythm5 } from "@uniformdev/design-system";
+import { HorizontalRhythm as HorizontalRhythm6 } from "@uniformdev/design-system";
 import { jsx as jsx42, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 function ParameterVariables(props) {
   const {
@@ -4805,7 +4992,7 @@ function ParameterVariables(props) {
         editorRef ? /* @__PURE__ */ jsx42(EditorRefPlugin, { editorRef }) : null,
         /* @__PURE__ */ jsx42(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
         /* @__PURE__ */ jsxs26(
-          HorizontalRhythm5,
+          HorizontalRhythm6,
           {
             align: "center",
             gap: "xs",
@@ -4859,20 +5046,6 @@ ${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
 import { css as css26 } from "@emotion/react";
 import {
@@ -5835,11 +6008,11 @@ import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect15, useRef as useRef12, useState as useState14 } from "react";
+import { useEffect as useEffect15, useRef as useRef14, useState as useState14 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState14();
   const [sdk, setSdk] = useState14();
-  const initializationInProgress = useRef12(false);
+  const initializationInProgress = useRef14(false);
   useEffect15(
     () => {
       if (typeof window === "undefined" || sdk) {
@@ -5929,7 +6102,7 @@ import { Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhy
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
 import {
   createContext as createContext5,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useContext as useContext7,
   useDeferredValue,
   useMemo as useMemo14,
@@ -5959,7 +6132,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
   const querySearchDeferred = useDeferredValue(query);
   const [selectedItems, setSelectedItems] = useState15(currentlySelectedItems != null ? currentlySelectedItems : []);
   const [list, setList] = useState15({});
-  const onSetQuery = useCallback3(
+  const onSetQuery = useCallback4(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -5971,7 +6144,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = useCallback3(
+  const onSelectItem = useCallback4(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -5985,10 +6158,10 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = useCallback3(() => {
+  const onRemoveAllSelectedItems = useCallback4(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = useCallback3(
+  const onSetList = useCallback4(
     (value2) => {
       setList(value2);
     },
@@ -6804,7 +6977,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef13 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef15 } from "react";
 import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -6826,7 +6999,7 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = useRef13(false);
+  const sillyRef = useRef15(false);
   const { editConnectedData } = useMeshLocation("paramType");
   useEffect17(() => {
     if (sillyRef.current) {
@@ -6846,10 +7019,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]);
@@ -6909,6 +7082,7 @@ export {
   Button6 as Button,
   Callout5 as Callout,
   ControlledValuePlugin,
+  DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceDynamicInputProvider,
@@ -7069,7 +7243,6 @@ export {
   useDynamicInputsAsVariables,
   useMeshLocation,
   useObjectSearchContext,
-  useOnVariableUpdated,
   useParameterShell,
   useProductQueryContext,
   useProductSearchContext,
@@ -7077,6 +7250,7 @@ export {
   useRequestHeader,
   useRequestParameter,
   useUniformMeshSdk,
+  useVariableEditor,
   useVariables,
   useVariablesMenu,
   variableDefaultTextValue,