@flowgram.ai/form-materials 0.3.4 → 0.3.5

package/dist/esm/index.js

@@ -1,17 +1,105 @@
 // src/components/variable-selector/index.tsx
-import React11, { useMemo } from "react";
+import React12, { useMemo } from "react";
 import { I18n as I18n7 } from "@flowgram.ai/editor";
 import { Popover } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
 
+// src/shared/format-legacy-refs/index.ts
+import { isObject } from "lodash";
+function formatLegacyRefOnSubmit(value) {
+  if (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 (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 isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+}
+function isNewFlowRefValueSchema(value) {
+  return 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
+import React from "react";
+import {
+  FlowRendererComponentType,
+  FlowRendererRegistry,
+  usePlaygroundContainer
+} from "@flowgram.ai/editor";
+function createInjectMaterial(Component, params) {
+  const InjectComponent = (props) => {
+    const container = usePlaygroundContainer();
+    if (!container?.isBound(FlowRendererRegistry)) {
+      return React.createElement(Component, { ...props });
+    }
+    const rendererRegistry = container.get(FlowRendererRegistry);
+    const renderKey = params?.renderKey || Component.renderKey || Component.name || "";
+    const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
+    if (renderer?.type !== FlowRendererComponentType.REACT) {
+      return React.createElement(Component, { ...props });
+    }
+    return React.createElement(renderer.renderer, {
+      ...props
+    });
+  };
+  return InjectComponent;
+}
+
 // src/components/variable-selector/use-variable-tree.tsx
-import React10, { useCallback } from "react";
+import React11, { useCallback } from "react";
 import { JsonSchemaUtils as JsonSchemaUtils2 } from "@flowgram.ai/json-schema";
 import { ASTMatch as ASTMatch2, useAvailableVariables } from "@flowgram.ai/editor";
 import { Icon } from "@douyinfe/semi-ui";
 
 // src/plugins/json-schema-preset/index.tsx
-import React9 from "react";
+import React10 from "react";
 import {
   JsonSchemaUtils,
   useTypeManager as useOriginTypeManager,
@@ -22,12 +110,12 @@ import {
 import { jsonSchemaTypeManager } from "@flowgram.ai/json-schema";
 
 // src/plugins/json-schema-preset/type-definition/string.tsx
-import React from "react";
+import React2 from "react";
 import { I18n } from "@flowgram.ai/editor";
 import { Input } from "@douyinfe/semi-ui";
 var stringRegistry = {
   type: "string",
-  ConstantRenderer: (props) => /* @__PURE__ */ React.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ React2.createElement(
     Input,
     {
       placeholder: I18n.t("Please Input String"),
@@ -39,15 +127,15 @@ var stringRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/object.tsx
-import React4 from "react";
+import React5 from "react";
 import { I18n as I18n2 } from "@flowgram.ai/editor";
 
 // src/components/code-editor-mini/index.tsx
-import React3 from "react";
+import React4 from "react";
 import styled from "styled-components";
 
 // src/components/code-editor/index.tsx
-import React2, { useEffect, useRef } from "react";
+import React3, { useEffect, useRef } from "react";
 import {
   ActiveLinePlaceholder,
   createRenderer,
@@ -368,7 +456,7 @@ function CodeEditor({
       editorRef.current?.setValue(String(value || ""));
     }
   }, [value]);
-  return /* @__PURE__ */ React2.createElement(EditorProvider, null, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(EditorProvider, null, /* @__PURE__ */ React3.createElement(
     OriginCodeEditor,
     {
       defaultValue: value,
@@ -386,7 +474,7 @@ function CodeEditor({
       },
       onChange: (e) => onChange?.(e.value)
     },
-    activeLinePlaceholder && /* @__PURE__ */ React2.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder),
+    activeLinePlaceholder && /* @__PURE__ */ React3.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder),
     children
   ));
 }
@@ -398,7 +486,7 @@ var UIMini = styled.div`
   }
 `;
 function CodeEditorMini(props) {
-  return /* @__PURE__ */ React3.createElement(UIMini, null, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(UIMini, null, /* @__PURE__ */ React4.createElement(
     CodeEditor,
     {
       ...props,
@@ -414,7 +502,7 @@ function CodeEditorMini(props) {
 // src/plugins/json-schema-preset/type-definition/object.tsx
 var objectRegistry = {
   type: "object",
-  ConstantRenderer: (props) => /* @__PURE__ */ React4.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ React5.createElement(
     CodeEditorMini,
     {
       value: props.value,
@@ -427,12 +515,12 @@ var objectRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/number.tsx
-import React5 from "react";
+import React6 from "react";
 import { I18n as I18n3 } from "@flowgram.ai/editor";
 import { InputNumber } from "@douyinfe/semi-ui";
 var numberRegistry = {
   type: "number",
-  ConstantRenderer: (props) => /* @__PURE__ */ React5.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ React6.createElement(
     InputNumber,
     {
       placeholder: I18n3.t("Please Input Number"),
@@ -445,12 +533,12 @@ var numberRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/integer.tsx
-import React6 from "react";
+import React7 from "react";
 import { I18n as I18n4 } from "@flowgram.ai/editor";
 import { InputNumber as InputNumber2 } from "@douyinfe/semi-ui";
 var integerRegistry = {
   type: "integer",
-  ConstantRenderer: (props) => /* @__PURE__ */ React6.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ React7.createElement(
     InputNumber2,
     {
       placeholder: I18n4.t("Please Input Integer"),
@@ -463,14 +551,14 @@ var integerRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/boolean.tsx
-import React7 from "react";
+import React8 from "react";
 import { I18n as I18n5 } from "@flowgram.ai/editor";
 import { Select } from "@douyinfe/semi-ui";
 var booleanRegistry = {
   type: "boolean",
   ConstantRenderer: (props) => {
     const { value, onChange, ...rest } = props;
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       Select,
       {
         placeholder: I18n5.t("Please Select Boolean"),
@@ -489,11 +577,11 @@ var booleanRegistry = {
 };
 
 // src/plugins/json-schema-preset/type-definition/array.tsx
-import React8 from "react";
+import React9 from "react";
 import { I18n as I18n6 } from "@flowgram.ai/editor";
 var arrayRegistry = {
   type: "array",
-  ConstantRenderer: (props) => /* @__PURE__ */ React8.createElement(
+  ConstantRenderer: (props) => /* @__PURE__ */ React9.createElement(
     CodeEditorMini,
     {
       value: props.value,
@@ -537,7 +625,7 @@ var useTypeManager = () => useOriginTypeManager();
 var JsonSchemaTypePresetProvider = ({
   types = [],
   children
-}) => /* @__PURE__ */ React9.createElement(OriginTypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
+}) => /* @__PURE__ */ React10.createElement(OriginTypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
 
 // src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts
 import {
@@ -571,12 +659,12 @@ function useVariableTree(params) {
   const getVariableTypeIcon = useCallback((variable) => {
     if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
-        return /* @__PURE__ */ React10.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
+        return /* @__PURE__ */ React11.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
       }
       return variable.meta.icon;
     }
     const schema = JsonSchemaUtils2.astToSchema(variable.type, { drilldownObject: false });
-    return /* @__PURE__ */ React10.createElement(Icon, { size: "small", svg: typeManager.getDisplayIcon(schema || {}) });
+    return /* @__PURE__ */ React11.createElement(Icon, { size: "small", svg: typeManager.getDisplayIcon(schema || {}) });
   }, []);
   const renderVariable = (variable, parentFields = []) => {
     let type = variable?.type;
@@ -696,11 +784,11 @@ var VariableSelector = ({
   }, [value]);
   const renderIcon = (icon) => {
     if (typeof icon === "string") {
-      return /* @__PURE__ */ React11.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+      return /* @__PURE__ */ React12.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
     }
     return icon;
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
     UITreeSelect,
     {
       dropdownMatchSelectWidth: false,
@@ -717,10 +805,10 @@ var VariableSelector = ({
       },
       renderSelectedItem: (_option) => {
         if (!_option?.keyPath) {
-          return /* @__PURE__ */ React11.createElement(
+          return /* @__PURE__ */ React12.createElement(
             UITag,
             {
-              prefixIcon: /* @__PURE__ */ React11.createElement(IconIssueStroked, null),
+              prefixIcon: /* @__PURE__ */ React12.createElement(IconIssueStroked, null),
               color: "amber",
               closable: !readonly,
               onClose: () => onChange(void 0)
@@ -729,13 +817,13 @@ var VariableSelector = ({
           );
         }
         const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
-        const rootTitle = /* @__PURE__ */ React11.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? "" : "-"} ` : null);
-        return /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement(
+        const rootTitle = /* @__PURE__ */ React12.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? "" : "-"} ` : null);
+        return /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(
           Popover,
           {
-            content: /* @__PURE__ */ React11.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React11.createElement(UIVarName, null, _option.keyPath.slice(1).join(".")))
+            content: /* @__PURE__ */ React12.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React12.createElement(UIVarName, null, _option.keyPath.slice(1).join(".")))
           },
-          /* @__PURE__ */ React11.createElement(
+          /* @__PURE__ */ React12.createElement(
             UITag,
             {
               prefixIcon: rootIcon,
@@ -743,20 +831,22 @@ var VariableSelector = ({
               onClose: () => onChange(void 0)
             },
             rootTitle,
-            !_option.isRoot && /* @__PURE__ */ React11.createElement(UIVarName, { $inSelector: true }, _option.label)
+            !_option.isRoot && /* @__PURE__ */ React12.createElement(UIVarName, { $inSelector: true }, _option.label)
           )
         ));
       },
       showClear: false,
-      arrowIcon: /* @__PURE__ */ React11.createElement(IconChevronDownStroked, { size: "small" }),
+      arrowIcon: /* @__PURE__ */ React12.createElement(IconChevronDownStroked, { size: "small" }),
       triggerRender,
       placeholder: config?.placeholder ?? I18n7.t("Select Variable")
     }
   ));
 };
+VariableSelector.renderKey = "variable-selector-render-key";
+var InjectVariableSelector = createInjectMaterial(VariableSelector);
 
 // src/components/type-selector/index.tsx
-import React12, { useMemo as useMemo2 } from "react";
+import React13, { useMemo as useMemo2 } from "react";
 import { Cascader, Icon as Icon2, IconButton } from "@douyinfe/semi-ui";
 var labelStyle = { display: "flex", alignItems: "center", gap: 5 };
 var getTypeSelectValue = (value) => {
@@ -781,10 +871,10 @@ function TypeSelector(props) {
     () => typeManager.getTypeRegistriesWithParentType().map((_type) => {
       const isArray2 = _type.type === "array";
       return {
-        label: /* @__PURE__ */ React12.createElement("div", { style: labelStyle }, /* @__PURE__ */ React12.createElement(Icon2, { size: "small", svg: _type.icon }), typeManager.getTypeBySchema(_type)?.label || _type.type),
+        label: /* @__PURE__ */ React13.createElement("div", { style: labelStyle }, /* @__PURE__ */ React13.createElement(Icon2, { size: "small", svg: _type.icon }), typeManager.getTypeBySchema(_type)?.label || _type.type),
         value: _type.type,
         children: isArray2 ? typeManager.getTypeRegistriesWithParentType("array").map((_type2) => ({
-          label: /* @__PURE__ */ React12.createElement("div", { style: labelStyle }, /* @__PURE__ */ React12.createElement(
+          label: /* @__PURE__ */ React13.createElement("div", { style: labelStyle }, /* @__PURE__ */ React13.createElement(
             Icon2,
             {
               size: "small",
@@ -800,12 +890,12 @@ function TypeSelector(props) {
     }),
     []
   );
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Cascader,
     {
       disabled: readonly || disabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ React12.createElement(IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
+      triggerRender: () => /* @__PURE__ */ React13.createElement(IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -815,11 +905,13 @@ function TypeSelector(props) {
     }
   );
 }
+TypeSelector.renderKey = "type-selector-render-key";
+var InjectTypeSelector = createInjectMaterial(TypeSelector);
 
 // src/components/json-schema-editor/index.tsx
-import React17, { useMemo as useMemo5, useState as useState4 } from "react";
-import { I18n as I18n8 } from "@flowgram.ai/editor";
-import { Button, Checkbox, IconButton as IconButton3 } from "@douyinfe/semi-ui";
+import React18, { useMemo as useMemo4, useState as useState3 } from "react";
+import { I18n as I18n9 } from "@flowgram.ai/editor";
+import { Button, Checkbox, IconButton as IconButton2 } from "@douyinfe/semi-ui";
 import {
   IconExpand,
   IconShrink,
@@ -830,7 +922,7 @@ import {
 } from "@douyinfe/semi-icons";
 
 // src/components/json-schema-editor/styles.tsx
-import React13 from "react";
+import React14 from "react";
 import styled3, { css as css2 } from "styled-components";
 import Icon3 from "@douyinfe/semi-icons";
 var UIContainer = styled3.div`
@@ -958,7 +1050,7 @@ var UIRequired = styled3.div``;
 var UIActions = styled3.div`
   white-space: nowrap;
 `;
-var iconAddChildrenSvg = /* @__PURE__ */ React13.createElement(
+var iconAddChildrenSvg = /* @__PURE__ */ React14.createElement(
   "svg",
   {
     className: "icon-icon icon-icon-coz_add_node ",
@@ -968,7 +1060,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ React13.createElement(
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React13.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -976,37 +1068,12 @@ var iconAddChildrenSvg = /* @__PURE__ */ React13.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__ */ React13.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__ */ React14.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__ */ React13.createElement(Icon3, { size: "small", svg: iconAddChildrenSvg });
+var IconAddChildren = () => /* @__PURE__ */ React14.createElement(Icon3, { size: "small", svg: iconAddChildrenSvg });
 var DefaultValueWrapper = styled3.div`
   margin: 0;
 `;
-var JSONViewerWrapper = styled3.div`
-  padding: 0 0 24px;
-  &:first-child {
-    margin-top: 0px;
-  }
-`;
-var JSONHeader = styled3.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 = styled3.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-var JSONHeaderRight = styled3.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
 var ConstantInputWrapper = styled3.div`
   flex-grow: 1;
 
@@ -1018,71 +1085,39 @@ var ConstantInputWrapper = styled3.div`
 `;
 
 // src/components/json-schema-editor/hooks.tsx
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
-import { omit } from "lodash";
+import { useEffect as useEffect2, useState } from "react";
+import { difference, omit } from "lodash";
+import { produce } from "immer";
+import { useTypeManager as useTypeManager2 } from "@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 = useMemo3(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
-  const isDrilldownObject = drilldown.schema?.type === "object";
-  const initPropertyList = useMemo3(
-    () => 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] = useState(initPropertyList);
-  const mountRef = useRef2(false);
+  const typeManager = useTypeManager2();
+  const drilldownSchema = typeManager.getPropertiesParent(value || {});
+  const canAddField = typeManager.canAddField(value || {});
+  const [propertyList, setPropertyList] = useState([]);
   useEffect2(() => {
-    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]);
+    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 = 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);
@@ -1097,18 +1132,21 @@ function usePropertiesEdit(value, onChange) {
           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?.(
+        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 } }
     ]);
@@ -1122,13 +1160,13 @@ function usePropertiesEdit(value, onChange) {
     );
   };
   useEffect2(() => {
-    if (!isDrilldownObject) {
+    if (!canAddField) {
       setPropertyList([]);
     }
-  }, [isDrilldownObject]);
+  }, [canAddField]);
   return {
     propertyList,
-    isDrilldownObject,
+    canAddField,
     onAddProperty,
     onRemoveProperty,
     onEditProperty
@@ -1136,36 +1174,16 @@ function usePropertiesEdit(value, onChange) {
 }
 
 // src/components/json-schema-editor/default-value.tsx
-import React15, { useRef as useRef3, useState as useState2, useCallback as useCallback2 } from "react";
-import { IconButton as IconButton2, JsonViewer, Tooltip } from "@douyinfe/semi-ui";
-import { IconBrackets } from "@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";
-  }
-}
+import React16 from "react";
+import { I18n as I18n8 } from "@flowgram.ai/editor";
 
 // src/components/constant-input/index.tsx
-import React14, { useMemo as useMemo4 } from "react";
+import React15, { useMemo as useMemo3 } from "react";
 import { Input as Input2 } from "@douyinfe/semi-ui";
 function ConstantInput(props) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
   const typeManager = useTypeManager();
-  const Renderer2 = useMemo4(() => {
+  const Renderer2 = useMemo3(() => {
     const strategy = (strategies || []).find((_strategy) => _strategy.hit(schema));
     if (!strategy) {
       return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
@@ -1174,110 +1192,41 @@ function ConstantInput(props) {
   }, [strategies, schema]);
   if (!Renderer2) {
     if (fallbackRenderer) {
-      return React14.createElement(fallbackRenderer, {
+      return React15.createElement(fallbackRenderer, {
         value,
         onChange,
         readonly,
         ...rest
       });
     }
-    return /* @__PURE__ */ React14.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
+    return /* @__PURE__ */ React15.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ React14.createElement(Renderer2, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ React15.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 = useRef3(null);
-  const JsonViewerRef = useRef3(null);
-  const [internalJsonValue, setInternalJsonValue] = useState2(
-    getValueType(value) === "string" ? value : ""
-  );
-  const handleJsonChange = useCallback2((val) => {
-    if (val !== internalJsonValue) {
-      setInternalJsonValue(val);
-    }
-  }, []);
-  const handleEditComplete = useCallback2(() => {
-    onChange(internalJsonValue);
-    requestAnimationFrame(() => {
-      wrapperRef.current?.blur();
-    });
-    setJsonReadOnly(true);
-  }, [internalJsonValue, onChange]);
-  const [jsonReadOnly, setJsonReadOnly] = useState2(true);
-  const handleFormatJson = useCallback2(() => {
-    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__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(JSONHeader, null, /* @__PURE__ */ React15.createElement(JSONHeaderLeft, null, "json"), /* @__PURE__ */ React15.createElement(JSONHeaderRight, null, /* @__PURE__ */ React15.createElement(Tooltip, { content: jsonFormatText ?? "Format" }, /* @__PURE__ */ React15.createElement(
-    IconButton2,
-    {
-      icon: /* @__PURE__ */ React15.createElement(IconBrackets, { style: { color: "var(--semi-color-primary)" } }),
-      size: "small",
-      type: "tertiary",
-      theme: "borderless",
-      onClick: handleFormatJson
-    }
-  )))), /* @__PURE__ */ React15.createElement(
-    JSONViewerWrapper,
-    {
-      ref: wrapperRef,
-      tabIndex: -1,
-      onBlur: (e) => {
-        if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget)) {
-          handleEditComplete();
-        }
-      },
-      onClick: (e) => {
-        setJsonReadOnly(false);
-      }
-    },
-    /* @__PURE__ */ React15.createElement(
-      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__ */ React15.createElement(ConstantInputWrapper, null, /* @__PURE__ */ React15.createElement(
+  const { value, schema, onChange, placeholder } = props;
+  return /* @__PURE__ */ React16.createElement(ConstantInputWrapper, null, /* @__PURE__ */ React16.createElement(
     ConstantInput,
     {
       value,
       onChange: (_v) => onChange(_v),
       schema: schema || { type: "string" },
-      placeholder: placeholder ?? "Default value if parameter is not provided"
+      placeholder: placeholder ?? I18n8.t("Default value if parameter is not provided")
     }
   ));
 }
 
 // src/components/json-schema-editor/components/blur-input.tsx
-import React16, { useEffect as useEffect3, useState as useState3 } from "react";
+import React17, { useEffect as useEffect3, useState as useState2 } from "react";
 import Input3 from "@douyinfe/semi-ui/lib/es/input";
 function BlurInput(props) {
-  const [value, setValue] = useState3("");
+  const [value, setValue] = useState2("");
   useEffect3(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     Input3,
     {
       ...props,
@@ -1291,13 +1240,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__ */ React17.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ React17.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ React18.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ React18.createElement(
     PropertyEdit,
     {
       readonly,
@@ -1312,16 +1262,16 @@ function JsonSchemaEditor(props) {
         onRemoveProperty(_property.key);
       }
     }
-  ))), /* @__PURE__ */ React17.createElement(
+  ))), /* @__PURE__ */ React18.createElement(
     Button,
     {
       disabled: readonly,
       size: "small",
       style: { marginTop: 10, marginLeft: 16 },
-      icon: /* @__PURE__ */ React17.createElement(IconPlus, null),
+      icon: /* @__PURE__ */ React18.createElement(IconPlus, null),
       onClick: onAddProperty
     },
-    config?.addButtonText ?? "Add"
+    config?.addButtonText ?? I18n9.t("Add")
   ));
 }
 function PropertyEdit(props) {
@@ -1339,19 +1289,19 @@ function PropertyEdit(props) {
     $parentType = "",
     $showLine
   } = props;
-  const [expand, setExpand] = useState4(false);
-  const [collapse, setCollapse] = useState4(false);
+  const [expand, setExpand] = useState3(false);
+  const [collapse, setCollapse] = useState3(false);
   const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
-  const typeSelectorValue = useMemo5(() => ({ type, items }), [type, items]);
-  const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
+  const typeSelectorValue = useMemo4(() => ({ 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__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+  const showCollapse = canAddField && propertyList.length > 0;
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     UIPropertyLeft,
     {
       type,
@@ -1363,8 +1313,8 @@ function PropertyEdit(props) {
       $parentExpand,
       $parentType
     },
-    showCollapse && /* @__PURE__ */ React17.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React17.createElement(IconChevronDown, { size: "small" }) : /* @__PURE__ */ React17.createElement(IconChevronRight, { size: "small" }))
-  ), /* @__PURE__ */ React17.createElement(UIPropertyRight, null, /* @__PURE__ */ React17.createElement(
+    showCollapse && /* @__PURE__ */ React18.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React18.createElement(IconChevronDown, { size: "small" }) : /* @__PURE__ */ React18.createElement(IconChevronRight, { size: "small" }))
+  ), /* @__PURE__ */ React18.createElement(UIPropertyRight, null, /* @__PURE__ */ React18.createElement(
     UIPropertyMain,
     {
       $showCollapse: showCollapse,
@@ -1372,7 +1322,7 @@ function PropertyEdit(props) {
       $expand: expand,
       type
     },
-    /* @__PURE__ */ React17.createElement(UIRow, null, /* @__PURE__ */ React17.createElement(UIName, null, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(UIRow, null, /* @__PURE__ */ React18.createElement(UIName, null, /* @__PURE__ */ React18.createElement(
       BlurInput,
       {
         disabled: readonly,
@@ -1381,8 +1331,8 @@ function PropertyEdit(props) {
         value: name,
         onChange: (value2) => onChange("name", value2)
       }
-    )), /* @__PURE__ */ React17.createElement(UIType, null, /* @__PURE__ */ React17.createElement(
-      TypeSelector,
+    )), /* @__PURE__ */ React18.createElement(UIType, null, /* @__PURE__ */ React18.createElement(
+      InjectTypeSelector,
       {
         value: typeSelectorValue,
         readonly,
@@ -1393,67 +1343,67 @@ function PropertyEdit(props) {
           });
         }
       }
-    )), /* @__PURE__ */ React17.createElement(UIRequired, null, /* @__PURE__ */ React17.createElement(
+    )), /* @__PURE__ */ React18.createElement(UIRequired, null, /* @__PURE__ */ React18.createElement(
       Checkbox,
       {
         disabled: readonly,
         checked: isPropertyRequired,
         onChange: (e) => onChange("isPropertyRequired", e.target.checked)
       }
-    )), /* @__PURE__ */ React17.createElement(UIActions, null, /* @__PURE__ */ React17.createElement(
-      IconButton3,
+    )), /* @__PURE__ */ React18.createElement(UIActions, null, /* @__PURE__ */ React18.createElement(
+      IconButton2,
       {
         disabled: readonly,
         size: "small",
         theme: "borderless",
-        icon: expand ? /* @__PURE__ */ React17.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React17.createElement(IconExpand, { size: "small" }),
+        icon: expand ? /* @__PURE__ */ React18.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React18.createElement(IconExpand, { size: "small" }),
         onClick: () => {
           setExpand((_expand) => !_expand);
         }
       }
-    ), isDrilldownObject && /* @__PURE__ */ React17.createElement(
-      IconButton3,
+    ), canAddField && /* @__PURE__ */ React18.createElement(
+      IconButton2,
       {
         disabled: readonly,
         size: "small",
         theme: "borderless",
-        icon: /* @__PURE__ */ React17.createElement(IconAddChildren, null),
+        icon: /* @__PURE__ */ React18.createElement(IconAddChildren, null),
         onClick: () => {
           onAddProperty();
           setCollapse(true);
         }
       }
-    ), /* @__PURE__ */ React17.createElement(
-      IconButton3,
+    ), /* @__PURE__ */ React18.createElement(
+      IconButton2,
       {
         disabled: readonly,
         size: "small",
         theme: "borderless",
-        icon: /* @__PURE__ */ React17.createElement(IconMinus, { size: "small" }),
+        icon: /* @__PURE__ */ React18.createElement(IconMinus, { size: "small" }),
         onClick: onRemove
       }
     ))),
-    expand && /* @__PURE__ */ React17.createElement(UIExpandDetail, null, /* @__PURE__ */ React17.createElement(UILabel, null, config?.descTitle ?? I18n8.t("Description")), /* @__PURE__ */ React17.createElement(
+    expand && /* @__PURE__ */ React18.createElement(UIExpandDetail, null, /* @__PURE__ */ React18.createElement(UILabel, null, config?.descTitle ?? I18n9.t("Description")), /* @__PURE__ */ React18.createElement(
       BlurInput,
       {
         disabled: readonly,
         size: "small",
         value: description,
         onChange: (value2) => onChange("description", value2),
-        placeholder: config?.descPlaceholder ?? I18n8.t("Help LLM to understand the property")
+        placeholder: config?.descPlaceholder ?? I18n9.t("Help LLM to understand the property")
       }
-    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? I18n8.t("Default Value")), /* @__PURE__ */ React17.createElement(DefaultValueWrapper, null, /* @__PURE__ */ React17.createElement(
+    ), $level === 0 && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? I18n9.t("Default Value")), /* @__PURE__ */ React18.createElement(DefaultValueWrapper, null, /* @__PURE__ */ React18.createElement(
       DefaultValue,
       {
         value: defaultValue,
         schema: value,
         type,
-        placeholder: config?.defaultValuePlaceholder ?? I18n8.t("Default Value"),
+        placeholder: config?.defaultValuePlaceholder ?? I18n9.t("Default Value"),
         jsonFormatText: config?.jsonFormatText,
         onChange: (value2) => onChange("default", value2)
       }
     ))))
-  ), showCollapse && /* @__PURE__ */ React17.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React17.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React17.createElement(
+  ), showCollapse && /* @__PURE__ */ React18.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React18.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React18.createElement(
     PropertyEdit,
     {
       readonly,
@@ -1478,20 +1428,20 @@ function PropertyEdit(props) {
 }
 
 // src/components/batch-variable-selector/index.tsx
-import React18 from "react";
+import React19 from "react";
 import { PrivateScopeProvider } from "@flowgram.ai/editor";
 var batchVariableSchema = {
   type: "array",
   extra: { weak: true }
 };
 function BatchVariableSelector(props) {
-  return /* @__PURE__ */ React18.createElement(PrivateScopeProvider, null, /* @__PURE__ */ React18.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+  return /* @__PURE__ */ React19.createElement(PrivateScopeProvider, null, /* @__PURE__ */ React19.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/dynamic-value-input/index.tsx
-import React19 from "react";
+import React20 from "react";
 import { JsonSchemaUtils as JsonSchemaUtils3 } from "@flowgram.ai/json-schema";
-import { IconButton as IconButton4 } from "@douyinfe/semi-ui";
+import { IconButton as IconButton3 } from "@douyinfe/semi-ui";
 import { IconSetting } from "@douyinfe/semi-icons";
 
 // src/components/dynamic-value-input/styles.tsx
@@ -1540,11 +1490,11 @@ var UITrigger = styled4.div`
 `;
 
 // src/components/dynamic-value-input/hooks.ts
-import { useMemo as useMemo6, useState as useState5 } from "react";
+import { useMemo as useMemo5, useState as useState4 } from "react";
 import { useScopeAvailable } from "@flowgram.ai/editor";
 function useRefVariable(value) {
   const available = useScopeAvailable();
-  const refVariable = useMemo6(() => {
+  const refVariable = useMemo5(() => {
     if (value?.type === "ref") {
       return available.getByKeyPath(value.content);
     }
@@ -1556,11 +1506,11 @@ function useSelectSchema(schemaFromProps, constantProps, value) {
   if (value?.type === "constant") {
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
-  const [selectSchema, setSelectSchema] = useState5(defaultSelectSchema);
+  const [selectSchema, setSelectSchema] = useState4(defaultSelectSchema);
   return [selectSchema, setSelectSchema];
 }
 function useIncludeSchema(schemaFromProps) {
-  const includeSchema = useMemo6(() => {
+  const includeSchema = useMemo5(() => {
     if (!schemaFromProps) {
       return;
     }
@@ -1586,13 +1536,13 @@ function DynamicValueInput({
   const includeSchema = useIncludeSchema(schemaFromProps);
   const renderTypeSelector = () => {
     if (schemaFromProps) {
-      return /* @__PURE__ */ React19.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
+      return /* @__PURE__ */ React20.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
     }
     if (value?.type === "ref") {
       const schema = refVariable?.type ? JsonSchemaUtils3.astToSchema(refVariable?.type) : void 0;
-      return /* @__PURE__ */ React19.createElement(TypeSelector, { value: schema, readonly: true });
+      return /* @__PURE__ */ React20.createElement(TypeSelector, { value: schema, readonly: true });
     }
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       TypeSelector,
       {
         value: selectSchema,
@@ -1620,8 +1570,8 @@ function DynamicValueInput({
   };
   const renderMain = () => {
     if (value?.type === "ref") {
-      return /* @__PURE__ */ React19.createElement(
-        VariableSelector,
+      return /* @__PURE__ */ React20.createElement(
+        InjectVariableSelector,
         {
           style: { width: "100%" },
           value: value?.content,
@@ -1632,7 +1582,7 @@ function DynamicValueInput({
       );
     }
     const constantSchema = schemaFromProps || selectSchema || { type: "string" };
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       ConstantInput,
       {
         value: value?.content,
@@ -1640,8 +1590,8 @@ function DynamicValueInput({
         schema: constantSchema || { type: "string" },
         readonly,
         strategies: [...constantProps?.strategies || []],
-        fallbackRenderer: () => /* @__PURE__ */ React19.createElement(
-          VariableSelector,
+        fallbackRenderer: () => /* @__PURE__ */ React20.createElement(
+          InjectVariableSelector,
           {
             style: { width: "100%" },
             onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
@@ -1653,23 +1603,25 @@ function DynamicValueInput({
       }
     );
   };
-  const renderTrigger = () => /* @__PURE__ */ React19.createElement(
-    VariableSelector,
+  const renderTrigger = () => /* @__PURE__ */ React20.createElement(
+    InjectVariableSelector,
     {
       style: { width: "100%" },
       value: value?.type === "ref" ? value?.content : void 0,
       onChange: (_v) => onChange({ type: "ref", content: _v }),
       includeSchema,
       readonly,
-      triggerRender: () => /* @__PURE__ */ React19.createElement(IconButton4, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React19.createElement(IconSetting, { size: "small" }) })
+      triggerRender: () => /* @__PURE__ */ React20.createElement(IconButton3, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React20.createElement(IconSetting, { size: "small" }) })
     }
   );
-  return /* @__PURE__ */ React19.createElement(UIContainer2, { style }, /* @__PURE__ */ React19.createElement(UIType2, null, renderTypeSelector()), /* @__PURE__ */ React19.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React19.createElement(UITrigger, null, renderTrigger()));
+  return /* @__PURE__ */ React20.createElement(UIContainer2, { style }, /* @__PURE__ */ React20.createElement(UIType2, null, renderTypeSelector()), /* @__PURE__ */ React20.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React20.createElement(UITrigger, null, renderTrigger()));
 }
+DynamicValueInput.renderKey = "dynamic-value-input-render-key";
+var InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);
 
 // src/components/condition-row/index.tsx
-import React21, { useMemo as useMemo9 } from "react";
-import { I18n as I18n10 } from "@flowgram.ai/editor";
+import React22, { useMemo as useMemo8 } from "react";
+import { I18n as I18n11 } from "@flowgram.ai/editor";
 import { Input as Input4 } from "@douyinfe/semi-ui";
 
 // src/components/condition-row/styles.tsx
@@ -1695,7 +1647,7 @@ var UIValues = styled5.div`
 `;
 
 // src/components/condition-row/hooks/useRule.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { JsonSchemaUtils as JsonSchemaUtils4 } from "@flowgram.ai/json-schema";
 import { useScopeAvailable as useScopeAvailable2 } from "@flowgram.ai/editor";
 
@@ -1822,12 +1774,12 @@ var defaultOpConfigs = {
 // src/components/condition-row/hooks/useRule.ts
 function useRule(left, userRules) {
   const available = useScopeAvailable2();
-  const rules = useMemo7(() => ({ ...defaultRules, ...userRules || {} }), [userRules]);
-  const variable = useMemo7(() => {
+  const rules = useMemo6(() => ({ ...defaultRules, ...userRules || {} }), [userRules]);
+  const variable = useMemo6(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
   }, [available, left]);
-  const rule = useMemo7(() => {
+  const rule = useMemo6(() => {
     if (!variable) return void 0;
     const schema = JsonSchemaUtils4.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
@@ -1836,22 +1788,22 @@ function useRule(left, userRules) {
 }
 
 // src/components/condition-row/hooks/useOp.tsx
-import React20, { useMemo as useMemo8 } from "react";
-import { I18n as I18n9 } from "@flowgram.ai/editor";
+import React21, { useMemo as useMemo7 } from "react";
+import { I18n as I18n10 } from "@flowgram.ai/editor";
 import { Button as Button2, Select as Select2 } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked as IconChevronDownStroked2 } from "@douyinfe/semi-icons";
 function useOp({ rule, op, onChange, readonly, userOps }) {
-  const options = useMemo8(
+  const options = useMemo7(
     () => Object.keys(rule || {}).map((_op) => ({
       ...defaultOpConfigs[_op] || {},
       ...userOps?.[_op] || {},
       value: _op,
-      label: I18n9.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
+      label: I18n10.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
     })),
     [rule, userOps]
   );
-  const opConfig = useMemo8(() => defaultOpConfigs[op], [op]);
-  const renderOpSelect = () => /* @__PURE__ */ React20.createElement(
+  const opConfig = useMemo7(() => defaultOpConfigs[op], [op]);
+  const renderOpSelect = () => /* @__PURE__ */ React21.createElement(
     Select2,
     {
       style: { height: 22 },
@@ -1862,7 +1814,7 @@ function useOp({ rule, op, onChange, readonly, userOps }) {
       onChange: (v) => {
         onChange(v);
       },
-      triggerRender: ({ value }) => /* @__PURE__ */ React20.createElement(Button2, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ React20.createElement(IconChevronDownStroked2, { size: "small" }))
+      triggerRender: ({ value }) => /* @__PURE__ */ React21.createElement(Button2, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ React21.createElement(IconChevronDownStroked2, { size: "small" }))
     }
   );
   return { renderOpSelect, opConfig };
@@ -1889,12 +1841,12 @@ function ConditionRow({
     readonly,
     userOps: ruleConfig.ops
   });
-  const targetSchema = useMemo9(() => {
+  const targetSchema = useMemo8(() => {
     const targetType = rule?.[operator || ""] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
-  return /* @__PURE__ */ React21.createElement(UIContainer3, { style }, /* @__PURE__ */ React21.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ React21.createElement(UIValues, null, /* @__PURE__ */ React21.createElement(UILeft, null, /* @__PURE__ */ React21.createElement(
-    VariableSelector,
+  return /* @__PURE__ */ React22.createElement(UIContainer3, { style }, /* @__PURE__ */ React22.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ React22.createElement(UIValues, null, /* @__PURE__ */ React22.createElement(UILeft, null, /* @__PURE__ */ React22.createElement(
+    InjectVariableSelector,
     {
       readonly,
       style: { width: "100%" },
@@ -1907,34 +1859,34 @@ function ConditionRow({
         }
       })
     }
-  )), /* @__PURE__ */ React21.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ React21.createElement(
-    DynamicValueInput,
+  )), /* @__PURE__ */ React22.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ React22.createElement(
+    InjectDynamicValueInput,
     {
       readonly: readonly || !rule,
       value: right,
       schema: targetSchema,
       onChange: (v) => onChange({ ...value, right: v })
     }
-  ) : /* @__PURE__ */ React21.createElement(
+  ) : /* @__PURE__ */ React22.createElement(
     Input4,
     {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: opConfig?.rightDisplay || I18n10.t("Empty")
+      value: opConfig?.rightDisplay || I18n11.t("Empty")
     }
   ))));
 }
 
 // src/components/batch-outputs/index.tsx
-import React22 from "react";
+import React23 from "react";
 import { Button as Button3, Input as Input5 } from "@douyinfe/semi-ui";
 import { IconDelete, IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
 
 // src/hooks/use-object-list/index.tsx
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { nanoid } from "nanoid";
-import { difference, get, isObject, set } from "lodash";
+import { difference as difference2, get, isObject as isObject2, set } from "lodash";
 function genId2() {
   return nanoid();
 }
@@ -1943,12 +1895,12 @@ function useObjectList({
   onChange,
   sortIndexKey
 }) {
-  const [list, setList] = useState6([]);
+  const [list, setList] = useState5([]);
   useEffect4(() => {
     setList((_prevList) => {
       const newKeys = Object.entries(value || {}).sort((a, b) => get(a[1], sortIndexKey || 0) - get(b[1], sortIndexKey || 0)).map(([key]) => key);
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean);
-      const addKeys = difference(newKeys, oldKeys);
+      const addKeys = difference2(newKeys, oldKeys);
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
         id: item.id,
         key: item.key,
@@ -1984,7 +1936,7 @@ function useObjectList({
       onChange(
         Object.fromEntries(
           nextList.filter((item) => item.key).map((item) => [item.key, item.value]).map((_res, idx) => {
-            if (isObject(_res[1]) && sortIndexKey) {
+            if (isObject2(_res[1]) && sortIndexKey) {
               set(_res[1], sortIndexKey, idx);
             }
             return _res;
@@ -2045,7 +1997,7 @@ var UIRow2 = styled6.div`
 function BatchOutputs(props) {
   const { readonly, style } = props;
   const { list, add, updateKey, updateValue, remove } = useObjectList(props);
-  return /* @__PURE__ */ React22.createElement("div", null, /* @__PURE__ */ React22.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ React22.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ React23.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ React23.createElement(
     Input5,
     {
       style: { width: 100 },
@@ -2054,27 +2006,27 @@ function BatchOutputs(props) {
       value: item.key,
       onChange: (v) => updateKey(item.id, v)
     }
-  ), /* @__PURE__ */ React22.createElement(
-    VariableSelector,
+  ), /* @__PURE__ */ React23.createElement(
+    InjectVariableSelector,
     {
       style: { flexGrow: 1 },
       readonly,
       value: item.value?.content,
       onChange: (v) => updateValue(item.id, { type: "ref", content: v })
     }
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     Button3,
     {
       disabled: readonly,
-      icon: /* @__PURE__ */ React22.createElement(IconDelete, null),
+      icon: /* @__PURE__ */ React23.createElement(IconDelete, null),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React22.createElement(Button3, { disabled: readonly, icon: /* @__PURE__ */ React22.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ React23.createElement(Button3, { disabled: readonly, icon: /* @__PURE__ */ React23.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/components/prompt-editor/index.tsx
-import React23, { useEffect as useEffect5, useRef as useRef4 } from "react";
+import React24, { useEffect as useEffect5, useRef as useRef2 } from "react";
 import { Renderer, EditorProvider as EditorProvider2, ActiveLinePlaceholder as ActiveLinePlaceholder2 } from "@coze-editor/editor/react";
 import preset2 from "@coze-editor/editor/preset-prompt";
 
@@ -2218,13 +2170,13 @@ function PromptEditor(props) {
     children,
     disableMarkdownHighlight
   } = props || {};
-  const editorRef = useRef4(null);
+  const editorRef = useRef2(null);
   useEffect5(() => {
     if (editorRef.current?.getValue() !== value?.content) {
       editorRef.current?.setValue(String(value?.content || ""));
     }
   }, [value]);
-  return /* @__PURE__ */ React23.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ React23.createElement(EditorProvider2, null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ React24.createElement(EditorProvider2, null, /* @__PURE__ */ React24.createElement(
     Renderer,
     {
       didMount: (editor) => {
@@ -2241,14 +2193,14 @@ function PromptEditor(props) {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), activeLinePlaceholder && /* @__PURE__ */ React23.createElement(ActiveLinePlaceholder2, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ React23.createElement(markdown_default, null), /* @__PURE__ */ React23.createElement(language_support_default, null), /* @__PURE__ */ React23.createElement(jinja_default, null), children));
+  ), activeLinePlaceholder && /* @__PURE__ */ React24.createElement(ActiveLinePlaceholder2, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ React24.createElement(markdown_default, null), /* @__PURE__ */ React24.createElement(language_support_default, null), /* @__PURE__ */ React24.createElement(jinja_default, null), children));
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
-import React26 from "react";
+import React27 from "react";
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
-import React24, { useEffect as useEffect6, useState as useState7 } from "react";
+import React25, { useEffect as useEffect6, useState as useState6 } from "react";
 import { Popover as Popover2, Tree } from "@douyinfe/semi-ui";
 import {
   Mention,
@@ -2257,9 +2209,9 @@ import {
   PositionMirror
 } from "@coze-editor/editor/react";
 function VariableTree() {
-  const [posKey, setPosKey] = useState7("");
-  const [visible, setVisible] = useState7(false);
-  const [position, setPosition] = useState7(-1);
+  const [posKey, setPosKey] = useState6("");
+  const [visible, setVisible] = useState6(false);
+  const [position, setPosition] = useState6(-1);
   const editor = useEditor();
   function insert(variablePath) {
     const range = getCurrentMentionReplaceRange(editor.$view.state);
@@ -2282,14 +2234,14 @@ function VariableTree() {
     }
   }, [editor, visible]);
   const treeData = useVariableTree({});
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React25.createElement(
     Popover2,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
-      content: /* @__PURE__ */ React24.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React24.createElement(
+      content: /* @__PURE__ */ React25.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React25.createElement(
         Tree,
         {
           treeData,
@@ -2299,7 +2251,7 @@ function VariableTree() {
         }
       ))
     },
-    /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(
       PositionMirror,
       {
         position,
@@ -2311,7 +2263,7 @@ function VariableTree() {
 
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
 import ReactDOM from "react-dom";
-import React25, { useLayoutEffect as useLayoutEffect4 } from "react";
+import React26, { useLayoutEffect as useLayoutEffect4 } from "react";
 import { isEqual, last } from "lodash";
 import {
   Disposable,
@@ -2373,7 +2325,7 @@ var VariableTagWidget = class extends WidgetType {
     this.toDispose = new DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
-        return /* @__PURE__ */ React25.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+        return /* @__PURE__ */ React26.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
       }
       return icon;
     };
@@ -2386,21 +2338,21 @@ var VariableTagWidget = class extends WidgetType {
   renderVariable(v) {
     if (!v) {
       this.renderReact(
-        /* @__PURE__ */ React25.createElement(UITag2, { prefixIcon: /* @__PURE__ */ React25.createElement(IconIssueStroked2, null), color: "amber" }, "Unknown")
+        /* @__PURE__ */ React26.createElement(UITag2, { prefixIcon: /* @__PURE__ */ React26.createElement(IconIssueStroked2, null), color: "amber" }, "Unknown")
       );
       return;
     }
     const rootField = last(v.parentFields) || v;
     const isRoot = v.parentFields.length === 0;
-    const rootTitle = /* @__PURE__ */ React25.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
+    const rootTitle = /* @__PURE__ */ React26.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.renderReact(
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement(
         Popover3,
         {
-          content: /* @__PURE__ */ React25.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React25.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ React26.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React26.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ React25.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ React25.createElement(UIVarName2, null, v?.key))
+        /* @__PURE__ */ React26.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ React26.createElement(UIVarName2, null, v?.key))
       )
     );
   }
@@ -2474,14 +2426,14 @@ function VariableTagInject() {
 
 // src/components/prompt-editor-with-variables/index.tsx
 function PromptEditorWithVariables(props) {
-  return /* @__PURE__ */ React26.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React26.createElement(VariableTree, null), /* @__PURE__ */ React26.createElement(VariableTagInject, null));
+  return /* @__PURE__ */ React27.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React27.createElement(VariableTree, null), /* @__PURE__ */ React27.createElement(VariableTagInject, null));
 }
 
 // src/components/prompt-editor-with-inputs/index.tsx
-import React29 from "react";
+import React30 from "react";
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
-import React28, { useEffect as useEffect7, useState as useState8 } from "react";
+import React29, { useEffect as useEffect7, useState as useState7 } from "react";
 import { Popover as Popover4 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention2,
@@ -2491,7 +2443,7 @@ import {
 } from "@coze-editor/editor/react";
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
-import React27, { useMemo as useMemo10 } from "react";
+import React28, { useMemo as useMemo9 } from "react";
 import { last as last2 } from "lodash";
 import {
   ASTMatch as ASTMatch3,
@@ -2535,7 +2487,7 @@ function InputsPicker({
       children
     };
   };
-  const treeData = useMemo10(
+  const treeData = useMemo9(
     () => Object.entries(inputsValues).map(([key, value]) => {
       if (value?.type === "ref") {
         const variable = available.getByKeyPath(value.content || []);
@@ -2551,14 +2503,14 @@ function InputsPicker({
     }),
     []
   );
-  return /* @__PURE__ */ React27.createElement(Tree2, { treeData, onSelect: (v) => onSelect(v) });
+  return /* @__PURE__ */ React28.createElement(Tree2, { treeData, onSelect: (v) => onSelect(v) });
 }
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
 function InputsTree({ inputsValues }) {
-  const [posKey, setPosKey] = useState8("");
-  const [visible, setVisible] = useState8(false);
-  const [position, setPosition] = useState8(-1);
+  const [posKey, setPosKey] = useState7("");
+  const [visible, setVisible] = useState7(false);
+  const [position, setPosition] = useState7(-1);
   const editor = useEditor2();
   function insert(variablePath) {
     const range = getCurrentMentionReplaceRange2(editor.$view.state);
@@ -2580,14 +2532,14 @@ function InputsTree({ inputsValues }) {
       return;
     }
   }, [editor, visible]);
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Mention2, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Mention2, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React29.createElement(
     Popover4,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
-      content: /* @__PURE__ */ React28.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React28.createElement(
+      content: /* @__PURE__ */ React29.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React29.createElement(
         InputsPicker,
         {
           inputsValues,
@@ -2597,7 +2549,7 @@ function InputsTree({ inputsValues }) {
         }
       ))
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       PositionMirror2,
       {
         position,
@@ -2609,15 +2561,15 @@ function InputsTree({ inputsValues }) {
 
 // src/components/prompt-editor-with-inputs/index.tsx
 function PromptEditorWithInputs({ inputsValues, ...restProps }) {
-  return /* @__PURE__ */ React29.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ React29.createElement(InputsTree, { inputsValues }));
+  return /* @__PURE__ */ React30.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ React30.createElement(InputsTree, { inputsValues }));
 }
 
 // src/components/json-editor-with-variables/index.tsx
-import React32 from "react";
+import React33 from "react";
 import { transformerCreator } from "@coze-editor/editor/preset-code";
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
-import React30, { useEffect as useEffect8, useState as useState9 } from "react";
+import React31, { useEffect as useEffect8, useState as useState8 } from "react";
 import { Popover as Popover5, Tree as Tree3 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention3,
@@ -2626,9 +2578,9 @@ import {
   PositionMirror as PositionMirror3
 } from "@coze-editor/editor/react";
 function VariableTree2() {
-  const [posKey, setPosKey] = useState9("");
-  const [visible, setVisible] = useState9(false);
-  const [position, setPosition] = useState9(-1);
+  const [posKey, setPosKey] = useState8("");
+  const [visible, setVisible] = useState8(false);
+  const [position, setPosition] = useState8(-1);
   const editor = useEditor3();
   function insert(variablePath) {
     const range = getCurrentMentionReplaceRange3(editor.$view.state);
@@ -2651,14 +2603,14 @@ function VariableTree2() {
     }
   }, [editor, visible]);
   const treeData = useVariableTree({});
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Mention3, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Mention3, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React31.createElement(
     Popover5,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
-      content: /* @__PURE__ */ React30.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React30.createElement(
+      content: /* @__PURE__ */ React31.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React31.createElement(
         Tree3,
         {
           treeData,
@@ -2668,7 +2620,7 @@ function VariableTree2() {
         }
       ))
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       PositionMirror3,
       {
         position,
@@ -2679,7 +2631,7 @@ function VariableTree2() {
 }
 
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
-import React31, { useLayoutEffect as useLayoutEffect5 } from "react";
+import React32, { useLayoutEffect as useLayoutEffect5 } from "react";
 import { createRoot } from "react-dom/client";
 import { isEqual as isEqual2, last as last3 } from "lodash";
 import {
@@ -2742,7 +2694,7 @@ var VariableTagWidget2 = class extends WidgetType2 {
     this.toDispose = new DisposableCollection2();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
-        return /* @__PURE__ */ React31.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+        return /* @__PURE__ */ React32.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
       }
       return icon;
     };
@@ -2752,20 +2704,20 @@ var VariableTagWidget2 = class extends WidgetType2 {
   renderVariable(v) {
     if (!v) {
       this.root.render(
-        /* @__PURE__ */ React31.createElement(UITag3, { prefixIcon: /* @__PURE__ */ React31.createElement(IconIssueStroked3, null), color: "amber" }, "Unknown")
+        /* @__PURE__ */ React32.createElement(UITag3, { prefixIcon: /* @__PURE__ */ React32.createElement(IconIssueStroked3, null), color: "amber" }, "Unknown")
       );
       return;
     }
     const rootField = last3(v.parentFields);
-    const rootTitle = /* @__PURE__ */ React31.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootTitle = /* @__PURE__ */ React32.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.root.render(
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(
         Popover6,
         {
-          content: /* @__PURE__ */ React31.createElement(UIPopoverContent3, null, rootIcon, rootTitle, /* @__PURE__ */ React31.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ React32.createElement(UIPopoverContent3, null, rootIcon, rootTitle, /* @__PURE__ */ React32.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ React31.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React31.createElement(UIVarName3, null, v?.key))
+        /* @__PURE__ */ React32.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React32.createElement(UIVarName3, null, v?.key))
       )
     );
   }
@@ -2867,7 +2819,7 @@ var transformer = transformerCreator((text) => {
   return text;
 });
 function JsonEditorWithVariables(props) {
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(
     CodeEditor,
     {
       languageId: "json",
@@ -2878,14 +2830,15 @@ function JsonEditorWithVariables(props) {
         ...props.options || {}
       }
     },
-    /* @__PURE__ */ React32.createElement(VariableTree2, null),
-    /* @__PURE__ */ React32.createElement(VariableTagInject2, null)
+    /* @__PURE__ */ React33.createElement(VariableTree2, null),
+    /* @__PURE__ */ React33.createElement(VariableTagInject2, null)
   );
 }
 
 // src/components/inputs-values/index.tsx
-import React34 from "react";
-import { Button as Button4, IconButton as IconButton5 } from "@douyinfe/semi-ui";
+import React35 from "react";
+import { I18n as I18n12 } from "@flowgram.ai/editor";
+import { Button as Button4, IconButton as IconButton4 } from "@douyinfe/semi-ui";
 import { IconDelete as IconDelete2, IconPlus as IconPlus3 } from "@douyinfe/semi-icons";
 
 // src/components/inputs-values/styles.tsx
@@ -2903,14 +2856,14 @@ var UIRow3 = styled10.div`
 `;
 
 // src/components/inputs-values/components/blur-input.tsx
-import React33, { useEffect as useEffect9, useState as useState10 } from "react";
+import React34, { useEffect as useEffect9, useState as useState9 } from "react";
 import Input6 from "@douyinfe/semi-ui/lib/es/input";
 function BlurInput2(props) {
-  const [value, setValue] = useState10("");
+  const [value, setValue] = useState9("");
   useEffect9(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     Input6,
     {
       ...props,
@@ -2938,7 +2891,7 @@ function InputsValues({
     onChange,
     sortIndexKey: "extra.index"
   });
-  return /* @__PURE__ */ React34.createElement("div", null, /* @__PURE__ */ React34.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React34.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React35.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React35.createElement(
     BlurInput2,
     {
       style: { width: 100, minWidth: 100, maxWidth: 100 },
@@ -2946,10 +2899,10 @@ function InputsValues({
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: "Input Key"
+      placeholder: I18n12.t("Input Key")
     }
-  ), /* @__PURE__ */ React34.createElement(
-    DynamicValueInput,
+  ), /* @__PURE__ */ React35.createElement(
+    InjectDynamicValueInput,
     {
       style: { flexGrow: 1 },
       readonly,
@@ -2962,20 +2915,20 @@ function InputsValues({
         strategies: [...constantProps?.strategies || []]
       }
     }
-  ), /* @__PURE__ */ React34.createElement(
-    IconButton5,
+  ), /* @__PURE__ */ React35.createElement(
+    IconButton4,
     {
       disabled: readonly,
       theme: "borderless",
-      icon: /* @__PURE__ */ React34.createElement(IconDelete2, { size: "small" }),
+      icon: /* @__PURE__ */ React35.createElement(IconDelete2, { size: "small" }),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React34.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React34.createElement(IconPlus3, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ React35.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React35.createElement(IconPlus3, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/components/display-schema-tree/index.tsx
-import React35 from "react";
+import React36 from "react";
 
 // src/components/display-schema-tree/styles.tsx
 import styled11, { css as css4 } from "styled-components";
@@ -3059,7 +3012,7 @@ var TreeItem = styled11.div`
 
 // src/components/display-schema-tree/index.tsx
 function DisplaySchemaTree(props) {
-  return /* @__PURE__ */ React35.createElement(SchemaTree, { ...props });
+  return /* @__PURE__ */ React36.createElement(SchemaTree, { ...props });
 }
 function SchemaTree(props) {
   const {
@@ -3075,18 +3028,18 @@ function SchemaTree(props) {
   const icon = typeManager?.getDisplayIcon(schema);
   let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ React35.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ React35.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ React35.createElement(HorizontalLine, null), showIcon && icon && React35.cloneElement(icon, {
+  return /* @__PURE__ */ React36.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ React36.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ React36.createElement(HorizontalLine, null), showIcon && icon && React36.cloneElement(icon, {
     className: "tree-icon"
-  }), /* @__PURE__ */ React35.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ React35.createElement(React35.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ React35.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ React35.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
+  }), /* @__PURE__ */ React36.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ React36.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ React36.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
 }
 
 // src/components/display-outputs/index.tsx
-import React37, { useEffect as useEffect10 } from "react";
+import React38, { useEffect as useEffect10 } from "react";
 import { JsonSchemaUtils as JsonSchemaUtils5 } from "@flowgram.ai/json-schema";
 import { useCurrentScope as useCurrentScope3, useRefresh } from "@flowgram.ai/editor";
 
 // src/components/display-schema-tag/index.tsx
-import React36 from "react";
+import React37 from "react";
 import { Popover as Popover7 } from "@douyinfe/semi-ui";
 
 // src/components/display-schema-tag/styles.ts
@@ -3115,14 +3068,14 @@ var TitleSpan = styled12.span`
 function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
   const typeManager = useTypeManager();
   const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({ type: "unknown" });
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Popover7,
     {
-      content: /* @__PURE__ */ React36.createElement(PopoverContent, null, /* @__PURE__ */ React36.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
+      content: /* @__PURE__ */ React37.createElement(PopoverContent, null, /* @__PURE__ */ React37.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
     },
-    /* @__PURE__ */ React36.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && React36.cloneElement(icon, {
+    /* @__PURE__ */ React37.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && React37.cloneElement(icon, {
       className: "tag-icon"
-    }), title && /* @__PURE__ */ React36.createElement(TitleSpan, null, title))
+    }), title && /* @__PURE__ */ React37.createElement(TitleSpan, null, title))
   );
 }
 
@@ -3157,7 +3110,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     return acm;
   }, {}) : value?.properties || {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ React37.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ React38.createElement(
     DisplaySchemaTag,
     {
       key,
@@ -3170,13 +3123,13 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
 }
 
 // src/components/display-flow-value/index.tsx
-import React38, { useMemo as useMemo11 } from "react";
+import React39, { useMemo as useMemo10 } from "react";
 import { JsonSchemaUtils as JsonSchemaUtils6 } from "@flowgram.ai/json-schema";
 import { useScopeAvailable as useScopeAvailable4 } from "@flowgram.ai/editor";
 function DisplayFlowValue({ value, title, showIconInTree }) {
   const available = useScopeAvailable4();
   const variable = value?.type === "ref" ? available.getByKeyPath(value?.content) : void 0;
-  const schema = useMemo11(() => {
+  const schema = useMemo10(() => {
     if (value?.type === "ref") {
       return JsonSchemaUtils6.astToSchema(variable?.type);
     }
@@ -3199,7 +3152,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
     }
     return { type: "unknown" };
   }, [value, variable?.hash]);
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     DisplaySchemaTag,
     {
       title,
@@ -3211,7 +3164,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 }
 
 // src/components/display-inputs-values/index.tsx
-import React39 from "react";
+import React40 from "react";
 
 // src/components/display-inputs-values/styles.ts
 import styled14 from "styled-components";
@@ -3224,29 +3177,29 @@ var DisplayInputsWrapper = styled14.div`
 // src/components/display-inputs-values/index.tsx
 function DisplayInputsValues({ value, showIconInTree }) {
   const childEntries = Object.entries(value || {});
-  return /* @__PURE__ */ React39.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
+  return /* @__PURE__ */ React40.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ React40.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
 }
 
 // src/components/assign-rows/index.tsx
-import React42 from "react";
+import React43 from "react";
 import { FieldArray } from "@flowgram.ai/editor";
 import { Button as Button5 } from "@douyinfe/semi-ui";
 import { IconPlus as IconPlus4 } from "@douyinfe/semi-icons";
 
 // src/components/assign-row/index.tsx
-import React41 from "react";
-import { IconButton as IconButton6 } from "@douyinfe/semi-ui";
+import React42 from "react";
+import { IconButton as IconButton5 } from "@douyinfe/semi-ui";
 import { IconMinus as IconMinus2 } from "@douyinfe/semi-icons";
 
 // src/components/assign-row/components/blur-input.tsx
-import React40, { useEffect as useEffect11, useState as useState11 } from "react";
+import React41, { useEffect as useEffect11, useState as useState10 } from "react";
 import Input7 from "@douyinfe/semi-ui/lib/es/input";
 function BlurInput3(props) {
-  const [value, setValue] = useState11("");
+  const [value, setValue] = useState10("");
   useEffect11(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     Input7,
     {
       ...props,
@@ -3269,8 +3222,8 @@ function AssignRow(props) {
     onDelete,
     readonly
   } = props;
-  return /* @__PURE__ */ React41.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ React41.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ React41.createElement(
-    VariableSelector,
+  return /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ React42.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ React42.createElement(
+    InjectVariableSelector,
     {
       style: { width: "100%", height: 26 },
       value: value?.left?.content,
@@ -3280,7 +3233,7 @@ function AssignRow(props) {
         left: { type: "ref", content: v }
       })
     }
-  ) : /* @__PURE__ */ React41.createElement(
+  ) : /* @__PURE__ */ React42.createElement(
     BlurInput3,
     {
       style: { height: 26 },
@@ -3292,8 +3245,8 @@ function AssignRow(props) {
         left: v
       })
     }
-  )), /* @__PURE__ */ React41.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ React41.createElement(
-    DynamicValueInput,
+  )), /* @__PURE__ */ React42.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ React42.createElement(
+    InjectDynamicValueInput,
     {
       readonly,
       value: value?.right,
@@ -3302,12 +3255,12 @@ function AssignRow(props) {
         right: v
       })
     }
-  )), onDelete && /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement(
-    IconButton6,
+  )), onDelete && /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement(
+    IconButton5,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React41.createElement(IconMinus2, null),
+      icon: /* @__PURE__ */ React42.createElement(IconMinus2, null),
       onClick: () => onDelete?.()
     }
   )));
@@ -3316,7 +3269,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ React42.createElement(FieldArray, { name }, ({ field }) => /* @__PURE__ */ React42.createElement(React42.Fragment, null, field.map((childField, index) => /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(FieldArray, { name }, ({ field }) => /* @__PURE__ */ React43.createElement(React43.Fragment, null, field.map((childField, index) => /* @__PURE__ */ React43.createElement(
     AssignRow,
     {
       key: childField.key,
@@ -3327,21 +3280,21 @@ function AssignRows(props) {
       },
       onDelete: () => field.remove(index)
     }
-  )), /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ React42.createElement(
+  )), /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ React43.createElement(
     Button5,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React42.createElement(IconPlus4, null),
+      icon: /* @__PURE__ */ React43.createElement(IconPlus4, null),
       onClick: () => field.append({ operator: "assign" })
     },
     "Assign"
-  ), /* @__PURE__ */ React42.createElement(
+  ), /* @__PURE__ */ React43.createElement(
     Button5,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React42.createElement(IconPlus4, null),
+      icon: /* @__PURE__ */ React43.createElement(IconPlus4, null),
       onClick: () => field.append({ operator: "declare" })
     },
     "Declaration"
@@ -3384,7 +3337,7 @@ var provideBatchInputEffect = createEffectFromVariableProvider({
 });
 
 // src/effects/auto-rename-ref/index.ts
-import { isArray, isObject as isObject2, uniq } from "lodash";
+import { isArray, isObject as isObject3, uniq } from "lodash";
 import {
   DataEvent,
   VariableFieldKeyRenameService
@@ -3454,7 +3407,7 @@ function isTemplate(value) {
   return value?.type === "template" && typeof value?.content === "string";
 }
 function traverseRef(name, value, cb) {
-  if (isObject2(value)) {
+  if (isObject3(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
@@ -3599,68 +3552,6 @@ var listenRefSchemaChange = (cb) => [
   }
 ];
 
-// src/shared/format-legacy-refs/index.ts
-import { isObject as isObject3 } from "lodash";
-function formatLegacyRefOnSubmit(value) {
-  if (isObject3(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 (isObject3(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 isObject3(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
-}
-function isNewFlowRefValueSchema(value) {
-  return isObject3(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
 import {
   ASTFactory as ASTFactory3,
@@ -3931,6 +3822,9 @@ export {
   DisplaySchemaTag,
   DisplaySchemaTree,
   DynamicValueInput,
+  InjectDynamicValueInput,
+  InjectTypeSelector,
+  InjectVariableSelector,
   InputsValues,
   JsonEditorWithVariables,
   JsonSchemaEditor,
@@ -3946,6 +3840,7 @@ export {
   createDisableDeclarationPlugin,
   createInferAssignPlugin,
   createInferInputsPlugin,
+  createInjectMaterial,
   createTypePresetPlugin,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,