@flowgram.ai/form-materials 0.3.4 → 0.3.6

package/dist/index.js

@@ -44,6 +44,9 @@ __export(src_exports, {
   DisplaySchemaTag: () => DisplaySchemaTag,
   DisplaySchemaTree: () => DisplaySchemaTree,
   DynamicValueInput: () => DynamicValueInput,
+  InjectDynamicValueInput: () => InjectDynamicValueInput,
+  InjectTypeSelector: () => InjectTypeSelector,
+  InjectVariableSelector: () => InjectVariableSelector,
   InputsValues: () => InputsValues,
   JsonEditorWithVariables: () => JsonEditorWithVariables,
   JsonSchemaEditor: () => JsonSchemaEditor,
@@ -59,6 +62,7 @@ __export(src_exports, {
   createDisableDeclarationPlugin: () => createDisableDeclarationPlugin,
   createInferAssignPlugin: () => createInferAssignPlugin,
   createInferInputsPlugin: () => createInferInputsPlugin,
+  createInjectMaterial: () => createInjectMaterial,
   createTypePresetPlugin: () => createTypePresetPlugin,
   formatLegacyRefOnInit: () => formatLegacyRefOnInit,
   formatLegacyRefOnSubmit: () => formatLegacyRefOnSubmit,
@@ -86,34 +90,118 @@ var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${_
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
 // src/components/variable-selector/index.tsx
-var import_react12 = __toESM(require("react"));
-var import_editor11 = require("@flowgram.ai/editor");
+var import_react13 = __toESM(require("react"));
+var import_editor12 = require("@flowgram.ai/editor");
 var import_semi_ui7 = require("@douyinfe/semi-ui");
 var import_semi_icons = require("@douyinfe/semi-icons");
 
+// src/shared/format-legacy-refs/index.ts
+var import_lodash = require("lodash");
+function formatLegacyRefOnSubmit(value) {
+  if ((0, import_lodash.isObject)(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnSubmit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+  return value;
+}
+function formatLegacyRefOnInit(value) {
+  if ((0, import_lodash.isObject)(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnInit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+  return value;
+}
+function isLegacyFlowRefValueSchema(value) {
+  return (0, import_lodash.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+}
+function isNewFlowRefValueSchema(value) {
+  return (0, import_lodash.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+}
+function formatLegacyRefToNewRef(value) {
+  const keyPath = value.content.split(".");
+  if (keyPath[1] === "outputs") {
+    return {
+      type: "ref",
+      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
+    };
+  }
+  return {
+    type: "ref",
+    content: keyPath
+  };
+}
+function formatNewRefToLegacyRef(value) {
+  return {
+    type: "ref",
+    content: value.content.join(".")
+  };
+}
+
+// src/shared/inject-material/index.tsx
+var import_react = __toESM(require("react"));
+var import_editor = require("@flowgram.ai/editor");
+function createInjectMaterial(Component, params) {
+  const InjectComponent = (props) => {
+    const container = (0, import_editor.usePlaygroundContainer)();
+    if (!container?.isBound(import_editor.FlowRendererRegistry)) {
+      return import_react.default.createElement(Component, { ...props });
+    }
+    const rendererRegistry = container.get(import_editor.FlowRendererRegistry);
+    const renderKey = params?.renderKey || Component.renderKey || Component.name || "";
+    const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
+    if (renderer?.type !== import_editor.FlowRendererComponentType.REACT) {
+      return import_react.default.createElement(Component, { ...props });
+    }
+    return import_react.default.createElement(renderer.renderer, {
+      ...props
+    });
+  };
+  return InjectComponent;
+}
+
 // src/components/variable-selector/use-variable-tree.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_json_schema4 = require("@flowgram.ai/json-schema");
-var import_editor10 = require("@flowgram.ai/editor");
+var import_editor11 = require("@flowgram.ai/editor");
 var import_semi_ui5 = require("@douyinfe/semi-ui");
 
 // src/plugins/json-schema-preset/index.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_json_schema3 = require("@flowgram.ai/json-schema");
 
 // src/plugins/json-schema-preset/type-definition/index.tsx
 var import_json_schema = require("@flowgram.ai/json-schema");
 
 // src/plugins/json-schema-preset/type-definition/string.tsx
-var import_react = __toESM(require("react"));
-var import_editor = require("@flowgram.ai/editor");
+var import_react2 = __toESM(require("react"));
+var import_editor2 = require("@flowgram.ai/editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 var stringRegistry = {
   type: "string",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react.default.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ import_react2.default.createElement(
     import_semi_ui.Input,
     {
-      placeholder: import_editor.I18n.t("Please Input String"),
+      placeholder: import_editor2.I18n.t("Please Input String"),
       size: "small",
       disabled: props.readonly,
       ...props
@@ -122,16 +210,16 @@ var stringRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/object.tsx
-var import_react5 = __toESM(require("react"));
-var import_editor3 = require("@flowgram.ai/editor");
+var import_react6 = __toESM(require("react"));
+var import_editor4 = require("@flowgram.ai/editor");
 
 // src/components/code-editor-mini/index.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 
 // src/components/code-editor/index.tsx
-var import_react2 = __toESM(require("react"));
-var import_react3 = require("@coze-editor/editor/react");
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@coze-editor/editor/react");
 var import_preset_code5 = __toESM(require("@coze-editor/editor/preset-code"));
 var import_view = require("@codemirror/view");
 
@@ -158,13 +246,13 @@ var import_language_typescript = require("@coze-editor/editor/language-typescrip
 var import_language_shell = require("@coze-editor/editor/language-shell");
 var import_language_python = require("@coze-editor/editor/language-python");
 var import_language_json = require("@coze-editor/editor/language-json");
-var import_editor2 = require("@coze-editor/editor");
+var import_editor3 = require("@coze-editor/editor");
 import_preset_code.languages.register("python", import_language_python.python);
 import_preset_code.languages.register("shell", import_language_shell.shell);
 import_preset_code.languages.register("typescript", import_language_typescript.typescript);
 import_preset_code.languages.register("json", {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
-  language: (0, import_editor2.mixLanguages)({
+  language: (0, import_editor3.mixLanguages)({
     outerLanguage: import_language_json.json.language
   }),
   languageService: import_language_json.json.languageService
@@ -418,7 +506,7 @@ import_preset_code4.themes.register("dark", darkTheme);
 import_preset_code4.themes.register("light", lightTheme);
 
 // src/components/code-editor/index.tsx
-var OriginCodeEditor = (0, import_react3.createRenderer)(import_preset_code5.default, [
+var OriginCodeEditor = (0, import_react4.createRenderer)(import_preset_code5.default, [
   import_view.EditorView.theme({
     "&.cm-focused": {
       outline: "none"
@@ -436,18 +524,18 @@ function CodeEditor({
   options,
   readonly
 }) {
-  const editorRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const editorRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     if (languageId === "typescript") {
       initTsWorker();
     }
   }, [languageId]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (editorRef.current?.getValue() !== value) {
       editorRef.current?.setValue(String(value || ""));
     }
   }, [value]);
-  return /* @__PURE__ */ import_react2.default.createElement(import_react3.EditorProvider, null, /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(import_react4.EditorProvider, null, /* @__PURE__ */ import_react3.default.createElement(
     OriginCodeEditor,
     {
       defaultValue: value,
@@ -465,7 +553,7 @@ function CodeEditor({
       },
       onChange: (e) => onChange?.(e.value)
     },
-    activeLinePlaceholder && /* @__PURE__ */ import_react2.default.createElement(import_react3.ActiveLinePlaceholder, null, activeLinePlaceholder),
+    activeLinePlaceholder && /* @__PURE__ */ import_react3.default.createElement(import_react4.ActiveLinePlaceholder, null, activeLinePlaceholder),
     children
   ));
 }
@@ -477,7 +565,7 @@ var UIMini = import_styled_components.default.div`
   }
 `;
 function CodeEditorMini(props) {
-  return /* @__PURE__ */ import_react4.default.createElement(UIMini, null, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(UIMini, null, /* @__PURE__ */ import_react5.default.createElement(
     CodeEditor,
     {
       ...props,
@@ -493,28 +581,28 @@ function CodeEditorMini(props) {
 // src/plugins/json-schema-preset/type-definition/object.tsx
 var objectRegistry = {
   type: "object",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react5.default.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ import_react6.default.createElement(
     CodeEditorMini,
     {
       value: props.value,
       onChange: (v) => props.onChange?.(v),
       languageId: "json",
-      placeholder: import_editor3.I18n.t("Please Input Object"),
+      placeholder: import_editor4.I18n.t("Please Input Object"),
       readonly: props.readonly
     }
   )
 };
 
 // src/plugins/json-schema-preset/type-definition/number.tsx
-var import_react6 = __toESM(require("react"));
-var import_editor4 = require("@flowgram.ai/editor");
+var import_react7 = __toESM(require("react"));
+var import_editor5 = require("@flowgram.ai/editor");
 var import_semi_ui2 = require("@douyinfe/semi-ui");
 var numberRegistry = {
   type: "number",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react6.default.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
     import_semi_ui2.InputNumber,
     {
-      placeholder: import_editor4.I18n.t("Please Input Number"),
+      placeholder: import_editor5.I18n.t("Please Input Number"),
       size: "small",
       disabled: props.readonly,
       hideButtons: true,
@@ -524,15 +612,15 @@ var numberRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/integer.tsx
-var import_react7 = __toESM(require("react"));
-var import_editor5 = require("@flowgram.ai/editor");
+var import_react8 = __toESM(require("react"));
+var import_editor6 = require("@flowgram.ai/editor");
 var import_semi_ui3 = require("@douyinfe/semi-ui");
 var integerRegistry = {
   type: "integer",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ import_react8.default.createElement(
     import_semi_ui3.InputNumber,
     {
-      placeholder: import_editor5.I18n.t("Please Input Integer"),
+      placeholder: import_editor6.I18n.t("Please Input Integer"),
       size: "small",
       disabled: props.readonly,
       precision: 0,
@@ -542,22 +630,22 @@ var integerRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/boolean.tsx
-var import_react8 = __toESM(require("react"));
-var import_editor6 = require("@flowgram.ai/editor");
+var import_react9 = __toESM(require("react"));
+var import_editor7 = require("@flowgram.ai/editor");
 var import_semi_ui4 = require("@douyinfe/semi-ui");
 var booleanRegistry = {
   type: "boolean",
   ConstantRenderer: (props) => {
     const { value, onChange, ...rest } = props;
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(
       import_semi_ui4.Select,
       {
-        placeholder: import_editor6.I18n.t("Please Select Boolean"),
+        placeholder: import_editor7.I18n.t("Please Select Boolean"),
         size: "small",
         disabled: props.readonly,
         optionList: [
-          { label: import_editor6.I18n.t("True"), value: 1 },
-          { label: import_editor6.I18n.t("False"), value: 0 }
+          { label: import_editor7.I18n.t("True"), value: 1 },
+          { label: import_editor7.I18n.t("False"), value: 0 }
         ],
         value: value ? 1 : 0,
         onChange: (value2) => onChange?.(!!value2),
@@ -568,17 +656,17 @@ var booleanRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/array.tsx
-var import_react9 = __toESM(require("react"));
-var import_editor7 = require("@flowgram.ai/editor");
+var import_react10 = __toESM(require("react"));
+var import_editor8 = require("@flowgram.ai/editor");
 var arrayRegistry = {
   type: "array",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react9.default.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ import_react10.default.createElement(
     CodeEditorMini,
     {
       value: props.value,
       languageId: "json",
       onChange: (v) => props.onChange?.(v),
-      placeholder: import_editor7.I18n.t("Please Input Array"),
+      placeholder: import_editor8.I18n.t("Please Input Array"),
       readonly: props.readonly
     }
   )
@@ -597,8 +685,8 @@ jsonSchemaTypePreset.forEach((_type) => import_json_schema.jsonSchemaTypeManager
 
 // src/plugins/json-schema-preset/create-type-preset-plugin.tsx
 var import_json_schema2 = require("@flowgram.ai/json-schema");
-var import_editor8 = require("@flowgram.ai/editor");
-var createTypePresetPlugin = (0, import_editor8.definePluginCreator)({
+var import_editor9 = require("@flowgram.ai/editor");
+var createTypePresetPlugin = (0, import_editor9.definePluginCreator)({
   onInit(ctx, opts) {
     const typeManager = ctx.get(import_json_schema2.BaseTypeManager);
     jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
@@ -613,15 +701,15 @@ var useTypeManager = () => (0, import_json_schema3.useTypeManager)();
 var JsonSchemaTypePresetProvider = ({
   types = [],
   children
-}) => /* @__PURE__ */ import_react10.default.createElement(import_json_schema3.TypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
+}) => /* @__PURE__ */ import_react11.default.createElement(import_json_schema3.TypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
 
 // src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts
-var import_editor9 = require("@flowgram.ai/editor");
-var createDisableDeclarationPlugin = (0, import_editor9.definePluginCreator)({
+var import_editor10 = require("@flowgram.ai/editor");
+var createDisableDeclarationPlugin = (0, import_editor10.definePluginCreator)({
   onInit(ctx) {
-    const variableEngine = ctx.get(import_editor9.VariableEngine);
+    const variableEngine = ctx.get(import_editor10.VariableEngine);
     const handleEvent = (action) => {
-      if (import_editor9.ASTMatch.isVariableDeclaration(action.ast)) {
+      if (import_editor10.ASTMatch.isVariableDeclaration(action.ast)) {
         if (!action.ast.meta?.disabled) {
           action.ast.updateMeta({
             ...action.ast.meta || {},
@@ -639,16 +727,16 @@ var createDisableDeclarationPlugin = (0, import_editor9.definePluginCreator)({
 function useVariableTree(params) {
   const { includeSchema, excludeSchema, customSkip } = params;
   const typeManager = useTypeManager();
-  const variables = (0, import_editor10.useAvailableVariables)();
-  const getVariableTypeIcon = (0, import_react11.useCallback)((variable) => {
+  const variables = (0, import_editor11.useAvailableVariables)();
+  const getVariableTypeIcon = (0, import_react12.useCallback)((variable) => {
     if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
-        return /* @__PURE__ */ import_react11.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
+        return /* @__PURE__ */ import_react12.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
       }
       return variable.meta.icon;
     }
     const schema = import_json_schema4.JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
-    return /* @__PURE__ */ import_react11.default.createElement(import_semi_ui5.Icon, { size: "small", svg: typeManager.getDisplayIcon(schema || {}) });
+    return /* @__PURE__ */ import_react12.default.createElement(import_semi_ui5.Icon, { size: "small", svg: typeManager.getDisplayIcon(schema || {}) });
   }, []);
   const renderVariable = (variable, parentFields = []) => {
     let type = variable?.type;
@@ -656,7 +744,7 @@ function useVariableTree(params) {
       return null;
     }
     let children;
-    if (import_editor10.ASTMatch.isObject(type)) {
+    if (import_editor11.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...parentFields, variable])).filter(Boolean);
     }
     const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
@@ -756,7 +844,7 @@ var VariableSelector = ({
   triggerRender
 }) => {
   const treeData = useVariableTree({ includeSchema, excludeSchema });
-  const treeValue = (0, import_react12.useMemo)(() => {
+  const treeValue = (0, import_react13.useMemo)(() => {
     if (typeof value === "string") {
       console.warn(
         "The Value of VariableSelector is a string, it should be an ARRAY. \n",
@@ -768,11 +856,11 @@ var VariableSelector = ({
   }, [value]);
   const renderIcon = (icon) => {
     if (typeof icon === "string") {
-      return /* @__PURE__ */ import_react12.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+      return /* @__PURE__ */ import_react13.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
     }
     return icon;
   };
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
     UITreeSelect,
     {
       dropdownMatchSelectWidth: false,
@@ -789,10 +877,10 @@ var VariableSelector = ({
       },
       renderSelectedItem: (_option) => {
         if (!_option?.keyPath) {
-          return /* @__PURE__ */ import_react12.default.createElement(
+          return /* @__PURE__ */ import_react13.default.createElement(
             UITag,
             {
-              prefixIcon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons.IconIssueStroked, null),
+              prefixIcon: /* @__PURE__ */ import_react13.default.createElement(import_semi_icons.IconIssueStroked, null),
               color: "amber",
               closable: !readonly,
               onClose: () => onChange(void 0)
@@ -801,13 +889,13 @@ var VariableSelector = ({
           );
         }
         const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
-        const rootTitle = /* @__PURE__ */ import_react12.default.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? "" : "-"} ` : null);
-        return /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement(
+        const rootTitle = /* @__PURE__ */ import_react13.default.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? "" : "-"} ` : null);
+        return /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(
           import_semi_ui7.Popover,
           {
-            content: /* @__PURE__ */ import_react12.default.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ import_react12.default.createElement(UIVarName, null, _option.keyPath.slice(1).join(".")))
+            content: /* @__PURE__ */ import_react13.default.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ import_react13.default.createElement(UIVarName, null, _option.keyPath.slice(1).join(".")))
           },
-          /* @__PURE__ */ import_react12.default.createElement(
+          /* @__PURE__ */ import_react13.default.createElement(
             UITag,
             {
               prefixIcon: rootIcon,
@@ -815,20 +903,22 @@ var VariableSelector = ({
               onClose: () => onChange(void 0)
             },
             rootTitle,
-            !_option.isRoot && /* @__PURE__ */ import_react12.default.createElement(UIVarName, { $inSelector: true }, _option.label)
+            !_option.isRoot && /* @__PURE__ */ import_react13.default.createElement(UIVarName, { $inSelector: true }, _option.label)
           )
         ));
       },
       showClear: false,
-      arrowIcon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons.IconChevronDownStroked, { size: "small" }),
+      arrowIcon: /* @__PURE__ */ import_react13.default.createElement(import_semi_icons.IconChevronDownStroked, { size: "small" }),
       triggerRender,
-      placeholder: config?.placeholder ?? import_editor11.I18n.t("Select Variable")
+      placeholder: config?.placeholder ?? import_editor12.I18n.t("Select Variable")
     }
   ));
 };
+VariableSelector.renderKey = "variable-selector-render-key";
+var InjectVariableSelector = createInjectMaterial(VariableSelector);
 
 // src/components/type-selector/index.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_semi_ui8 = require("@douyinfe/semi-ui");
 var labelStyle = { display: "flex", alignItems: "center", gap: 5 };
 var getTypeSelectValue = (value) => {
@@ -846,17 +936,17 @@ var parseTypeSelectValue = (value) => {
 };
 function TypeSelector(props) {
   const { value, onChange, readonly, disabled, style } = props;
-  const selectValue = (0, import_react13.useMemo)(() => getTypeSelectValue(value), [value]);
+  const selectValue = (0, import_react14.useMemo)(() => getTypeSelectValue(value), [value]);
   const typeManager = useTypeManager();
   const icon = typeManager.getDisplayIcon(value || {});
-  const options = (0, import_react13.useMemo)(
+  const options = (0, import_react14.useMemo)(
     () => typeManager.getTypeRegistriesWithParentType().map((_type) => {
       const isArray2 = _type.type === "array";
       return {
-        label: /* @__PURE__ */ import_react13.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react13.default.createElement(import_semi_ui8.Icon, { size: "small", svg: _type.icon }), typeManager.getTypeBySchema(_type)?.label || _type.type),
+        label: /* @__PURE__ */ import_react14.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.Icon, { size: "small", svg: _type.icon }), typeManager.getTypeBySchema(_type)?.label || _type.type),
         value: _type.type,
         children: isArray2 ? typeManager.getTypeRegistriesWithParentType("array").map((_type2) => ({
-          label: /* @__PURE__ */ import_react13.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react13.default.createElement(
+          label: /* @__PURE__ */ import_react14.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react14.default.createElement(
             import_semi_ui8.Icon,
             {
               size: "small",
@@ -872,12 +962,12 @@ function TypeSelector(props) {
     }),
     []
   );
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(
     import_semi_ui8.Cascader,
     {
       disabled: readonly || disabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ import_react13.default.createElement(import_semi_ui8.IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
+      triggerRender: () => /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -887,15 +977,17 @@ function TypeSelector(props) {
     }
   );
 }
+TypeSelector.renderKey = "type-selector-render-key";
+var InjectTypeSelector = createInjectMaterial(TypeSelector);
 
 // src/components/json-schema-editor/index.tsx
-var import_react19 = __toESM(require("react"));
-var import_editor12 = require("@flowgram.ai/editor");
-var import_semi_ui11 = require("@douyinfe/semi-ui");
-var import_semi_icons4 = require("@douyinfe/semi-icons");
+var import_react20 = __toESM(require("react"));
+var import_editor14 = require("@flowgram.ai/editor");
+var import_semi_ui10 = require("@douyinfe/semi-ui");
+var import_semi_icons3 = require("@douyinfe/semi-icons");
 
 // src/components/json-schema-editor/styles.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_semi_icons2 = __toESM(require("@douyinfe/semi-icons"));
 var UIContainer = import_styled_components3.default.div`
@@ -1023,7 +1115,7 @@ var UIRequired = import_styled_components3.default.div``;
 var UIActions = import_styled_components3.default.div`
   white-space: nowrap;
 `;
-var iconAddChildrenSvg = /* @__PURE__ */ import_react14.default.createElement(
+var iconAddChildrenSvg = /* @__PURE__ */ import_react15.default.createElement(
   "svg",
   {
     className: "icon-icon icon-icon-coz_add_node ",
@@ -1033,7 +1125,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ import_react14.default.createElement(
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react14.default.createElement(
+  /* @__PURE__ */ import_react15.default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1041,37 +1133,12 @@ var iconAddChildrenSvg = /* @__PURE__ */ import_react14.default.createElement(
       d: "M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
     }
   ),
-  /* @__PURE__ */ import_react14.default.createElement("path", { d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z" })
+  /* @__PURE__ */ import_react15.default.createElement("path", { d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z" })
 );
-var IconAddChildren = () => /* @__PURE__ */ import_react14.default.createElement(import_semi_icons2.default, { size: "small", svg: iconAddChildrenSvg });
+var IconAddChildren = () => /* @__PURE__ */ import_react15.default.createElement(import_semi_icons2.default, { size: "small", svg: iconAddChildrenSvg });
 var DefaultValueWrapper = import_styled_components3.default.div`
   margin: 0;
 `;
-var JSONViewerWrapper = import_styled_components3.default.div`
-  padding: 0 0 24px;
-  &:first-child {
-    margin-top: 0px;
-  }
-`;
-var JSONHeader = import_styled_components3.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--semi-color-fill-0);
-  border-radius: 6px 6px 0 0;
-  height: 36px;
-  padding: 0 8px 0 12px;
-`;
-var JSONHeaderLeft = import_styled_components3.default.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-var JSONHeaderRight = import_styled_components3.default.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
 var ConstantInputWrapper = import_styled_components3.default.div`
   flex-grow: 1;
 
@@ -1083,71 +1150,39 @@ var ConstantInputWrapper = import_styled_components3.default.div`
 `;
 
 // src/components/json-schema-editor/hooks.tsx
-var import_react15 = require("react");
-var import_lodash = require("lodash");
+var import_react16 = require("react");
+var import_lodash2 = require("lodash");
+var import_immer = require("immer");
+var import_json_schema5 = require("@flowgram.ai/json-schema");
 var _id = 0;
 function genId() {
   return _id++;
 }
-function getDrilldownSchema(value, path) {
-  if (!value) {
-    return {};
-  }
-  if (value.type === "array" && value.items) {
-    return getDrilldownSchema(value.items, [...path || [], "items"]);
-  }
-  return { schema: value, path };
-}
 function usePropertiesEdit(value, onChange) {
-  const drilldown = (0, import_react15.useMemo)(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
-  const isDrilldownObject = drilldown.schema?.type === "object";
-  const initPropertyList = (0, import_react15.useMemo)(
-    () => isDrilldownObject ? Object.entries(drilldown.schema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(
-      ([name, _value], index) => ({
-        key: genId(),
-        name,
-        isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-        ..._value,
-        extra: {
-          ..._value.extra || {},
-          index
-        }
-      })
-    ) : [],
-    [isDrilldownObject]
-  );
-  const [propertyList, setPropertyList] = (0, import_react15.useState)(initPropertyList);
-  const mountRef = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
-    if (mountRef.current) {
-      setPropertyList((_list) => {
-        const nameMap = /* @__PURE__ */ new Map();
-        for (const _property of _list) {
-          if (_property.name) {
-            nameMap.set(_property.name, _property);
-          }
-        }
-        return Object.entries(drilldown.schema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([name, _value]) => {
-          const _property = nameMap.get(name);
-          if (_property) {
-            return {
-              key: _property.key,
-              name,
-              isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-              ..._value
-            };
-          }
-          return {
-            key: genId(),
-            name,
-            isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-            ..._value
-          };
-        });
-      });
-    }
-    mountRef.current = true;
-  }, [drilldown.schema]);
+  const typeManager = (0, import_json_schema5.useTypeManager)();
+  const drilldownSchema = typeManager.getPropertiesParent(value || {});
+  const canAddField = typeManager.canAddField(value || {});
+  const [propertyList, setPropertyList] = (0, import_react16.useState)([]);
+  (0, import_react16.useEffect)(() => {
+    setPropertyList((_list) => {
+      const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key]) => key);
+      const oldNames = _list.map((item) => item.name).filter(Boolean);
+      const addNames = (0, import_lodash2.difference)(newNames, oldNames);
+      return _list.filter((item) => !item.name || newNames.includes(item.name)).map((item) => ({
+        key: item.key,
+        name: item.name,
+        isPropertyRequired: drilldownSchema?.required?.includes(item.name || "") || false,
+        ...item
+      })).concat(
+        addNames.map((_name) => ({
+          key: genId(),
+          name: _name,
+          isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+          ...drilldownSchema?.properties?.[_name] || {}
+        }))
+      );
+    });
+  }, [drilldownSchema]);
   const updatePropertyList = (updater) => {
     setPropertyList((_list) => {
       const next = updater(_list);
@@ -1157,23 +1192,26 @@ function usePropertiesEdit(value, onChange) {
         if (!_property.name) {
           continue;
         }
-        nextProperties[_property.name] = (0, import_lodash.omit)(_property, ["key", "name", "isPropertyRequired"]);
+        nextProperties[_property.name] = (0, import_lodash2.omit)(_property, ["key", "name", "isPropertyRequired"]);
         if (_property.isPropertyRequired) {
           nextRequired.push(_property.name);
         }
       }
-      let drilldownSchema = value || {};
-      if (drilldown.path) {
-        drilldownSchema = drilldown.path.reduce((acc, key) => acc[key], value || {});
-      }
-      drilldownSchema.properties = nextProperties;
-      drilldownSchema.required = nextRequired;
-      onChange?.(value || {});
+      onChange?.(
+        (0, import_immer.produce)(value || {}, (draft) => {
+          const propertiesParent = typeManager.getPropertiesParent(draft);
+          if (propertiesParent) {
+            propertiesParent.properties = nextProperties;
+            propertiesParent.required = nextRequired;
+            return;
+          }
+        })
+      );
       return next;
     });
   };
   const onAddProperty = () => {
-    updatePropertyList((_list) => [
+    setPropertyList((_list) => [
       ..._list,
       { key: genId(), name: "", type: "string", extra: { index: _list.length + 1 } }
     ]);
@@ -1186,14 +1224,14 @@ function usePropertiesEdit(value, onChange) {
       (_list) => _list.map((_property) => _property.key === key ? nextValue : _property)
     );
   };
-  (0, import_react15.useEffect)(() => {
-    if (!isDrilldownObject) {
+  (0, import_react16.useEffect)(() => {
+    if (!canAddField) {
       setPropertyList([]);
     }
-  }, [isDrilldownObject]);
+  }, [canAddField]);
   return {
     propertyList,
-    isDrilldownObject,
+    canAddField,
     onAddProperty,
     onRemoveProperty,
     onEditProperty
@@ -1201,36 +1239,16 @@ function usePropertiesEdit(value, onChange) {
 }
 
 // src/components/json-schema-editor/default-value.tsx
-var import_react17 = __toESM(require("react"));
-var import_semi_ui10 = require("@douyinfe/semi-ui");
-var import_semi_icons3 = require("@douyinfe/semi-icons");
-
-// src/components/json-schema-editor/utils.ts
-function getValueType(value) {
-  const type = typeof value;
-  if (type === "string") {
-    return "string";
-  } else if (type === "number") {
-    return Number.isInteger(value) ? "integer" : "number";
-  } else if (type === "boolean") {
-    return "boolean";
-  } else if (type === "object") {
-    if (value === null) {
-      return "other";
-    }
-    return Array.isArray(value) ? "array" : "object";
-  } else {
-    return "other";
-  }
-}
+var import_react18 = __toESM(require("react"));
+var import_editor13 = require("@flowgram.ai/editor");
 
 // src/components/constant-input/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_semi_ui9 = require("@douyinfe/semi-ui");
 function ConstantInput(props) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
   const typeManager = useTypeManager();
-  const Renderer2 = (0, import_react16.useMemo)(() => {
+  const Renderer2 = (0, import_react17.useMemo)(() => {
     const strategy = (strategies || []).find((_strategy) => _strategy.hit(schema));
     if (!strategy) {
       return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
@@ -1239,110 +1257,41 @@ function ConstantInput(props) {
   }, [strategies, schema]);
   if (!Renderer2) {
     if (fallbackRenderer) {
-      return import_react16.default.createElement(fallbackRenderer, {
+      return import_react17.default.createElement(fallbackRenderer, {
         value,
         onChange,
         readonly,
         ...rest
       });
     }
-    return /* @__PURE__ */ import_react16.default.createElement(import_semi_ui9.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
+    return /* @__PURE__ */ import_react17.default.createElement(import_semi_ui9.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ import_react16.default.createElement(Renderer2, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ import_react17.default.createElement(Renderer2, { value, onChange, readonly, ...rest });
 }
 
 // src/components/json-schema-editor/default-value.tsx
 function DefaultValue(props) {
-  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
-  const wrapperRef = (0, import_react17.useRef)(null);
-  const JsonViewerRef = (0, import_react17.useRef)(null);
-  const [internalJsonValue, setInternalJsonValue] = (0, import_react17.useState)(
-    getValueType(value) === "string" ? value : ""
-  );
-  const handleJsonChange = (0, import_react17.useCallback)((val) => {
-    if (val !== internalJsonValue) {
-      setInternalJsonValue(val);
-    }
-  }, []);
-  const handleEditComplete = (0, import_react17.useCallback)(() => {
-    onChange(internalJsonValue);
-    requestAnimationFrame(() => {
-      wrapperRef.current?.blur();
-    });
-    setJsonReadOnly(true);
-  }, [internalJsonValue, onChange]);
-  const [jsonReadOnly, setJsonReadOnly] = (0, import_react17.useState)(true);
-  const handleFormatJson = (0, import_react17.useCallback)(() => {
-    try {
-      const parsed = JSON.parse(internalJsonValue);
-      const formatted = JSON.stringify(parsed, null, 4);
-      setInternalJsonValue(formatted);
-      onChange(formatted);
-    } catch (error) {
-      console.error("Invalid JSON:", error);
-    }
-  }, [internalJsonValue, onChange]);
-  return type === "object" ? /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(JSONHeader, null, /* @__PURE__ */ import_react17.default.createElement(JSONHeaderLeft, null, "json"), /* @__PURE__ */ import_react17.default.createElement(JSONHeaderRight, null, /* @__PURE__ */ import_react17.default.createElement(import_semi_ui10.Tooltip, { content: jsonFormatText ?? "Format" }, /* @__PURE__ */ import_react17.default.createElement(
-    import_semi_ui10.IconButton,
-    {
-      icon: /* @__PURE__ */ import_react17.default.createElement(import_semi_icons3.IconBrackets, { style: { color: "var(--semi-color-primary)" } }),
-      size: "small",
-      type: "tertiary",
-      theme: "borderless",
-      onClick: handleFormatJson
-    }
-  )))), /* @__PURE__ */ import_react17.default.createElement(
-    JSONViewerWrapper,
-    {
-      ref: wrapperRef,
-      tabIndex: -1,
-      onBlur: (e) => {
-        if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget)) {
-          handleEditComplete();
-        }
-      },
-      onClick: (e) => {
-        setJsonReadOnly(false);
-      }
-    },
-    /* @__PURE__ */ import_react17.default.createElement(
-      import_semi_ui10.JsonViewer,
-      {
-        ref: JsonViewerRef,
-        value: getValueType(value) === "string" ? value : "",
-        height: 120,
-        width: "100%",
-        showSearch: false,
-        options: {
-          readOnly: jsonReadOnly,
-          formatOptions: { tabSize: 4, insertSpaces: true, eol: "\n" }
-        },
-        style: {
-          padding: 0
-        },
-        onChange: handleJsonChange
-      }
-    )
-  )) : /* @__PURE__ */ import_react17.default.createElement(ConstantInputWrapper, null, /* @__PURE__ */ import_react17.default.createElement(
+  const { value, schema, onChange, placeholder } = props;
+  return /* @__PURE__ */ import_react18.default.createElement(ConstantInputWrapper, null, /* @__PURE__ */ import_react18.default.createElement(
     ConstantInput,
     {
       value,
       onChange: (_v) => onChange(_v),
       schema: schema || { type: "string" },
-      placeholder: placeholder ?? "Default value if parameter is not provided"
+      placeholder: placeholder ?? import_editor13.I18n.t("Default value if parameter is not provided")
     }
   ));
 }
 
 // src/components/json-schema-editor/components/blur-input.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
 function BlurInput(props) {
-  const [value, setValue] = (0, import_react18.useState)("");
-  (0, import_react18.useEffect)(() => {
+  const [value, setValue] = (0, import_react19.useState)("");
+  (0, import_react19.useEffect)(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_input.default,
     {
       ...props,
@@ -1356,13 +1305,14 @@ function BlurInput(props) {
 }
 
 // src/components/json-schema-editor/index.tsx
+var DEFAULT = { type: "object" };
 function JsonSchemaEditor(props) {
-  const { value = { type: "object" }, config = {}, onChange: onChangeProps, readonly } = props;
+  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
   );
-  return /* @__PURE__ */ import_react19.default.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ import_react19.default.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ import_react20.default.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ import_react20.default.createElement(
     PropertyEdit,
     {
       readonly,
@@ -1377,16 +1327,16 @@ function JsonSchemaEditor(props) {
         onRemoveProperty(_property.key);
       }
     }
-  ))), /* @__PURE__ */ import_react19.default.createElement(
-    import_semi_ui11.Button,
+  ))), /* @__PURE__ */ import_react20.default.createElement(
+    import_semi_ui10.Button,
     {
       disabled: readonly,
       size: "small",
       style: { marginTop: 10, marginLeft: 16 },
-      icon: /* @__PURE__ */ import_react19.default.createElement(import_semi_icons4.IconPlus, null),
+      icon: /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconPlus, null),
       onClick: onAddProperty
     },
-    config?.addButtonText ?? "Add"
+    config?.addButtonText ?? import_editor14.I18n.t("Add")
   ));
 }
 function PropertyEdit(props) {
@@ -1404,19 +1354,19 @@ function PropertyEdit(props) {
     $parentType = "",
     $showLine
   } = props;
-  const [expand, setExpand] = (0, import_react19.useState)(false);
-  const [collapse, setCollapse] = (0, import_react19.useState)(false);
+  const [expand, setExpand] = (0, import_react20.useState)(false);
+  const [collapse, setCollapse] = (0, import_react20.useState)(false);
   const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
-  const typeSelectorValue = (0, import_react19.useMemo)(() => ({ type, items }), [type, items]);
-  const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
+  const typeSelectorValue = (0, import_react20.useMemo)(() => ({ type, items }), [type, items]);
+  const { propertyList, canAddField, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
   const onChange = (key, _value) => {
     onChangeProps?.({
       ...value || {},
       [key]: _value
     });
   };
-  const showCollapse = isDrilldownObject && propertyList.length > 0;
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+  const showCollapse = canAddField && propertyList.length > 0;
+  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
     UIPropertyLeft,
     {
       type,
@@ -1428,8 +1378,8 @@ function PropertyEdit(props) {
       $parentExpand,
       $parentType
     },
-    showCollapse && /* @__PURE__ */ import_react19.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react19.default.createElement(import_semi_icons4.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react19.default.createElement(import_semi_icons4.IconChevronRight, { size: "small" }))
-  ), /* @__PURE__ */ import_react19.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react19.default.createElement(
+    showCollapse && /* @__PURE__ */ import_react20.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconChevronRight, { size: "small" }))
+  ), /* @__PURE__ */ import_react20.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react20.default.createElement(
     UIPropertyMain,
     {
       $showCollapse: showCollapse,
@@ -1437,7 +1387,7 @@ function PropertyEdit(props) {
       $expand: expand,
       type
     },
-    /* @__PURE__ */ import_react19.default.createElement(UIRow, null, /* @__PURE__ */ import_react19.default.createElement(UIName, null, /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(UIRow, null, /* @__PURE__ */ import_react20.default.createElement(UIName, null, /* @__PURE__ */ import_react20.default.createElement(
       BlurInput,
       {
         disabled: readonly,
@@ -1446,8 +1396,8 @@ function PropertyEdit(props) {
         value: name,
         onChange: (value2) => onChange("name", value2)
       }
-    )), /* @__PURE__ */ import_react19.default.createElement(UIType, null, /* @__PURE__ */ import_react19.default.createElement(
-      TypeSelector,
+    )), /* @__PURE__ */ import_react20.default.createElement(UIType, null, /* @__PURE__ */ import_react20.default.createElement(
+      InjectTypeSelector,
       {
         value: typeSelectorValue,
         readonly,
@@ -1458,67 +1408,67 @@ function PropertyEdit(props) {
           });
         }
       }
-    )), /* @__PURE__ */ import_react19.default.createElement(UIRequired, null, /* @__PURE__ */ import_react19.default.createElement(
-      import_semi_ui11.Checkbox,
+    )), /* @__PURE__ */ import_react20.default.createElement(UIRequired, null, /* @__PURE__ */ import_react20.default.createElement(
+      import_semi_ui10.Checkbox,
       {
         disabled: readonly,
         checked: isPropertyRequired,
         onChange: (e) => onChange("isPropertyRequired", e.target.checked)
       }
-    )), /* @__PURE__ */ import_react19.default.createElement(UIActions, null, /* @__PURE__ */ import_react19.default.createElement(
-      import_semi_ui11.IconButton,
+    )), /* @__PURE__ */ import_react20.default.createElement(UIActions, null, /* @__PURE__ */ import_react20.default.createElement(
+      import_semi_ui10.IconButton,
       {
         disabled: readonly,
         size: "small",
         theme: "borderless",
-        icon: expand ? /* @__PURE__ */ import_react19.default.createElement(import_semi_icons4.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react19.default.createElement(import_semi_icons4.IconExpand, { size: "small" }),
+        icon: expand ? /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconExpand, { size: "small" }),
         onClick: () => {
           setExpand((_expand) => !_expand);
         }
       }
-    ), isDrilldownObject && /* @__PURE__ */ import_react19.default.createElement(
-      import_semi_ui11.IconButton,
+    ), canAddField && /* @__PURE__ */ import_react20.default.createElement(
+      import_semi_ui10.IconButton,
       {
         disabled: readonly,
         size: "small",
         theme: "borderless",
-        icon: /* @__PURE__ */ import_react19.default.createElement(IconAddChildren, null),
+        icon: /* @__PURE__ */ import_react20.default.createElement(IconAddChildren, null),
         onClick: () => {
           onAddProperty();
           setCollapse(true);
         }
       }
-    ), /* @__PURE__ */ import_react19.default.createElement(
-      import_semi_ui11.IconButton,
+    ), /* @__PURE__ */ import_react20.default.createElement(
+      import_semi_ui10.IconButton,
       {
         disabled: readonly,
         size: "small",
         theme: "borderless",
-        icon: /* @__PURE__ */ import_react19.default.createElement(import_semi_icons4.IconMinus, { size: "small" }),
+        icon: /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconMinus, { size: "small" }),
         onClick: onRemove
       }
     ))),
-    expand && /* @__PURE__ */ import_react19.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react19.default.createElement(UILabel, null, config?.descTitle ?? import_editor12.I18n.t("Description")), /* @__PURE__ */ import_react19.default.createElement(
+    expand && /* @__PURE__ */ import_react20.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react20.default.createElement(UILabel, null, config?.descTitle ?? import_editor14.I18n.t("Description")), /* @__PURE__ */ import_react20.default.createElement(
       BlurInput,
       {
         disabled: readonly,
         size: "small",
         value: description,
         onChange: (value2) => onChange("description", value2),
-        placeholder: config?.descPlaceholder ?? import_editor12.I18n.t("Help LLM to understand the property")
+        placeholder: config?.descPlaceholder ?? import_editor14.I18n.t("Help LLM to understand the property")
       }
-    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? import_editor12.I18n.t("Default Value")), /* @__PURE__ */ import_react19.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react19.default.createElement(
+    ), $level === 0 && /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? import_editor14.I18n.t("Default Value")), /* @__PURE__ */ import_react20.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react20.default.createElement(
       DefaultValue,
       {
         value: defaultValue,
         schema: value,
         type,
-        placeholder: config?.defaultValuePlaceholder ?? import_editor12.I18n.t("Default Value"),
+        placeholder: config?.defaultValuePlaceholder ?? import_editor14.I18n.t("Default Value"),
         jsonFormatText: config?.jsonFormatText,
         onChange: (value2) => onChange("default", value2)
       }
     ))))
-  ), showCollapse && /* @__PURE__ */ import_react19.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react19.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react19.default.createElement(
+  ), showCollapse && /* @__PURE__ */ import_react20.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react20.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react20.default.createElement(
     PropertyEdit,
     {
       readonly,
@@ -1543,21 +1493,21 @@ function PropertyEdit(props) {
 }
 
 // src/components/batch-variable-selector/index.tsx
-var import_react20 = __toESM(require("react"));
-var import_editor13 = require("@flowgram.ai/editor");
+var import_react21 = __toESM(require("react"));
+var import_editor15 = require("@flowgram.ai/editor");
 var batchVariableSchema = {
   type: "array",
   extra: { weak: true }
 };
 function BatchVariableSelector(props) {
-  return /* @__PURE__ */ import_react20.default.createElement(import_editor13.PrivateScopeProvider, null, /* @__PURE__ */ import_react20.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+  return /* @__PURE__ */ import_react21.default.createElement(import_editor15.PrivateScopeProvider, null, /* @__PURE__ */ import_react21.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/dynamic-value-input/index.tsx
-var import_react22 = __toESM(require("react"));
-var import_json_schema5 = require("@flowgram.ai/json-schema");
-var import_semi_ui12 = require("@douyinfe/semi-ui");
-var import_semi_icons5 = require("@douyinfe/semi-icons");
+var import_react23 = __toESM(require("react"));
+var import_json_schema6 = require("@flowgram.ai/json-schema");
+var import_semi_ui11 = require("@douyinfe/semi-ui");
+var import_semi_icons4 = require("@douyinfe/semi-icons");
 
 // src/components/dynamic-value-input/styles.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
@@ -1605,11 +1555,11 @@ var UITrigger = import_styled_components4.default.div`
 `;
 
 // src/components/dynamic-value-input/hooks.ts
-var import_react21 = require("react");
-var import_editor14 = require("@flowgram.ai/editor");
+var import_react22 = require("react");
+var import_editor16 = require("@flowgram.ai/editor");
 function useRefVariable(value) {
-  const available = (0, import_editor14.useScopeAvailable)();
-  const refVariable = (0, import_react21.useMemo)(() => {
+  const available = (0, import_editor16.useScopeAvailable)();
+  const refVariable = (0, import_react22.useMemo)(() => {
     if (value?.type === "ref") {
       return available.getByKeyPath(value.content);
     }
@@ -1621,11 +1571,11 @@ function useSelectSchema(schemaFromProps, constantProps, value) {
   if (value?.type === "constant") {
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
-  const [selectSchema, setSelectSchema] = (0, import_react21.useState)(defaultSelectSchema);
+  const [selectSchema, setSelectSchema] = (0, import_react22.useState)(defaultSelectSchema);
   return [selectSchema, setSelectSchema];
 }
 function useIncludeSchema(schemaFromProps) {
-  const includeSchema = (0, import_react21.useMemo)(() => {
+  const includeSchema = (0, import_react22.useMemo)(() => {
     if (!schemaFromProps) {
       return;
     }
@@ -1651,13 +1601,13 @@ function DynamicValueInput({
   const includeSchema = useIncludeSchema(schemaFromProps);
   const renderTypeSelector = () => {
     if (schemaFromProps) {
-      return /* @__PURE__ */ import_react22.default.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
+      return /* @__PURE__ */ import_react23.default.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
     }
     if (value?.type === "ref") {
-      const schema = refVariable?.type ? import_json_schema5.JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
-      return /* @__PURE__ */ import_react22.default.createElement(TypeSelector, { value: schema, readonly: true });
+      const schema = refVariable?.type ? import_json_schema6.JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
+      return /* @__PURE__ */ import_react23.default.createElement(TypeSelector, { value: schema, readonly: true });
     }
-    return /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react23.default.createElement(
       TypeSelector,
       {
         value: selectSchema,
@@ -1685,8 +1635,8 @@ function DynamicValueInput({
   };
   const renderMain = () => {
     if (value?.type === "ref") {
-      return /* @__PURE__ */ import_react22.default.createElement(
-        VariableSelector,
+      return /* @__PURE__ */ import_react23.default.createElement(
+        InjectVariableSelector,
         {
           style: { width: "100%" },
           value: value?.content,
@@ -1697,7 +1647,7 @@ function DynamicValueInput({
       );
     }
     const constantSchema = schemaFromProps || selectSchema || { type: "string" };
-    return /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react23.default.createElement(
       ConstantInput,
       {
         value: value?.content,
@@ -1705,8 +1655,8 @@ function DynamicValueInput({
         schema: constantSchema || { type: "string" },
         readonly,
         strategies: [...constantProps?.strategies || []],
-        fallbackRenderer: () => /* @__PURE__ */ import_react22.default.createElement(
-          VariableSelector,
+        fallbackRenderer: () => /* @__PURE__ */ import_react23.default.createElement(
+          InjectVariableSelector,
           {
             style: { width: "100%" },
             onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
@@ -1718,24 +1668,26 @@ function DynamicValueInput({
       }
     );
   };
-  const renderTrigger = () => /* @__PURE__ */ import_react22.default.createElement(
-    VariableSelector,
+  const renderTrigger = () => /* @__PURE__ */ import_react23.default.createElement(
+    InjectVariableSelector,
     {
       style: { width: "100%" },
       value: value?.type === "ref" ? value?.content : void 0,
       onChange: (_v) => onChange({ type: "ref", content: _v }),
       includeSchema,
       readonly,
-      triggerRender: () => /* @__PURE__ */ import_react22.default.createElement(import_semi_ui12.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react22.default.createElement(import_semi_icons5.IconSetting, { size: "small" }) })
+      triggerRender: () => /* @__PURE__ */ import_react23.default.createElement(import_semi_ui11.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react23.default.createElement(import_semi_icons4.IconSetting, { size: "small" }) })
     }
   );
-  return /* @__PURE__ */ import_react22.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react22.default.createElement(UIType2, null, renderTypeSelector()), /* @__PURE__ */ import_react22.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react22.default.createElement(UITrigger, null, renderTrigger()));
+  return /* @__PURE__ */ import_react23.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react23.default.createElement(UIType2, null, renderTypeSelector()), /* @__PURE__ */ import_react23.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react23.default.createElement(UITrigger, null, renderTrigger()));
 }
+DynamicValueInput.renderKey = "dynamic-value-input-render-key";
+var InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);
 
 // src/components/condition-row/index.tsx
-var import_react25 = __toESM(require("react"));
-var import_editor17 = require("@flowgram.ai/editor");
-var import_semi_ui14 = require("@douyinfe/semi-ui");
+var import_react26 = __toESM(require("react"));
+var import_editor19 = require("@flowgram.ai/editor");
+var import_semi_ui13 = require("@douyinfe/semi-ui");
 
 // src/components/condition-row/styles.tsx
 var import_styled_components5 = __toESM(require("styled-components"));
@@ -1760,9 +1712,9 @@ var UIValues = import_styled_components5.default.div`
 `;
 
 // src/components/condition-row/hooks/useRule.ts
-var import_react23 = require("react");
-var import_json_schema6 = require("@flowgram.ai/json-schema");
-var import_editor15 = require("@flowgram.ai/editor");
+var import_react24 = require("react");
+var import_json_schema7 = require("@flowgram.ai/json-schema");
+var import_editor17 = require("@flowgram.ai/editor");
 
 // src/components/condition-row/constants.ts
 var defaultRules = {
@@ -1886,38 +1838,38 @@ var defaultOpConfigs = {
 
 // src/components/condition-row/hooks/useRule.ts
 function useRule(left, userRules) {
-  const available = (0, import_editor15.useScopeAvailable)();
-  const rules = (0, import_react23.useMemo)(() => ({ ...defaultRules, ...userRules || {} }), [userRules]);
-  const variable = (0, import_react23.useMemo)(() => {
+  const available = (0, import_editor17.useScopeAvailable)();
+  const rules = (0, import_react24.useMemo)(() => ({ ...defaultRules, ...userRules || {} }), [userRules]);
+  const variable = (0, import_react24.useMemo)(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
   }, [available, left]);
-  const rule = (0, import_react23.useMemo)(() => {
+  const rule = (0, import_react24.useMemo)(() => {
     if (!variable) return void 0;
-    const schema = import_json_schema6.JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+    const schema = import_json_schema7.JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
   }, [variable?.type, rules]);
   return { rule };
 }
 
 // src/components/condition-row/hooks/useOp.tsx
-var import_react24 = __toESM(require("react"));
-var import_editor16 = require("@flowgram.ai/editor");
-var import_semi_ui13 = require("@douyinfe/semi-ui");
-var import_semi_icons6 = require("@douyinfe/semi-icons");
+var import_react25 = __toESM(require("react"));
+var import_editor18 = require("@flowgram.ai/editor");
+var import_semi_ui12 = require("@douyinfe/semi-ui");
+var import_semi_icons5 = require("@douyinfe/semi-icons");
 function useOp({ rule, op, onChange, readonly, userOps }) {
-  const options = (0, import_react24.useMemo)(
+  const options = (0, import_react25.useMemo)(
     () => Object.keys(rule || {}).map((_op) => ({
       ...defaultOpConfigs[_op] || {},
       ...userOps?.[_op] || {},
       value: _op,
-      label: import_editor16.I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
+      label: import_editor18.I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
     })),
     [rule, userOps]
   );
-  const opConfig = (0, import_react24.useMemo)(() => defaultOpConfigs[op], [op]);
-  const renderOpSelect = () => /* @__PURE__ */ import_react24.default.createElement(
-    import_semi_ui13.Select,
+  const opConfig = (0, import_react25.useMemo)(() => defaultOpConfigs[op], [op]);
+  const renderOpSelect = () => /* @__PURE__ */ import_react25.default.createElement(
+    import_semi_ui12.Select,
     {
       style: { height: 22 },
       disabled: readonly,
@@ -1927,7 +1879,7 @@ function useOp({ rule, op, onChange, readonly, userOps }) {
       onChange: (v) => {
         onChange(v);
       },
-      triggerRender: ({ value }) => /* @__PURE__ */ import_react24.default.createElement(import_semi_ui13.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react24.default.createElement(import_semi_icons6.IconChevronDownStroked, { size: "small" }))
+      triggerRender: ({ value }) => /* @__PURE__ */ import_react25.default.createElement(import_semi_ui12.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react25.default.createElement(import_semi_icons5.IconChevronDownStroked, { size: "small" }))
     }
   );
   return { renderOpSelect, opConfig };
@@ -1954,12 +1906,12 @@ function ConditionRow({
     readonly,
     userOps: ruleConfig.ops
   });
-  const targetSchema = (0, import_react25.useMemo)(() => {
+  const targetSchema = (0, import_react26.useMemo)(() => {
     const targetType = rule?.[operator || ""] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
-  return /* @__PURE__ */ import_react25.default.createElement(UIContainer3, { style }, /* @__PURE__ */ import_react25.default.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ import_react25.default.createElement(UIValues, null, /* @__PURE__ */ import_react25.default.createElement(UILeft, null, /* @__PURE__ */ import_react25.default.createElement(
-    VariableSelector,
+  return /* @__PURE__ */ import_react26.default.createElement(UIContainer3, { style }, /* @__PURE__ */ import_react26.default.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ import_react26.default.createElement(UIValues, null, /* @__PURE__ */ import_react26.default.createElement(UILeft, null, /* @__PURE__ */ import_react26.default.createElement(
+    InjectVariableSelector,
     {
       readonly,
       style: { width: "100%" },
@@ -1972,34 +1924,34 @@ function ConditionRow({
         }
       })
     }
-  )), /* @__PURE__ */ import_react25.default.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ import_react25.default.createElement(
-    DynamicValueInput,
+  )), /* @__PURE__ */ import_react26.default.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ import_react26.default.createElement(
+    InjectDynamicValueInput,
     {
       readonly: readonly || !rule,
       value: right,
       schema: targetSchema,
       onChange: (v) => onChange({ ...value, right: v })
     }
-  ) : /* @__PURE__ */ import_react25.default.createElement(
-    import_semi_ui14.Input,
+  ) : /* @__PURE__ */ import_react26.default.createElement(
+    import_semi_ui13.Input,
     {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: opConfig?.rightDisplay || import_editor17.I18n.t("Empty")
+      value: opConfig?.rightDisplay || import_editor19.I18n.t("Empty")
     }
   ))));
 }
 
 // src/components/batch-outputs/index.tsx
-var import_react27 = __toESM(require("react"));
-var import_semi_ui15 = require("@douyinfe/semi-ui");
-var import_semi_icons7 = require("@douyinfe/semi-icons");
+var import_react28 = __toESM(require("react"));
+var import_semi_ui14 = require("@douyinfe/semi-ui");
+var import_semi_icons6 = require("@douyinfe/semi-icons");
 
 // src/hooks/use-object-list/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_nanoid = require("nanoid");
-var import_lodash2 = require("lodash");
+var import_lodash3 = require("lodash");
 function genId2() {
   return (0, import_nanoid.nanoid)();
 }
@@ -2008,12 +1960,12 @@ function useObjectList({
   onChange,
   sortIndexKey
 }) {
-  const [list, setList] = (0, import_react26.useState)([]);
-  (0, import_react26.useEffect)(() => {
+  const [list, setList] = (0, import_react27.useState)([]);
+  (0, import_react27.useEffect)(() => {
     setList((_prevList) => {
-      const newKeys = Object.entries(value || {}).sort((a, b) => (0, import_lodash2.get)(a[1], sortIndexKey || 0) - (0, import_lodash2.get)(b[1], sortIndexKey || 0)).map(([key]) => key);
+      const newKeys = Object.entries(value || {}).sort((a, b) => (0, import_lodash3.get)(a[1], sortIndexKey || 0) - (0, import_lodash3.get)(b[1], sortIndexKey || 0)).map(([key]) => key);
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean);
-      const addKeys = (0, import_lodash2.difference)(newKeys, oldKeys);
+      const addKeys = (0, import_lodash3.difference)(newKeys, oldKeys);
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
         id: item.id,
         key: item.key,
@@ -2049,8 +2001,8 @@ function useObjectList({
       onChange(
         Object.fromEntries(
           nextList.filter((item) => item.key).map((item) => [item.key, item.value]).map((_res, idx) => {
-            if ((0, import_lodash2.isObject)(_res[1]) && sortIndexKey) {
-              (0, import_lodash2.set)(_res[1], sortIndexKey, idx);
+            if ((0, import_lodash3.isObject)(_res[1]) && sortIndexKey) {
+              (0, import_lodash3.set)(_res[1], sortIndexKey, idx);
             }
             return _res;
           })
@@ -2110,8 +2062,8 @@ var UIRow2 = import_styled_components6.default.div`
 function BatchOutputs(props) {
   const { readonly, style } = props;
   const { list, add, updateKey, updateValue, remove } = useObjectList(props);
-  return /* @__PURE__ */ import_react27.default.createElement("div", null, /* @__PURE__ */ import_react27.default.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ import_react27.default.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ import_react27.default.createElement(
-    import_semi_ui15.Input,
+  return /* @__PURE__ */ import_react28.default.createElement("div", null, /* @__PURE__ */ import_react28.default.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ import_react28.default.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ import_react28.default.createElement(
+    import_semi_ui14.Input,
     {
       style: { width: 100 },
       disabled: readonly,
@@ -2119,28 +2071,28 @@ function BatchOutputs(props) {
       value: item.key,
       onChange: (v) => updateKey(item.id, v)
     }
-  ), /* @__PURE__ */ import_react27.default.createElement(
-    VariableSelector,
+  ), /* @__PURE__ */ import_react28.default.createElement(
+    InjectVariableSelector,
     {
       style: { flexGrow: 1 },
       readonly,
       value: item.value?.content,
       onChange: (v) => updateValue(item.id, { type: "ref", content: v })
     }
-  ), /* @__PURE__ */ import_react27.default.createElement(
-    import_semi_ui15.Button,
+  ), /* @__PURE__ */ import_react28.default.createElement(
+    import_semi_ui14.Button,
     {
       disabled: readonly,
-      icon: /* @__PURE__ */ import_react27.default.createElement(import_semi_icons7.IconDelete, null),
+      icon: /* @__PURE__ */ import_react28.default.createElement(import_semi_icons6.IconDelete, null),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react27.default.createElement(import_semi_ui15.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react27.default.createElement(import_semi_icons7.IconPlus, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ import_react28.default.createElement(import_semi_ui14.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react28.default.createElement(import_semi_icons6.IconPlus, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/components/prompt-editor/index.tsx
-var import_react34 = __toESM(require("react"));
-var import_react35 = require("@coze-editor/editor/react");
+var import_react35 = __toESM(require("react"));
+var import_react36 = require("@coze-editor/editor/react");
 var import_preset_prompt2 = __toESM(require("@coze-editor/editor/preset-prompt"));
 
 // src/components/prompt-editor/styles.tsx
@@ -2156,15 +2108,15 @@ var UIContainer4 = import_styled_components7.default.div`
 `;
 
 // src/components/prompt-editor/extensions/markdown.tsx
-var import_react28 = require("react");
-var import_react29 = require("@coze-editor/editor/react");
-var import_editor18 = require("@coze-editor/editor");
+var import_react29 = require("react");
+var import_react30 = require("@coze-editor/editor/react");
+var import_editor20 = require("@coze-editor/editor");
 var import_view2 = require("@codemirror/view");
 function MarkdownHighlight() {
-  const injector = (0, import_react29.useInjector)();
-  (0, import_react28.useLayoutEffect)(
+  const injector = (0, import_react30.useInjector)();
+  (0, import_react29.useLayoutEffect)(
     () => injector.inject([
-      import_editor18.astDecorator.whole.of((cursor) => {
+      import_editor20.astDecorator.whole.of((cursor) => {
         if (cursor.name.startsWith("ATXHeading")) {
           return {
             type: "className",
@@ -2213,26 +2165,26 @@ function MarkdownHighlight() {
 var markdown_default = MarkdownHighlight;
 
 // src/components/prompt-editor/extensions/language-support.tsx
-var import_react30 = require("react");
-var import_react31 = require("@coze-editor/editor/react");
+var import_react31 = require("react");
+var import_react32 = require("@coze-editor/editor/react");
 var import_preset_prompt = require("@coze-editor/editor/preset-prompt");
 function LanguageSupport() {
-  const injector = (0, import_react31.useInjector)();
-  (0, import_react30.useLayoutEffect)(() => injector.inject([import_preset_prompt.languageSupport]), [injector]);
+  const injector = (0, import_react32.useInjector)();
+  (0, import_react31.useLayoutEffect)(() => injector.inject([import_preset_prompt.languageSupport]), [injector]);
   return null;
 }
 var language_support_default = LanguageSupport;
 
 // src/components/prompt-editor/extensions/jinja.tsx
-var import_react32 = require("react");
-var import_react33 = require("@coze-editor/editor/react");
-var import_editor19 = require("@coze-editor/editor");
+var import_react33 = require("react");
+var import_react34 = require("@coze-editor/editor/react");
+var import_editor21 = require("@coze-editor/editor");
 var import_view3 = require("@codemirror/view");
 function JinjaHighlight() {
-  const injector = (0, import_react33.useInjector)();
-  (0, import_react32.useLayoutEffect)(
+  const injector = (0, import_react34.useInjector)();
+  (0, import_react33.useLayoutEffect)(
     () => injector.inject([
-      import_editor19.astDecorator.whole.of((cursor) => {
+      import_editor21.astDecorator.whole.of((cursor) => {
         if (cursor.name === "JinjaStatementStart" || cursor.name === "JinjaStatementEnd") {
           return {
             type: "className",
@@ -2283,14 +2235,14 @@ function PromptEditor(props) {
     children,
     disableMarkdownHighlight
   } = props || {};
-  const editorRef = (0, import_react34.useRef)(null);
-  (0, import_react34.useEffect)(() => {
+  const editorRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
     if (editorRef.current?.getValue() !== value?.content) {
       editorRef.current?.setValue(String(value?.content || ""));
     }
   }, [value]);
-  return /* @__PURE__ */ import_react34.default.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ import_react34.default.createElement(import_react35.EditorProvider, null, /* @__PURE__ */ import_react34.default.createElement(
-    import_react35.Renderer,
+  return /* @__PURE__ */ import_react35.default.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ import_react35.default.createElement(import_react36.EditorProvider, null, /* @__PURE__ */ import_react35.default.createElement(
+    import_react36.Renderer,
     {
       didMount: (editor) => {
         editorRef.current = editor;
@@ -2306,23 +2258,23 @@ function PromptEditor(props) {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), activeLinePlaceholder && /* @__PURE__ */ import_react34.default.createElement(import_react35.ActiveLinePlaceholder, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ import_react34.default.createElement(markdown_default, null), /* @__PURE__ */ import_react34.default.createElement(language_support_default, null), /* @__PURE__ */ import_react34.default.createElement(jinja_default, null), children));
+  ), activeLinePlaceholder && /* @__PURE__ */ import_react35.default.createElement(import_react36.ActiveLinePlaceholder, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ import_react35.default.createElement(markdown_default, null), /* @__PURE__ */ import_react35.default.createElement(language_support_default, null), /* @__PURE__ */ import_react35.default.createElement(jinja_default, null), children));
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
-var import_react36 = __toESM(require("react"));
-var import_semi_ui16 = require("@douyinfe/semi-ui");
-var import_react37 = require("@coze-editor/editor/react");
+var import_react37 = __toESM(require("react"));
+var import_semi_ui15 = require("@douyinfe/semi-ui");
+var import_react38 = require("@coze-editor/editor/react");
 function VariableTree() {
-  const [posKey, setPosKey] = (0, import_react36.useState)("");
-  const [visible, setVisible] = (0, import_react36.useState)(false);
-  const [position, setPosition] = (0, import_react36.useState)(-1);
-  const editor = (0, import_react37.useEditor)();
+  const [posKey, setPosKey] = (0, import_react37.useState)("");
+  const [visible, setVisible] = (0, import_react37.useState)(false);
+  const [position, setPosition] = (0, import_react37.useState)(-1);
+  const editor = (0, import_react38.useEditor)();
   function insert(variablePath) {
-    const range = (0, import_react37.getCurrentMentionReplaceRange)(editor.$view.state);
+    const range = (0, import_react38.getCurrentMentionReplaceRange)(editor.$view.state);
     if (!range) {
       return;
     }
@@ -2336,21 +2288,21 @@ function VariableTree() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!editor) {
       return;
     }
   }, [editor, visible]);
   const treeData = useVariableTree({});
-  return /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(import_react37.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react36.default.createElement(
-    import_semi_ui16.Popover,
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(import_react38.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react37.default.createElement(
+    import_semi_ui15.Popover,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
-      content: /* @__PURE__ */ import_react36.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react36.default.createElement(
-        import_semi_ui16.Tree,
+      content: /* @__PURE__ */ import_react37.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react37.default.createElement(
+        import_semi_ui15.Tree,
         {
           treeData,
           onSelect: (v) => {
@@ -2359,8 +2311,8 @@ function VariableTree() {
         }
       ))
     },
-    /* @__PURE__ */ import_react36.default.createElement(
-      import_react37.PositionMirror,
+    /* @__PURE__ */ import_react37.default.createElement(
+      import_react38.PositionMirror,
       {
         position,
         onChange: () => setPosKey(String(Math.random()))
@@ -2371,17 +2323,17 @@ function VariableTree() {
 
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
 var import_react_dom = __toESM(require("react-dom"));
-var import_react38 = __toESM(require("react"));
-var import_lodash3 = require("lodash");
-var import_editor20 = require("@flowgram.ai/editor");
-var import_semi_ui18 = require("@douyinfe/semi-ui");
-var import_semi_icons8 = require("@douyinfe/semi-icons");
-var import_react39 = require("@coze-editor/editor/react");
+var import_react39 = __toESM(require("react"));
+var import_lodash4 = require("lodash");
+var import_editor22 = require("@flowgram.ai/editor");
+var import_semi_ui17 = require("@douyinfe/semi-ui");
+var import_semi_icons7 = require("@douyinfe/semi-icons");
+var import_react40 = require("@coze-editor/editor/react");
 var import_view4 = require("@codemirror/view");
 
 // src/components/prompt-editor-with-variables/styles.tsx
 var import_styled_components8 = __toESM(require("styled-components"));
-var import_semi_ui17 = require("@douyinfe/semi-ui");
+var import_semi_ui16 = require("@douyinfe/semi-ui");
 var UIRootTitle2 = import_styled_components8.default.div`
   margin-right: 4px;
   min-width: 20px;
@@ -2395,7 +2347,7 @@ var UIVarName2 = import_styled_components8.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var UITag2 = (0, import_styled_components8.default)(import_semi_ui17.Tag)`
+var UITag2 = (0, import_styled_components8.default)(import_semi_ui16.Tag)`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -2420,10 +2372,10 @@ var UIPopoverContent2 = import_styled_components8.default.div`
 var VariableTagWidget = class extends import_view4.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor20.DisposableCollection();
+    this.toDispose = new import_editor22.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
-        return /* @__PURE__ */ import_react38.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+        return /* @__PURE__ */ import_react39.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
       }
       return icon;
     };
@@ -2436,21 +2388,21 @@ var VariableTagWidget = class extends import_view4.WidgetType {
   renderVariable(v) {
     if (!v) {
       this.renderReact(
-        /* @__PURE__ */ import_react38.default.createElement(UITag2, { prefixIcon: /* @__PURE__ */ import_react38.default.createElement(import_semi_icons8.IconIssueStroked, null), color: "amber" }, "Unknown")
+        /* @__PURE__ */ import_react39.default.createElement(UITag2, { prefixIcon: /* @__PURE__ */ import_react39.default.createElement(import_semi_icons7.IconIssueStroked, null), color: "amber" }, "Unknown")
       );
       return;
     }
-    const rootField = (0, import_lodash3.last)(v.parentFields) || v;
+    const rootField = (0, import_lodash4.last)(v.parentFields) || v;
     const isRoot = v.parentFields.length === 0;
-    const rootTitle = /* @__PURE__ */ import_react38.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
+    const rootTitle = /* @__PURE__ */ import_react39.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.renderReact(
-      /* @__PURE__ */ import_react38.default.createElement(
-        import_semi_ui18.Popover,
+      /* @__PURE__ */ import_react39.default.createElement(
+        import_semi_ui17.Popover,
         {
-          content: /* @__PURE__ */ import_react38.default.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ import_react38.default.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ import_react39.default.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ import_react38.default.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ import_react38.default.createElement(UIVarName2, null, v?.key))
+        /* @__PURE__ */ import_react39.default.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ import_react39.default.createElement(UIVarName2, null, v?.key))
       )
     );
   }
@@ -2458,7 +2410,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
     const dom = document.createElement("span");
     this.rootDOM = dom;
     this.toDispose.push(
-      import_editor20.Disposable.create(() => {
+      import_editor22.Disposable.create(() => {
         import_react_dom.default.unmountComponentAtNode(this.rootDOM);
       })
     );
@@ -2475,7 +2427,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
     return dom;
   }
   eq(other) {
-    return (0, import_lodash3.isEqual)(this.keyPath, other.keyPath);
+    return (0, import_lodash4.isEqual)(this.keyPath, other.keyPath);
   }
   ignoreEvent() {
     return false;
@@ -2485,9 +2437,9 @@ var VariableTagWidget = class extends import_view4.WidgetType {
   }
 };
 function VariableTagInject() {
-  const injector = (0, import_react39.useInjector)();
-  const scope = (0, import_editor20.useCurrentScope)();
-  (0, import_react38.useLayoutEffect)(() => {
+  const injector = (0, import_react40.useInjector)();
+  const scope = (0, import_editor22.useCurrentScope)();
+  (0, import_react39.useLayoutEffect)(() => {
     const atMatcher = new import_view4.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
       decoration: (match) => import_view4.Decoration.replace({
@@ -2524,29 +2476,29 @@ function VariableTagInject() {
 
 // src/components/prompt-editor-with-variables/index.tsx
 function PromptEditorWithVariables(props) {
-  return /* @__PURE__ */ import_react40.default.createElement(PromptEditor, { ...props }, /* @__PURE__ */ import_react40.default.createElement(VariableTree, null), /* @__PURE__ */ import_react40.default.createElement(VariableTagInject, null));
+  return /* @__PURE__ */ import_react41.default.createElement(PromptEditor, { ...props }, /* @__PURE__ */ import_react41.default.createElement(VariableTree, null), /* @__PURE__ */ import_react41.default.createElement(VariableTagInject, null));
 }
 
 // src/components/prompt-editor-with-inputs/index.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
-var import_react42 = __toESM(require("react"));
-var import_semi_ui20 = require("@douyinfe/semi-ui");
-var import_react43 = require("@coze-editor/editor/react");
+var import_react43 = __toESM(require("react"));
+var import_semi_ui19 = require("@douyinfe/semi-ui");
+var import_react44 = require("@coze-editor/editor/react");
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
-var import_react41 = __toESM(require("react"));
-var import_lodash4 = require("lodash");
-var import_editor21 = require("@flowgram.ai/editor");
-var import_semi_ui19 = require("@douyinfe/semi-ui");
+var import_react42 = __toESM(require("react"));
+var import_lodash5 = require("lodash");
+var import_editor23 = require("@flowgram.ai/editor");
+var import_semi_ui18 = require("@douyinfe/semi-ui");
 function InputsPicker({
   inputsValues,
   onSelect
 }) {
-  const available = (0, import_editor21.useScopeAvailable)();
+  const available = (0, import_editor23.useScopeAvailable)();
   const getArrayDrilldown = (type, depth = 1) => {
-    if (import_editor21.ASTMatch.isArray(type.items)) {
+    if (import_editor23.ASTMatch.isArray(type.items)) {
       return getArrayDrilldown(type.items, depth + 1);
     }
     return { type: type.items, depth };
@@ -2554,12 +2506,12 @@ function InputsPicker({
   const renderVariable = (variable, keyPath) => {
     let type = variable?.type;
     let children;
-    if (import_editor21.ASTMatch.isObject(type)) {
+    if (import_editor23.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
     }
-    if (import_editor21.ASTMatch.isArray(type)) {
+    if (import_editor23.ASTMatch.isArray(type)) {
       const drilldown = getArrayDrilldown(type);
-      if (import_editor21.ASTMatch.isObject(drilldown.type)) {
+      if (import_editor23.ASTMatch.isObject(drilldown.type)) {
         children = (drilldown.type.properties || []).map(
           (_property) => renderVariable(_property, [
             ...keyPath,
@@ -2572,12 +2524,12 @@ function InputsPicker({
     const key = keyPath.map((_key, idx) => _key === "[0]" || idx === 0 ? _key : `.${_key}`).join("");
     return {
       key,
-      label: (0, import_lodash4.last)(keyPath),
+      label: (0, import_lodash5.last)(keyPath),
       value: key,
       children
     };
   };
-  const treeData = (0, import_react41.useMemo)(
+  const treeData = (0, import_react42.useMemo)(
     () => Object.entries(inputsValues).map(([key, value]) => {
       if (value?.type === "ref") {
         const variable = available.getByKeyPath(value.content || []);
@@ -2593,17 +2545,17 @@ function InputsPicker({
     }),
     []
   );
-  return /* @__PURE__ */ import_react41.default.createElement(import_semi_ui19.Tree, { treeData, onSelect: (v) => onSelect(v) });
+  return /* @__PURE__ */ import_react42.default.createElement(import_semi_ui18.Tree, { treeData, onSelect: (v) => onSelect(v) });
 }
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
 function InputsTree({ inputsValues }) {
-  const [posKey, setPosKey] = (0, import_react42.useState)("");
-  const [visible, setVisible] = (0, import_react42.useState)(false);
-  const [position, setPosition] = (0, import_react42.useState)(-1);
-  const editor = (0, import_react43.useEditor)();
+  const [posKey, setPosKey] = (0, import_react43.useState)("");
+  const [visible, setVisible] = (0, import_react43.useState)(false);
+  const [position, setPosition] = (0, import_react43.useState)(-1);
+  const editor = (0, import_react44.useEditor)();
   function insert(variablePath) {
-    const range = (0, import_react43.getCurrentMentionReplaceRange)(editor.$view.state);
+    const range = (0, import_react44.getCurrentMentionReplaceRange)(editor.$view.state);
     if (!range) {
       return;
     }
@@ -2617,19 +2569,19 @@ function InputsTree({ inputsValues }) {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!editor) {
       return;
     }
   }, [editor, visible]);
-  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(import_react43.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react42.default.createElement(
-    import_semi_ui20.Popover,
+  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(import_react44.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react43.default.createElement(
+    import_semi_ui19.Popover,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
-      content: /* @__PURE__ */ import_react42.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react42.default.createElement(
+      content: /* @__PURE__ */ import_react43.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react43.default.createElement(
         InputsPicker,
         {
           inputsValues,
@@ -2639,8 +2591,8 @@ function InputsTree({ inputsValues }) {
         }
       ))
     },
-    /* @__PURE__ */ import_react42.default.createElement(
-      import_react43.PositionMirror,
+    /* @__PURE__ */ import_react43.default.createElement(
+      import_react44.PositionMirror,
       {
         position,
         onChange: () => setPosKey(String(Math.random()))
@@ -2651,24 +2603,24 @@ function InputsTree({ inputsValues }) {
 
 // src/components/prompt-editor-with-inputs/index.tsx
 function PromptEditorWithInputs({ inputsValues, ...restProps }) {
-  return /* @__PURE__ */ import_react44.default.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ import_react44.default.createElement(InputsTree, { inputsValues }));
+  return /* @__PURE__ */ import_react45.default.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ import_react45.default.createElement(InputsTree, { inputsValues }));
 }
 
 // src/components/json-editor-with-variables/index.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_preset_code6 = require("@coze-editor/editor/preset-code");
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
-var import_react45 = __toESM(require("react"));
-var import_semi_ui21 = require("@douyinfe/semi-ui");
-var import_react46 = require("@coze-editor/editor/react");
+var import_react46 = __toESM(require("react"));
+var import_semi_ui20 = require("@douyinfe/semi-ui");
+var import_react47 = require("@coze-editor/editor/react");
 function VariableTree2() {
-  const [posKey, setPosKey] = (0, import_react45.useState)("");
-  const [visible, setVisible] = (0, import_react45.useState)(false);
-  const [position, setPosition] = (0, import_react45.useState)(-1);
-  const editor = (0, import_react46.useEditor)();
+  const [posKey, setPosKey] = (0, import_react46.useState)("");
+  const [visible, setVisible] = (0, import_react46.useState)(false);
+  const [position, setPosition] = (0, import_react46.useState)(-1);
+  const editor = (0, import_react47.useEditor)();
   function insert(variablePath) {
-    const range = (0, import_react46.getCurrentMentionReplaceRange)(editor.$view.state);
+    const range = (0, import_react47.getCurrentMentionReplaceRange)(editor.$view.state);
     if (!range) {
       return;
     }
@@ -2682,21 +2634,21 @@ function VariableTree2() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!editor) {
       return;
     }
   }, [editor, visible]);
   const treeData = useVariableTree({});
-  return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(import_react46.Mention, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react45.default.createElement(
-    import_semi_ui21.Popover,
+  return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(import_react47.Mention, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react46.default.createElement(
+    import_semi_ui20.Popover,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
-      content: /* @__PURE__ */ import_react45.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react45.default.createElement(
-        import_semi_ui21.Tree,
+      content: /* @__PURE__ */ import_react46.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react46.default.createElement(
+        import_semi_ui20.Tree,
         {
           treeData,
           onSelect: (v) => {
@@ -2705,8 +2657,8 @@ function VariableTree2() {
         }
       ))
     },
-    /* @__PURE__ */ import_react45.default.createElement(
-      import_react46.PositionMirror,
+    /* @__PURE__ */ import_react46.default.createElement(
+      import_react47.PositionMirror,
       {
         position,
         onChange: () => setPosKey(String(Math.random()))
@@ -2716,18 +2668,18 @@ function VariableTree2() {
 }
 
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_client = require("react-dom/client");
-var import_lodash5 = require("lodash");
-var import_editor22 = require("@flowgram.ai/editor");
-var import_semi_ui23 = require("@douyinfe/semi-ui");
-var import_semi_icons9 = require("@douyinfe/semi-icons");
-var import_react48 = require("@coze-editor/editor/react");
+var import_lodash6 = require("lodash");
+var import_editor24 = require("@flowgram.ai/editor");
+var import_semi_ui22 = require("@douyinfe/semi-ui");
+var import_semi_icons8 = require("@douyinfe/semi-icons");
+var import_react49 = require("@coze-editor/editor/react");
 var import_view5 = require("@codemirror/view");
 
 // src/components/json-editor-with-variables/styles.tsx
 var import_styled_components9 = __toESM(require("styled-components"));
-var import_semi_ui22 = require("@douyinfe/semi-ui");
+var import_semi_ui21 = require("@douyinfe/semi-ui");
 var UIRootTitle3 = import_styled_components9.default.div`
   margin-right: 4px;
   min-width: 20px;
@@ -2741,7 +2693,7 @@ var UIVarName3 = import_styled_components9.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var UITag3 = (0, import_styled_components9.default)(import_semi_ui22.Tag)`
+var UITag3 = (0, import_styled_components9.default)(import_semi_ui21.Tag)`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -2766,10 +2718,10 @@ var UIPopoverContent3 = import_styled_components9.default.div`
 var VariableTagWidget2 = class extends import_view5.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor22.DisposableCollection();
+    this.toDispose = new import_editor24.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
-        return /* @__PURE__ */ import_react47.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+        return /* @__PURE__ */ import_react48.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
       }
       return icon;
     };
@@ -2779,20 +2731,20 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
   renderVariable(v) {
     if (!v) {
       this.root.render(
-        /* @__PURE__ */ import_react47.default.createElement(UITag3, { prefixIcon: /* @__PURE__ */ import_react47.default.createElement(import_semi_icons9.IconIssueStroked, null), color: "amber" }, "Unknown")
+        /* @__PURE__ */ import_react48.default.createElement(UITag3, { prefixIcon: /* @__PURE__ */ import_react48.default.createElement(import_semi_icons8.IconIssueStroked, null), color: "amber" }, "Unknown")
       );
       return;
     }
-    const rootField = (0, import_lodash5.last)(v.parentFields);
-    const rootTitle = /* @__PURE__ */ import_react47.default.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootField = (0, import_lodash6.last)(v.parentFields);
+    const rootTitle = /* @__PURE__ */ import_react48.default.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.root.render(
-      /* @__PURE__ */ import_react47.default.createElement(
-        import_semi_ui23.Popover,
+      /* @__PURE__ */ import_react48.default.createElement(
+        import_semi_ui22.Popover,
         {
-          content: /* @__PURE__ */ import_react47.default.createElement(UIPopoverContent3, null, rootIcon, rootTitle, /* @__PURE__ */ import_react47.default.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ import_react48.default.createElement(UIPopoverContent3, null, rootIcon, rootTitle, /* @__PURE__ */ import_react48.default.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ import_react47.default.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react47.default.createElement(UIVarName3, null, v?.key))
+        /* @__PURE__ */ import_react48.default.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react48.default.createElement(UIVarName3, null, v?.key))
       )
     );
   }
@@ -2800,7 +2752,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     const dom = document.createElement("span");
     this.root = (0, import_client.createRoot)(dom);
     this.toDispose.push(
-      import_editor22.Disposable.create(() => {
+      import_editor24.Disposable.create(() => {
         this.root.unmount();
       })
     );
@@ -2817,7 +2769,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     return dom;
   }
   eq(other) {
-    return (0, import_lodash5.isEqual)(this.keyPath, other.keyPath);
+    return (0, import_lodash6.isEqual)(this.keyPath, other.keyPath);
   }
   ignoreEvent() {
     return false;
@@ -2827,9 +2779,9 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
   }
 };
 function VariableTagInject2() {
-  const injector = (0, import_react48.useInjector)();
-  const scope = (0, import_editor22.useCurrentScope)();
-  (0, import_react47.useLayoutEffect)(() => {
+  const injector = (0, import_react49.useInjector)();
+  const scope = (0, import_editor24.useCurrentScope)();
+  (0, import_react48.useLayoutEffect)(() => {
     const atMatcher = new import_view5.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
       decoration: (match) => import_view5.Decoration.replace({
@@ -2894,7 +2846,7 @@ var transformer = (0, import_preset_code6.transformerCreator)((text) => {
   return text;
 });
 function JsonEditorWithVariables(props) {
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     CodeEditor,
     {
       languageId: "json",
@@ -2905,15 +2857,16 @@ function JsonEditorWithVariables(props) {
         ...props.options || {}
       }
     },
-    /* @__PURE__ */ import_react49.default.createElement(VariableTree2, null),
-    /* @__PURE__ */ import_react49.default.createElement(VariableTagInject2, null)
+    /* @__PURE__ */ import_react50.default.createElement(VariableTree2, null),
+    /* @__PURE__ */ import_react50.default.createElement(VariableTagInject2, null)
   );
 }
 
 // src/components/inputs-values/index.tsx
-var import_react51 = __toESM(require("react"));
-var import_semi_ui24 = require("@douyinfe/semi-ui");
-var import_semi_icons10 = require("@douyinfe/semi-icons");
+var import_react52 = __toESM(require("react"));
+var import_editor25 = require("@flowgram.ai/editor");
+var import_semi_ui23 = require("@douyinfe/semi-ui");
+var import_semi_icons9 = require("@douyinfe/semi-icons");
 
 // src/components/inputs-values/styles.tsx
 var import_styled_components10 = __toESM(require("styled-components"));
@@ -2930,14 +2883,14 @@ var UIRow3 = import_styled_components10.default.div`
 `;
 
 // src/components/inputs-values/components/blur-input.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_input2 = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
 function BlurInput2(props) {
-  const [value, setValue] = (0, import_react50.useState)("");
-  (0, import_react50.useEffect)(() => {
+  const [value, setValue] = (0, import_react51.useState)("");
+  (0, import_react51.useEffect)(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     import_input2.default,
     {
       ...props,
@@ -2965,7 +2918,7 @@ function InputsValues({
     onChange,
     sortIndexKey: "extra.index"
   });
-  return /* @__PURE__ */ import_react51.default.createElement("div", null, /* @__PURE__ */ import_react51.default.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ import_react51.default.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", null, /* @__PURE__ */ import_react52.default.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ import_react52.default.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ import_react52.default.createElement(
     BlurInput2,
     {
       style: { width: 100, minWidth: 100, maxWidth: 100 },
@@ -2973,10 +2926,10 @@ function InputsValues({
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: "Input Key"
+      placeholder: import_editor25.I18n.t("Input Key")
     }
-  ), /* @__PURE__ */ import_react51.default.createElement(
-    DynamicValueInput,
+  ), /* @__PURE__ */ import_react52.default.createElement(
+    InjectDynamicValueInput,
     {
       style: { flexGrow: 1 },
       readonly,
@@ -2989,20 +2942,20 @@ function InputsValues({
         strategies: [...constantProps?.strategies || []]
       }
     }
-  ), /* @__PURE__ */ import_react51.default.createElement(
-    import_semi_ui24.IconButton,
+  ), /* @__PURE__ */ import_react52.default.createElement(
+    import_semi_ui23.IconButton,
     {
       disabled: readonly,
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons10.IconDelete, { size: "small" }),
+      icon: /* @__PURE__ */ import_react52.default.createElement(import_semi_icons9.IconDelete, { size: "small" }),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react51.default.createElement(import_semi_ui24.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons10.IconPlus, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ import_react52.default.createElement(import_semi_ui23.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react52.default.createElement(import_semi_icons9.IconPlus, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/components/display-schema-tree/index.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 
 // src/components/display-schema-tree/styles.tsx
 var import_styled_components11 = __toESM(require("styled-components"));
@@ -3086,7 +3039,7 @@ var TreeItem = import_styled_components11.default.div`
 
 // src/components/display-schema-tree/index.tsx
 function DisplaySchemaTree(props) {
-  return /* @__PURE__ */ import_react52.default.createElement(SchemaTree, { ...props });
+  return /* @__PURE__ */ import_react53.default.createElement(SchemaTree, { ...props });
 }
 function SchemaTree(props) {
   const {
@@ -3102,27 +3055,27 @@ function SchemaTree(props) {
   const icon = typeManager?.getDisplayIcon(schema);
   let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ import_react52.default.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ import_react52.default.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ import_react52.default.createElement(HorizontalLine, null), showIcon && icon && import_react52.default.cloneElement(icon, {
+  return /* @__PURE__ */ import_react53.default.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ import_react53.default.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ import_react53.default.createElement(HorizontalLine, null), showIcon && icon && import_react53.default.cloneElement(icon, {
     className: "tree-icon"
-  }), /* @__PURE__ */ import_react52.default.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ import_react52.default.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ import_react52.default.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
+  }), /* @__PURE__ */ import_react53.default.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ import_react53.default.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ import_react53.default.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
 }
 
 // src/components/display-outputs/index.tsx
-var import_react54 = __toESM(require("react"));
-var import_json_schema7 = require("@flowgram.ai/json-schema");
-var import_editor23 = require("@flowgram.ai/editor");
+var import_react55 = __toESM(require("react"));
+var import_json_schema8 = require("@flowgram.ai/json-schema");
+var import_editor26 = require("@flowgram.ai/editor");
 
 // src/components/display-schema-tag/index.tsx
-var import_react53 = __toESM(require("react"));
-var import_semi_ui26 = require("@douyinfe/semi-ui");
+var import_react54 = __toESM(require("react"));
+var import_semi_ui25 = require("@douyinfe/semi-ui");
 
 // src/components/display-schema-tag/styles.ts
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_semi_ui25 = require("@douyinfe/semi-ui");
+var import_semi_ui24 = require("@douyinfe/semi-ui");
 var PopoverContent = import_styled_components12.default.div`
   padding: 10px;
 `;
-var StyledTag = (0, import_styled_components12.default)(import_semi_ui25.Tag)`
+var StyledTag = (0, import_styled_components12.default)(import_semi_ui24.Tag)`
   padding: 4px;
 
   .tag-icon {
@@ -3142,14 +3095,14 @@ var TitleSpan = import_styled_components12.default.span`
 function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
   const typeManager = useTypeManager();
   const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({ type: "unknown" });
-  return /* @__PURE__ */ import_react53.default.createElement(
-    import_semi_ui26.Popover,
+  return /* @__PURE__ */ import_react54.default.createElement(
+    import_semi_ui25.Popover,
     {
-      content: /* @__PURE__ */ import_react53.default.createElement(PopoverContent, null, /* @__PURE__ */ import_react53.default.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
+      content: /* @__PURE__ */ import_react54.default.createElement(PopoverContent, null, /* @__PURE__ */ import_react54.default.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
     },
-    /* @__PURE__ */ import_react53.default.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && import_react53.default.cloneElement(icon, {
+    /* @__PURE__ */ import_react54.default.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && import_react54.default.cloneElement(icon, {
       className: "tag-icon"
-    }), title && /* @__PURE__ */ import_react53.default.createElement(TitleSpan, null, title))
+    }), title && /* @__PURE__ */ import_react54.default.createElement(TitleSpan, null, title))
   );
 }
 
@@ -3163,9 +3116,9 @@ var DisplayOutputsWrapper = import_styled_components13.default.div`
 
 // src/components/display-outputs/index.tsx
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
-  const scope = (0, import_editor23.useCurrentScope)();
-  const refresh = (0, import_editor23.useRefresh)();
-  (0, import_react54.useEffect)(() => {
+  const scope = (0, import_editor26.useCurrentScope)();
+  const refresh = (0, import_editor26.useRefresh)();
+  (0, import_react55.useEffect)(() => {
     if (!displayFromScope) {
       return () => null;
     }
@@ -3179,12 +3132,12 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
   const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr) => {
     acm = {
       ...acm,
-      ...import_json_schema7.JsonSchemaUtils.astToSchema(curr.type)?.properties || {}
+      ...import_json_schema8.JsonSchemaUtils.astToSchema(curr.type)?.properties || {}
     };
     return acm;
   }, {}) : value?.properties || {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ import_react54.default.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ import_react55.default.createElement(
     DisplaySchemaTag,
     {
       key,
@@ -3197,15 +3150,15 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
 }
 
 // src/components/display-flow-value/index.tsx
-var import_react55 = __toESM(require("react"));
-var import_json_schema8 = require("@flowgram.ai/json-schema");
-var import_editor24 = require("@flowgram.ai/editor");
+var import_react56 = __toESM(require("react"));
+var import_json_schema9 = require("@flowgram.ai/json-schema");
+var import_editor27 = require("@flowgram.ai/editor");
 function DisplayFlowValue({ value, title, showIconInTree }) {
-  const available = (0, import_editor24.useScopeAvailable)();
+  const available = (0, import_editor27.useScopeAvailable)();
   const variable = value?.type === "ref" ? available.getByKeyPath(value?.content) : void 0;
-  const schema = (0, import_react55.useMemo)(() => {
+  const schema = (0, import_react56.useMemo)(() => {
     if (value?.type === "ref") {
-      return import_json_schema8.JsonSchemaUtils.astToSchema(variable?.type);
+      return import_json_schema9.JsonSchemaUtils.astToSchema(variable?.type);
     }
     if (value?.type === "template") {
       return { type: "string" };
@@ -3226,7 +3179,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
     }
     return { type: "unknown" };
   }, [value, variable?.hash]);
-  return /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     DisplaySchemaTag,
     {
       title,
@@ -3238,7 +3191,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 }
 
 // src/components/display-inputs-values/index.tsx
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 
 // src/components/display-inputs-values/styles.ts
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -3251,29 +3204,29 @@ var DisplayInputsWrapper = import_styled_components14.default.div`
 // src/components/display-inputs-values/index.tsx
 function DisplayInputsValues({ value, showIconInTree }) {
   const childEntries = Object.entries(value || {});
-  return /* @__PURE__ */ import_react56.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ import_react56.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
+  return /* @__PURE__ */ import_react57.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ import_react57.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
 }
 
 // src/components/assign-rows/index.tsx
-var import_react59 = __toESM(require("react"));
-var import_editor25 = require("@flowgram.ai/editor");
-var import_semi_ui28 = require("@douyinfe/semi-ui");
-var import_semi_icons12 = require("@douyinfe/semi-icons");
-
-// src/components/assign-row/index.tsx
-var import_react58 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
+var import_editor28 = require("@flowgram.ai/editor");
 var import_semi_ui27 = require("@douyinfe/semi-ui");
 var import_semi_icons11 = require("@douyinfe/semi-icons");
 
+// src/components/assign-row/index.tsx
+var import_react59 = __toESM(require("react"));
+var import_semi_ui26 = require("@douyinfe/semi-ui");
+var import_semi_icons10 = require("@douyinfe/semi-icons");
+
 // src/components/assign-row/components/blur-input.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_input3 = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
 function BlurInput3(props) {
-  const [value, setValue] = (0, import_react57.useState)("");
-  (0, import_react57.useEffect)(() => {
+  const [value, setValue] = (0, import_react58.useState)("");
+  (0, import_react58.useEffect)(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ import_react57.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(
     import_input3.default,
     {
       ...props,
@@ -3296,8 +3249,8 @@ function AssignRow(props) {
     onDelete,
     readonly
   } = props;
-  return /* @__PURE__ */ import_react58.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ import_react58.default.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ import_react58.default.createElement(
-    VariableSelector,
+  return /* @__PURE__ */ import_react59.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ import_react59.default.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ import_react59.default.createElement(
+    InjectVariableSelector,
     {
       style: { width: "100%", height: 26 },
       value: value?.left?.content,
@@ -3307,7 +3260,7 @@ function AssignRow(props) {
         left: { type: "ref", content: v }
       })
     }
-  ) : /* @__PURE__ */ import_react58.default.createElement(
+  ) : /* @__PURE__ */ import_react59.default.createElement(
     BlurInput3,
     {
       style: { height: 26 },
@@ -3319,8 +3272,8 @@ function AssignRow(props) {
         left: v
       })
     }
-  )), /* @__PURE__ */ import_react58.default.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ import_react58.default.createElement(
-    DynamicValueInput,
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ import_react59.default.createElement(
+    InjectDynamicValueInput,
     {
       readonly,
       value: value?.right,
@@ -3329,12 +3282,12 @@ function AssignRow(props) {
         right: v
       })
     }
-  )), onDelete && /* @__PURE__ */ import_react58.default.createElement("div", null, /* @__PURE__ */ import_react58.default.createElement(
-    import_semi_ui27.IconButton,
+  )), onDelete && /* @__PURE__ */ import_react59.default.createElement("div", null, /* @__PURE__ */ import_react59.default.createElement(
+    import_semi_ui26.IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react58.default.createElement(import_semi_icons11.IconMinus, null),
+      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons10.IconMinus, null),
       onClick: () => onDelete?.()
     }
   )));
@@ -3343,7 +3296,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ import_react59.default.createElement(import_editor25.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(import_editor28.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react60.default.createElement(
     AssignRow,
     {
       key: childField.key,
@@ -3354,21 +3307,21 @@ function AssignRows(props) {
       },
       onDelete: () => field.remove(index)
     }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ import_react59.default.createElement(
-    import_semi_ui28.Button,
+  )), /* @__PURE__ */ import_react60.default.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ import_react60.default.createElement(
+    import_semi_ui27.Button,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons12.IconPlus, null),
+      icon: /* @__PURE__ */ import_react60.default.createElement(import_semi_icons11.IconPlus, null),
       onClick: () => field.append({ operator: "assign" })
     },
     "Assign"
-  ), /* @__PURE__ */ import_react59.default.createElement(
-    import_semi_ui28.Button,
+  ), /* @__PURE__ */ import_react60.default.createElement(
+    import_semi_ui27.Button,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons12.IconPlus, null),
+      icon: /* @__PURE__ */ import_react60.default.createElement(import_semi_icons11.IconPlus, null),
       onClick: () => field.append({ operator: "declare" })
     },
     "Declaration"
@@ -3376,29 +3329,29 @@ function AssignRows(props) {
 }
 
 // src/effects/provide-batch-input/index.ts
-var import_editor26 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor26.createEffectFromVariableProvider)({
+var import_editor29 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor29.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor26.ASTFactory.createVariableDeclaration({
+    import_editor29.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor26.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor29.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor26.ASTFactory.createObject({
+      type: import_editor29.ASTFactory.createObject({
         properties: [
-          import_editor26.ASTFactory.createProperty({
+          import_editor29.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor26.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor26.ASTFactory.createKeyPathExpression({
+            initializer: import_editor29.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor29.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor26.ASTFactory.createProperty({
+          import_editor29.ASTFactory.createProperty({
             key: "index",
-            type: import_editor26.ASTFactory.createNumber()
+            type: import_editor29.ASTFactory.createNumber()
           })
         ]
       })
@@ -3407,14 +3360,14 @@ var provideBatchInputEffect = (0, import_editor26.createEffectFromVariableProvid
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_lodash6 = require("lodash");
-var import_editor27 = require("@flowgram.ai/editor");
+var import_lodash7 = require("lodash");
+var import_editor30 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor27.DataEvent.onValueInit,
+    event: import_editor30.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor27.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor30.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -3463,7 +3416,7 @@ function isKeyPathMatch(keyPath = [], targetKeyPath) {
 }
 function getTemplateKeyPaths(value) {
   const keyPathReg = /{{(.*?)}}/g;
-  return (0, import_lodash6.uniq)(value.content?.match(keyPathReg) || []).map(
+  return (0, import_lodash7.uniq)(value.content?.match(keyPathReg) || []).map(
     (_keyPath) => _keyPath.slice(2, -2).split(".")
   );
 }
@@ -3474,7 +3427,7 @@ function isTemplate(value) {
   return value?.type === "template" && typeof value?.content === "string";
 }
 function traverseRef(name, value, cb) {
-  if ((0, import_lodash6.isObject)(value)) {
+  if ((0, import_lodash7.isObject)(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
@@ -3488,7 +3441,7 @@ function traverseRef(name, value, cb) {
     });
     return;
   }
-  if ((0, import_lodash6.isArray)(value)) {
+  if ((0, import_lodash7.isArray)(value)) {
     value.forEach((_value, idx) => {
       traverseRef(`${name}[${idx}]`, _value, cb);
     });
@@ -3498,28 +3451,28 @@ function traverseRef(name, value, cb) {
 }
 
 // src/effects/provide-json-schema-outputs/index.ts
-var import_json_schema9 = require("@flowgram.ai/json-schema");
-var import_editor28 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor28.createEffectFromVariableProvider)({
+var import_json_schema10 = require("@flowgram.ai/json-schema");
+var import_editor31 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor31.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor28.ASTFactory.createVariableDeclaration({
+    import_editor31.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor28.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor31.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_json_schema9.JsonSchemaUtils.schemaToAST(value)
+      type: import_json_schema10.JsonSchemaUtils.schemaToAST(value)
     })
   ]
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor29 = require("@flowgram.ai/editor");
+var import_editor32 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor29.DataEvent.onValueChange,
+    event: import_editor32.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor29.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor32.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             ..._var.meta || {},
@@ -3533,17 +3486,17 @@ var syncVariableTitle = [
 ];
 
 // src/effects/validate-when-variable-sync/index.ts
-var import_lodash7 = require("lodash");
-var import_editor30 = require("@flowgram.ai/editor");
+var import_lodash8 = require("lodash");
+var import_editor33 = require("@flowgram.ai/editor");
 var validateWhenVariableSync = ({
   scope
 } = {}) => [
   {
-    event: import_editor30.DataEvent.onValueInit,
+    event: import_editor33.DataEvent.onValueInit,
     effect: ({ context, form }) => {
-      const nodeScope = scope === "private" ? (0, import_editor30.getNodePrivateScope)(context.node) : (0, import_editor30.getNodeScope)(context.node);
+      const nodeScope = scope === "private" ? (0, import_editor33.getNodePrivateScope)(context.node) : (0, import_editor33.getNodeScope)(context.node);
       const disposable = nodeScope.available.onListOrAnyVarChange(() => {
-        if (!(0, import_lodash7.isEmpty)(form.state.errors)) {
+        if (!(0, import_lodash8.isEmpty)(form.state.errors)) {
           form.validate();
         }
       });
@@ -3553,16 +3506,16 @@ var validateWhenVariableSync = ({
 ];
 
 // src/effects/listen-ref-value-change/index.ts
-var import_editor31 = require("@flowgram.ai/editor");
+var import_editor34 = require("@flowgram.ai/editor");
 var listenRefValueChange = (cb) => [
   {
-    event: import_editor31.DataEvent.onValueInitOrChange,
+    event: import_editor34.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor31.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor34.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (v) => {
           cb({ ...params, variable: v });
@@ -3576,20 +3529,20 @@ var listenRefValueChange = (cb) => [
 ];
 
 // src/effects/listen-ref-schema-change/index.ts
-var import_json_schema10 = require("@flowgram.ai/json-schema");
-var import_editor32 = require("@flowgram.ai/editor");
+var import_json_schema11 = require("@flowgram.ai/json-schema");
+var import_editor35 = require("@flowgram.ai/editor");
 var listenRefSchemaChange = (cb) => [
   {
-    event: import_editor32.DataEvent.onValueInitOrChange,
+    event: import_editor35.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor32.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor35.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (_type) => {
-          cb({ ...params, schema: import_json_schema10.JsonSchemaUtils.astToSchema(_type) });
+          cb({ ...params, schema: import_json_schema11.JsonSchemaUtils.astToSchema(_type) });
         },
         {
           selector: (_v) => _v?.type
@@ -3602,84 +3555,22 @@ var listenRefSchemaChange = (cb) => [
   }
 ];
 
-// src/shared/format-legacy-refs/index.ts
-var import_lodash8 = require("lodash");
-function formatLegacyRefOnSubmit(value) {
-  if ((0, import_lodash8.isObject)(value)) {
-    if (isLegacyFlowRefValueSchema(value)) {
-      return formatLegacyRefToNewRef(value);
-    }
-    return Object.fromEntries(
-      Object.entries(value).map(([key, value2]) => [
-        key,
-        formatLegacyRefOnSubmit(value2)
-      ])
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.map(formatLegacyRefOnSubmit);
-  }
-  return value;
-}
-function formatLegacyRefOnInit(value) {
-  if ((0, import_lodash8.isObject)(value)) {
-    if (isNewFlowRefValueSchema(value)) {
-      return formatNewRefToLegacyRef(value);
-    }
-    return Object.fromEntries(
-      Object.entries(value).map(([key, value2]) => [
-        key,
-        formatLegacyRefOnInit(value2)
-      ])
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.map(formatLegacyRefOnInit);
-  }
-  return value;
-}
-function isLegacyFlowRefValueSchema(value) {
-  return (0, import_lodash8.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
-}
-function isNewFlowRefValueSchema(value) {
-  return (0, import_lodash8.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
-}
-function formatLegacyRefToNewRef(value) {
-  const keyPath = value.content.split(".");
-  if (keyPath[1] === "outputs") {
-    return {
-      type: "ref",
-      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
-    };
-  }
-  return {
-    type: "ref",
-    content: keyPath
-  };
-}
-function formatNewRefToLegacyRef(value) {
-  return {
-    type: "ref",
-    content: value.content.join(".")
-  };
-}
-
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor33 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor33.createEffectFromVariableProvider)({
+var import_editor36 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor36.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor33.ASTFactory.createVariableDeclaration({
+    import_editor36.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor33.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor36.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor33.ASTFactory.createObject({
+      type: import_editor36.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor33.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor36.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor33.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor33.ASTFactory.createKeyPathExpression({
+            initializer: import_editor36.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor36.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -3689,7 +3580,7 @@ var provideBatchOutputsEffect = (0, import_editor33.createEffectFromVariableProv
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor33.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor36.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -3697,7 +3588,7 @@ var createBatchOutputsFormPlugin = (0, import_editor33.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor33.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor36.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -3707,21 +3598,21 @@ var createBatchOutputsFormPlugin = (0, import_editor33.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor33.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor36.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor33.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor36.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor33.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor33.getNodeScope)(_childBlock))
+            (0, import_editor36.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor36.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -3732,9 +3623,9 @@ var createBatchOutputsFormPlugin = (0, import_editor33.defineFormPluginCreator)(
 
 // src/form-plugins/infer-inputs-plugin/index.ts
 var import_lodash9 = require("lodash");
-var import_json_schema11 = require("@flowgram.ai/json-schema");
-var import_editor34 = require("@flowgram.ai/editor");
-var createInferInputsPlugin = (0, import_editor34.defineFormPluginCreator)({
+var import_json_schema12 = require("@flowgram.ai/json-schema");
+var import_editor37 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor37.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
       return;
@@ -3745,7 +3636,7 @@ var createInferInputsPlugin = (0, import_editor34.defineFormPluginCreator)({
         targetKey,
         infer(
           (0, import_lodash9.get)(formData, sourceKey),
-          scope === "private" ? (0, import_editor34.getNodePrivateScope)(ctx.node) : (0, import_editor34.getNodeScope)(ctx.node)
+          scope === "private" ? (0, import_editor37.getNodePrivateScope)(ctx.node) : (0, import_editor37.getNodeScope)(ctx.node)
         )
       );
       return formData;
@@ -3785,7 +3676,7 @@ var infer = (values, scope) => {
     }
     if (isRef2(values)) {
       const variable = scope.available.getByKeyPath(values?.content);
-      const schema = variable?.type ? import_json_schema11.JsonSchemaUtils.astToSchema(variable?.type) : void 0;
+      const schema = variable?.type ? import_json_schema12.JsonSchemaUtils.astToSchema(variable?.type) : void 0;
       return schema;
     }
     if (isTemplate2(values)) {
@@ -3808,33 +3699,33 @@ var infer = (values, scope) => {
 
 // src/form-plugins/infer-assign-plugin/index.ts
 var import_lodash10 = require("lodash");
-var import_json_schema12 = require("@flowgram.ai/json-schema");
-var import_editor35 = require("@flowgram.ai/editor");
-var createInferAssignPlugin = (0, import_editor35.defineFormPluginCreator)({
+var import_json_schema13 = require("@flowgram.ai/json-schema");
+var import_editor38 = require("@flowgram.ai/editor");
+var createInferAssignPlugin = (0, import_editor38.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
     if (!assignKey || !outputKey) {
       return;
     }
     mergeEffect({
-      [assignKey]: (0, import_editor35.createEffectFromVariableProvider)({
+      [assignKey]: (0, import_editor38.createEffectFromVariableProvider)({
         parse: (value, ctx) => {
           const declareRows = (0, import_lodash10.uniqBy)(
             value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
             "left"
           );
           return [
-            import_editor35.ASTFactory.createVariableDeclaration({
+            import_editor38.ASTFactory.createVariableDeclaration({
               key: `${ctx.node.id}`,
               meta: {
-                title: (0, import_editor35.getNodeForm)(ctx.node)?.getValueIn("title"),
+                title: (0, import_editor38.getNodeForm)(ctx.node)?.getValueIn("title"),
                 icon: ctx.node.getNodeRegistry().info?.icon
               },
-              type: import_editor35.ASTFactory.createObject({
+              type: import_editor38.ASTFactory.createObject({
                 properties: declareRows.map(
-                  (_v) => import_editor35.ASTFactory.createProperty({
+                  (_v) => import_editor38.ASTFactory.createProperty({
                     key: _v.left,
-                    type: _v.right?.type === "constant" ? import_json_schema12.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
-                    initializer: _v.right?.type === "ref" ? import_editor35.ASTFactory.createKeyPathExpression({
+                    type: _v.right?.type === "constant" ? import_json_schema13.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
+                    initializer: _v.right?.type === "ref" ? import_editor38.ASTFactory.createKeyPathExpression({
                       keyPath: _v.right?.content || []
                     }) : {}
                   })
@@ -3849,7 +3740,7 @@ var createInferAssignPlugin = (0, import_editor35.defineFormPluginCreator)({
       (0, import_lodash10.set)(
         formData,
         outputKey,
-        import_json_schema12.JsonSchemaUtils.astToSchema((0, import_editor35.getNodeScope)(ctx.node).output.variables?.[0]?.type)
+        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor38.getNodeScope)(ctx.node).output.variables?.[0]?.type)
       );
       return formData;
     });
@@ -3858,7 +3749,7 @@ var createInferAssignPlugin = (0, import_editor35.defineFormPluginCreator)({
 
 // src/validate/validate-flow-value/index.tsx
 var import_lodash11 = require("lodash");
-var import_editor36 = require("@flowgram.ai/editor");
+var import_editor39 = require("@flowgram.ai/editor");
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
   const {
@@ -3867,15 +3758,15 @@ function validateFlowValue(value, ctx) {
   } = errorMessages || {};
   if (required && ((0, import_lodash11.isNil)(value) || (0, import_lodash11.isNil)(value?.content) || value?.content === "")) {
     return {
-      level: import_editor36.FeedbackLevel.Error,
+      level: import_editor39.FeedbackLevel.Error,
       message: requiredMessage
     };
   }
   if (value?.type === "ref") {
-    const variable = (0, import_editor36.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+    const variable = (0, import_editor39.getNodeScope)(node).available.getByKeyPath(value?.content || []);
     if (!variable) {
       return {
-        level: import_editor36.FeedbackLevel.Error,
+        level: import_editor39.FeedbackLevel.Error,
         message: unknownVariableMessage
       };
     }
@@ -3883,10 +3774,10 @@ function validateFlowValue(value, ctx) {
   if (value?.type === "template") {
     const allRefs = getTemplateKeyPaths2(value);
     for (const ref of allRefs) {
-      const variable = (0, import_editor36.getNodeScope)(node).available.getByKeyPath(ref);
+      const variable = (0, import_editor39.getNodeScope)(node).available.getByKeyPath(ref);
       if (!variable) {
         return {
-          level: import_editor36.FeedbackLevel.Error,
+          level: import_editor39.FeedbackLevel.Error,
           message: unknownVariableMessage
         };
       }
@@ -3916,6 +3807,9 @@ function getTemplateKeyPaths2(value) {
   DisplaySchemaTag,
   DisplaySchemaTree,
   DynamicValueInput,
+  InjectDynamicValueInput,
+  InjectTypeSelector,
+  InjectVariableSelector,
   InputsValues,
   JsonEditorWithVariables,
   JsonSchemaEditor,
@@ -3931,6 +3825,7 @@ function getTemplateKeyPaths2(value) {
   createDisableDeclarationPlugin,
   createInferAssignPlugin,
   createInferInputsPlugin,
+  createInjectMaterial,
   createTypePresetPlugin,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,