@flowgram.ai/form-materials 0.2.26 → 0.2.28

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 // src/components/variable-selector/index.tsx
 import React3, { useMemo } from "react";
+import { Popover } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
 
 // src/components/variable-selector/use-variable-tree.tsx
@@ -579,7 +580,7 @@ function useVariableTree(params) {
 }
 
 // src/components/variable-selector/styles.tsx
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Tag, TreeSelect } from "@douyinfe/semi-ui";
 var UIRootTitle = styled.div`
   margin-right: 4px;
@@ -593,7 +594,10 @@ var UIVarName = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 50%;
+
+  ${({ $inSelector }) => $inSelector && css`
+      min-width: 50%;
+    `}
 `;
 var UITag = styled(Tag)`
   width: 100%;
@@ -607,17 +611,14 @@ var UITag = styled(Tag)`
 
   &.semi-tag {
     margin: 0;
+    height: 22px;
   }
 `;
 var UITreeSelect = styled(TreeSelect)`
   outline: ${({ $error }) => $error ? "1px solid red" : "none"};
 
-  height: 22px;
-  min-height: 22px;
-  line-height: 22px;
-
   & .semi-tree-select-selection {
-    padding: 0 2px;
+    padding: 0px;
     height: 22px;
   }
 
@@ -629,6 +630,13 @@ var UITreeSelect = styled(TreeSelect)`
     padding-left: 10px;
   }
 `;
+var UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+`;
 
 // src/components/variable-selector/index.tsx
 var VariableSelector = ({
@@ -687,16 +695,24 @@ var VariableSelector = ({
             config?.notFoundContent ?? "Undefined"
           );
         }
-        return /* @__PURE__ */ React3.createElement(
-          UITag,
+        const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
+        const rootTitle = /* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null);
+        return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
+          Popover,
           {
-            prefixIcon: renderIcon(_option.rootMeta?.icon || _option?.icon),
-            closable: !readonly,
-            onClose: () => onChange(void 0)
+            content: /* @__PURE__ */ React3.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React3.createElement(UIVarName, null, _option.keyPath.slice(1).join(".")))
           },
-          /* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null),
-          /* @__PURE__ */ React3.createElement(UIVarName, null, _option.label)
-        );
+          /* @__PURE__ */ React3.createElement(
+            UITag,
+            {
+              prefixIcon: rootIcon,
+              closable: !readonly,
+              onClose: () => onChange(void 0)
+            },
+            rootTitle,
+            /* @__PURE__ */ React3.createElement(UIVarName, { $inSelector: true }, _option.label)
+          )
+        ));
       },
       showClear: false,
       arrowIcon: /* @__PURE__ */ React3.createElement(IconChevronDownStroked, { size: "small" }),
@@ -708,7 +724,7 @@ var VariableSelector = ({
 
 // src/components/type-selector/index.tsx
 import React4, { useMemo as useMemo2 } from "react";
-import { Button, Cascader } from "@douyinfe/semi-ui";
+import { Cascader, IconButton } from "@douyinfe/semi-ui";
 var getTypeSelectValue = (value) => {
   if (value?.type === "array" && value?.items) {
     return [value.type, ...getTypeSelectValue(value.items) || []];
@@ -723,19 +739,27 @@ var parseTypeSelectValue = (value) => {
   return { type };
 };
 function TypeSelector(props) {
-  const { value, onChange, disabled, style } = props;
+  const { value, onChange, readonly, disabled, style } = props;
   const selectValue = useMemo2(() => getTypeSelectValue(value), [value]);
   return /* @__PURE__ */ React4.createElement(
     Cascader,
     {
-      disabled,
+      disabled: readonly || disabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ React4.createElement(Button, { size: "small", style }, getSchemaIcon(value)),
+      triggerRender: () => /* @__PURE__ */ React4.createElement(
+        IconButton,
+        {
+          size: "small",
+          style,
+          disabled: readonly || disabled,
+          icon: getSchemaIcon(value)
+        }
+      ),
       treeData: options,
       value: selectValue,
       leafOnly: true,
       onChange: (value2) => {
-        onChange(parseTypeSelectValue(value2));
+        onChange?.(parseTypeSelectValue(value2));
       }
     }
   );
@@ -743,7 +767,7 @@ function TypeSelector(props) {
 
 // src/components/json-schema-editor/index.tsx
 import React9, { useMemo as useMemo5, useState as useState4 } from "react";
-import { Button as Button2, Checkbox, IconButton as IconButton2 } from "@douyinfe/semi-ui";
+import { Button, Checkbox, IconButton as IconButton3 } from "@douyinfe/semi-ui";
 import {
   IconExpand,
   IconShrink,
@@ -755,7 +779,7 @@ import {
 
 // src/components/json-schema-editor/styles.tsx
 import React5 from "react";
-import styled2, { css } from "styled-components";
+import styled2, { css as css2 } from "styled-components";
 import Icon3 from "@douyinfe/semi-icons";
 var UIContainer = styled2.div`
   /* & .semi-input {
@@ -787,7 +811,7 @@ var UIProperties = styled2.div`
   display: grid;
   grid-template-columns: auto 1fr;
 
-  ${({ $shrink }) => $shrink && css`
+  ${({ $shrink }) => $shrink && css2`
       padding-left: 10px;
       margin-top: 10px;
     `}
@@ -802,7 +826,7 @@ var UIPropertyLeft = styled2.div`
   if ($parentType && $isLast) {
     height = "24px";
   }
-  return $showLine && css`
+  return $showLine && css2`
         &::before {
           /* 竖线 */
           content: '';
@@ -856,12 +880,12 @@ var UIPropertyMain = styled2.div`
         background: #d9d9d9;
         display: block;
       }`;
-  return $expand && css`
+  return $expand && css2`
         background-color: #f5f5f5;
         padding: 10px;
         border-radius: 4px;
 
-        ${$showCollapse && $collapse && (type === "array" || type === "object") && css`
+        ${$showCollapse && $collapse && (type === "array" || type === "object") && css2`
           ${beforeElement}
         `}
       `;
@@ -870,7 +894,7 @@ var UIPropertyMain = styled2.div`
 var UICollapsible = styled2.div`
   display: none;
 
-  ${({ $collapse }) => $collapse && css`
+  ${({ $collapse }) => $collapse && css2`
       display: block;
     `}
 `;
@@ -1061,7 +1085,7 @@ function usePropertiesEdit(value, onChange) {
 
 // src/components/json-schema-editor/default-value.tsx
 import React7, { useRef as useRef2, useState as useState2, useCallback as useCallback2 } from "react";
-import { IconButton, JsonViewer, Tooltip } from "@douyinfe/semi-ui";
+import { IconButton as IconButton2, JsonViewer, Tooltip } from "@douyinfe/semi-ui";
 import { IconBrackets } from "@douyinfe/semi-icons";
 
 // src/components/json-schema-editor/utils.ts
@@ -1141,9 +1165,18 @@ var defaultStrategies = [
   }
 ];
 function ConstantInput(props) {
-  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const {
+    value,
+    onChange,
+    schema,
+    strategies: extraStrategies,
+    fallbackRenderer,
+    readonly,
+    ...rest
+  } = props;
   const strategies = useMemo4(
-    () => [...defaultStrategies, ...extraStrategies || []],
+    // user's extraStrategies first
+    () => [...extraStrategies || [], ...defaultStrategies],
     [extraStrategies]
   );
   const Renderer2 = useMemo4(() => {
@@ -1151,6 +1184,14 @@ function ConstantInput(props) {
     return strategy?.Renderer;
   }, [strategies, schema]);
   if (!Renderer2) {
+    if (fallbackRenderer) {
+      return React6.createElement(fallbackRenderer, {
+        value,
+        onChange,
+        readonly,
+        ...rest
+      });
+    }
     return /* @__PURE__ */ React6.createElement(Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
   return /* @__PURE__ */ React6.createElement(Renderer2, { value, onChange, readonly, ...rest });
@@ -1188,7 +1229,7 @@ function DefaultValue(props) {
     }
   }, [internalJsonValue, onChange]);
   return type === "object" ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(JSONHeader, null, /* @__PURE__ */ React7.createElement(JSONHeaderLeft, null, "json"), /* @__PURE__ */ React7.createElement(JSONHeaderRight, null, /* @__PURE__ */ React7.createElement(Tooltip, { content: jsonFormatText ?? "Format" }, /* @__PURE__ */ React7.createElement(
-    IconButton,
+    IconButton2,
     {
       icon: /* @__PURE__ */ React7.createElement(IconBrackets, { style: { color: "var(--semi-color-primary)" } }),
       size: "small",
@@ -1262,7 +1303,7 @@ function BlurInput(props) {
 
 // src/components/json-schema-editor/index.tsx
 function JsonSchemaEditor(props) {
-  const { value = { type: "object" }, config = {}, onChange: onChangeProps } = props;
+  const { value = { type: "object" }, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -1270,6 +1311,7 @@ function JsonSchemaEditor(props) {
   return /* @__PURE__ */ React9.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ React9.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ React9.createElement(
     PropertyEdit,
     {
+      readonly,
       key: _property.key,
       value: _property,
       config,
@@ -1282,8 +1324,9 @@ function JsonSchemaEditor(props) {
       }
     }
   ))), /* @__PURE__ */ React9.createElement(
-    Button2,
+    Button,
     {
+      disabled: readonly,
       size: "small",
       style: { marginTop: 10, marginLeft: 16 },
       icon: /* @__PURE__ */ React9.createElement(IconPlus, null),
@@ -1296,6 +1339,7 @@ function PropertyEdit(props) {
   const {
     value,
     config,
+    readonly,
     $level = 0,
     onChange: onChangeProps,
     onRemove,
@@ -1342,6 +1386,7 @@ function PropertyEdit(props) {
     /* @__PURE__ */ React9.createElement(UIRow, null, /* @__PURE__ */ React9.createElement(UIName, null, /* @__PURE__ */ React9.createElement(
       BlurInput,
       {
+        disabled: readonly,
         placeholder: config?.placeholder ?? "Input Variable Name",
         size: "small",
         value: name,
@@ -1351,6 +1396,7 @@ function PropertyEdit(props) {
       TypeSelector,
       {
         value: typeSelectorValue,
+        readonly,
         onChange: (_value) => {
           onChangeProps?.({
             ...value || {},
@@ -1361,12 +1407,14 @@ function PropertyEdit(props) {
     )), /* @__PURE__ */ React9.createElement(UIRequired, null, /* @__PURE__ */ React9.createElement(
       Checkbox,
       {
+        disabled: readonly,
         checked: isPropertyRequired,
         onChange: (e) => onChange("isPropertyRequired", e.target.checked)
       }
     )), /* @__PURE__ */ React9.createElement(UIActions, null, /* @__PURE__ */ React9.createElement(
-      IconButton2,
+      IconButton3,
       {
+        disabled: readonly,
         size: "small",
         theme: "borderless",
         icon: expand ? /* @__PURE__ */ React9.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React9.createElement(IconExpand, { size: "small" }),
@@ -1375,8 +1423,9 @@ function PropertyEdit(props) {
         }
       }
     ), isDrilldownObject && /* @__PURE__ */ React9.createElement(
-      IconButton2,
+      IconButton3,
       {
+        disabled: readonly,
         size: "small",
         theme: "borderless",
         icon: /* @__PURE__ */ React9.createElement(IconAddChildren, null),
@@ -1386,8 +1435,9 @@ function PropertyEdit(props) {
         }
       }
     ), /* @__PURE__ */ React9.createElement(
-      IconButton2,
+      IconButton3,
       {
+        disabled: readonly,
         size: "small",
         theme: "borderless",
         icon: /* @__PURE__ */ React9.createElement(IconMinus, { size: "small" }),
@@ -1397,6 +1447,7 @@ function PropertyEdit(props) {
     expand && /* @__PURE__ */ React9.createElement(UIExpandDetail, null, /* @__PURE__ */ React9.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ React9.createElement(
       BlurInput,
       {
+        disabled: readonly,
         size: "small",
         value: description,
         onChange: (value2) => onChange("description", value2),
@@ -1416,6 +1467,7 @@ function PropertyEdit(props) {
   ), showCollapse && /* @__PURE__ */ React9.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React9.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React9.createElement(
     PropertyEdit,
     {
+      readonly,
       key: _property.key,
       value: _property,
       config,
@@ -1448,16 +1500,84 @@ function BatchVariableSelector(props) {
 }
 
 // src/components/dynamic-value-input/index.tsx
-import React11, { useMemo as useMemo6 } from "react";
-import { IconButton as IconButton3 } from "@douyinfe/semi-ui";
+import React11, { useMemo as useMemo6, useState as useState5 } from "react";
+import { useScopeAvailable } from "@flowgram.ai/editor";
+import { IconButton as IconButton4 } from "@douyinfe/semi-ui";
 import { IconSetting } from "@douyinfe/semi-icons";
 
+// src/utils/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/components/dynamic-value-input/styles.tsx
 import styled3 from "styled-components";
 var UIContainer2 = styled3.div`
   display: flex;
   align-items: center;
-  gap: 5px;
+  border-radius: 4px;
+  border: 1px solid var(--semi-color-border);
+
+  overflow: hidden;
+
+  background-color: var(--semi-color-fill-0);
 `;
 var UIMain = styled3.div`
   flex-grow: 1;
@@ -1468,9 +1588,29 @@ var UIMain = styled3.div`
   & .semi-input-number,
   & .semi-select {
     width: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+`;
+var UIType2 = styled3.div`
+  border-right: 1px solid #e5e5e5;
+
+  & .semi-button {
+    border-radius: 0;
+  }
+`;
+var UITrigger = styled3.div`
+  border-left: 1px solid #e5e5e5;
+
+  & .semi-button {
+    border-radius: 0;
   }
 `;
-var UITrigger = styled3.div``;
 
 // src/components/dynamic-value-input/index.tsx
 function DynamicValueInput({
@@ -1478,15 +1618,44 @@ function DynamicValueInput({
   onChange,
   readonly,
   style,
-  schema,
+  schema: schemaFromProps,
   constantProps
 }) {
+  const available = useScopeAvailable();
+  const refVariable = useMemo6(() => {
+    if (value?.type === "ref") {
+      return available.getByKeyPath(value.content);
+    }
+  }, [value, available]);
+  const [selectSchema, setSelectSchema] = useState5(
+    schemaFromProps || constantProps?.schema || { type: "string" }
+  );
+  const renderTypeSelector = () => {
+    if (schemaFromProps) {
+      return /* @__PURE__ */ React11.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
+    }
+    if (value?.type === "ref") {
+      const schema = refVariable?.type ? JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
+      return /* @__PURE__ */ React11.createElement(TypeSelector, { value: schema, readonly: true });
+    }
+    return /* @__PURE__ */ React11.createElement(
+      TypeSelector,
+      {
+        value: selectSchema,
+        onChange: (_v) => setSelectSchema(_v || { type: "string" }),
+        readonly
+      }
+    );
+  };
   const includeSchema = useMemo6(() => {
-    if (schema?.type === "number") {
-      return [schema, { type: "integer" }];
+    if (!schemaFromProps) {
+      return;
     }
-    return schema;
-  }, [schema]);
+    if (schemaFromProps?.type === "number") {
+      return [schemaFromProps, { type: "integer" }];
+    }
+    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+  }, [schemaFromProps]);
   const renderMain = () => {
     if (value?.type === "ref") {
       return /* @__PURE__ */ React11.createElement(
@@ -1500,13 +1669,24 @@ function DynamicValueInput({
         }
       );
     }
+    const constantSchema = schemaFromProps || selectSchema || { type: "string" };
     return /* @__PURE__ */ React11.createElement(
       ConstantInput,
       {
         value: value?.content,
-        onChange: (_v) => onChange({ type: "constant", content: _v }),
-        schema: schema || { type: "string" },
+        onChange: (_v) => onChange({ type: "constant", content: _v, schema: constantSchema }),
+        schema: constantSchema || { type: "string" },
         readonly,
+        strategies: [...constantProps?.strategies || []],
+        fallbackRenderer: () => /* @__PURE__ */ React11.createElement(
+          VariableSelector,
+          {
+            style: { width: "100%" },
+            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+            includeSchema,
+            readonly
+          }
+        ),
         ...constantProps
       }
     );
@@ -1519,10 +1699,10 @@ function DynamicValueInput({
       onChange: (_v) => onChange({ type: "ref", content: _v }),
       includeSchema,
       readonly,
-      triggerRender: () => /* @__PURE__ */ React11.createElement(IconButton3, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React11.createElement(IconSetting, { size: "small" }) })
+      triggerRender: () => /* @__PURE__ */ React11.createElement(IconButton4, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React11.createElement(IconSetting, { size: "small" }) })
     }
   );
-  return /* @__PURE__ */ React11.createElement(UIContainer2, { style }, /* @__PURE__ */ React11.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React11.createElement(UITrigger, null, renderTrigger()));
+  return /* @__PURE__ */ React11.createElement(UIContainer2, { style }, /* @__PURE__ */ React11.createElement(UIType2, null, renderTypeSelector()), /* @__PURE__ */ React11.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React11.createElement(UITrigger, null, renderTrigger()));
 }
 
 // src/components/condition-row/index.tsx
@@ -1553,7 +1733,7 @@ var UIValues = styled4.div`
 
 // src/components/condition-row/hooks/useRule.ts
 import { useMemo as useMemo7 } from "react";
-import { useScopeAvailable } from "@flowgram.ai/editor";
+import { useScopeAvailable as useScopeAvailable2 } from "@flowgram.ai/editor";
 
 // src/components/condition-row/constants.ts
 var rules = {
@@ -1677,71 +1857,9 @@ var opConfigs = {
   }
 };
 
-// src/utils/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/components/condition-row/hooks/useRule.ts
 function useRule(left) {
-  const available = useScopeAvailable();
+  const available = useScopeAvailable2();
   const variable = useMemo7(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
@@ -1756,7 +1874,7 @@ function useRule(left) {
 
 // src/components/condition-row/hooks/useOp.tsx
 import React12, { useMemo as useMemo8 } from "react";
-import { Button as Button3, Select as Select2 } from "@douyinfe/semi-ui";
+import { Button as Button2, Select as Select2 } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked as IconChevronDownStroked2 } from "@douyinfe/semi-icons";
 function useOp({ rule, op, onChange }) {
   const options2 = useMemo8(
@@ -1777,7 +1895,7 @@ function useOp({ rule, op, onChange }) {
       onChange: (v) => {
         onChange(v);
       },
-      triggerRender: ({ value }) => /* @__PURE__ */ React12.createElement(Button3, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ React12.createElement(IconChevronDownStroked2, { size: "small" }))
+      triggerRender: ({ value }) => /* @__PURE__ */ React12.createElement(Button2, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ React12.createElement(IconChevronDownStroked2, { size: "small" }))
     }
   );
   return { renderOpSelect, opConfig };
@@ -1831,18 +1949,21 @@ function ConditionRow({ style, value, onChange, readonly }) {
 
 // src/components/batch-outputs/index.tsx
 import React14 from "react";
-import { Button as Button4, Input as Input4 } from "@douyinfe/semi-ui";
+import { Button as Button3, Input as Input4 } from "@douyinfe/semi-ui";
 import { IconDelete, IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
 
-// src/components/batch-outputs/use-list.ts
-import { useEffect as useEffect3, useState as useState5 } from "react";
+// src/hooks/use-object-list/index.tsx
+import { useEffect as useEffect3, useState as useState6 } from "react";
+import { nanoid } from "nanoid";
 import { difference } from "lodash";
-var _id2 = 0;
 function genId2() {
-  return _id2++;
+  return nanoid();
 }
-function useList({ value, onChange }) {
-  const [list, setList] = useState5([]);
+function useObjectList({
+  value,
+  onChange
+}) {
+  const [list, setList] = useState6([]);
   useEffect3(() => {
     setList((_prevList) => {
       const newKeys = Object.keys(value || {});
@@ -1851,7 +1972,7 @@ function useList({ value, onChange }) {
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
         id: item.id,
         key: item.key,
-        value: item.key ? value?.[item.key] : void 0
+        value: item.key ? value?.[item.key] : item.value
       })).concat(
         addKeys.map((_key) => ({
           id: genId2(),
@@ -1869,17 +1990,39 @@ function useList({ value, onChange }) {
       }
     ]);
   };
-  const update = (item) => {
+  const updateValue = (itemId, value2) => {
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
-        if (_item.id === item.id) {
-          return item;
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            value: value2
+          };
         }
         return _item;
       });
       onChange(
         Object.fromEntries(
-          nextList.filter((item2) => item2.key).map((item2) => [item2.key, item2.value])
+          nextList.filter((item) => item.key).map((item) => [item.key, item.value])
+        )
+      );
+      return nextList;
+    });
+  };
+  const updateKey = (itemId, key) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            key
+          };
+        }
+        return _item;
+      });
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key, item.value])
         )
       );
       return nextList;
@@ -1896,7 +2039,7 @@ function useList({ value, onChange }) {
       return nextList;
     });
   };
-  return { list, add, update, remove };
+  return { list, add, updateKey, updateValue, remove };
 }
 
 // src/components/batch-outputs/styles.tsx
@@ -1916,7 +2059,7 @@ var UIRow2 = styled5.div`
 // src/components/batch-outputs/index.tsx
 function BatchOutputs(props) {
   const { readonly, style } = props;
-  const { list, add, update, remove } = useList(props);
+  const { list, add, updateKey, updateValue, remove } = useObjectList(props);
   return /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ React14.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ React14.createElement(
     Input4,
     {
@@ -1924,7 +2067,7 @@ function BatchOutputs(props) {
       disabled: readonly,
       size: "small",
       value: item.key,
-      onChange: (v) => update({ ...item, key: v })
+      onChange: (v) => updateKey(item.id, v)
     }
   ), /* @__PURE__ */ React14.createElement(
     VariableSelector,
@@ -1932,23 +2075,17 @@ function BatchOutputs(props) {
       style: { flexGrow: 1 },
       readonly,
       value: item.value?.content,
-      onChange: (v) => update({
-        ...item,
-        value: {
-          type: "ref",
-          content: v
-        }
-      })
+      onChange: (v) => updateValue(item.id, { type: "ref", content: v })
     }
   ), /* @__PURE__ */ React14.createElement(
-    Button4,
+    Button3,
     {
       disabled: readonly,
       icon: /* @__PURE__ */ React14.createElement(IconDelete, null),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React14.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React14.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ React14.createElement(Button3, { disabled: readonly, icon: /* @__PURE__ */ React14.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/components/prompt-editor/index.tsx
@@ -1957,13 +2094,13 @@ import { Renderer, EditorProvider, ActiveLinePlaceholder } from "@coze-editor/ed
 import preset from "@coze-editor/editor/preset-prompt";
 
 // src/components/prompt-editor/styles.tsx
-import styled6, { css as css2 } from "styled-components";
+import styled6, { css as css3 } from "styled-components";
 var UIContainer4 = styled6.div`
   background-color: var(--semi-color-fill-0);
   padding-left: 10px;
   padding-right: 6px;
 
-  ${({ $hasError }) => $hasError && css2`
+  ${({ $hasError }) => $hasError && css3`
       border: 1px solid var(--semi-color-danger-6);
     `}
 `;
@@ -2126,8 +2263,8 @@ function PromptEditor(props) {
 import React18 from "react";
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
-import React16, { useEffect as useEffect5, useState as useState6 } from "react";
-import { Popover, Tree } from "@douyinfe/semi-ui";
+import React16, { useEffect as useEffect5, useState as useState7 } from "react";
+import { Popover as Popover2, Tree } from "@douyinfe/semi-ui";
 import {
   Mention,
   getCurrentMentionReplaceRange,
@@ -2135,9 +2272,9 @@ import {
   PositionMirror
 } from "@coze-editor/editor/react";
 function VariableTree() {
-  const [posKey, setPosKey] = useState6("");
-  const [visible, setVisible] = useState6(false);
-  const [position, setPosition] = useState6(-1);
+  const [posKey, setPosKey] = useState7("");
+  const [visible, setVisible] = useState7(false);
+  const [position, setPosition] = useState7(-1);
   const editor = useEditor();
   function insert(variablePath) {
     const range = getCurrentMentionReplaceRange(editor.$view.state);
@@ -2161,7 +2298,7 @@ function VariableTree() {
   }, [editor, visible]);
   const treeData = useVariableTree({});
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React16.createElement(
-    Popover,
+    Popover2,
     {
       visible,
       trigger: "custom",
@@ -2196,7 +2333,7 @@ import {
   DisposableCollection,
   useCurrentScope
 } from "@flowgram.ai/editor";
-import { Popover as Popover2 } from "@douyinfe/semi-ui";
+import { Popover as Popover3 } from "@douyinfe/semi-ui";
 import { IconIssueStroked as IconIssueStroked2 } from "@douyinfe/semi-icons";
 import { useInjector as useInjector4 } from "@coze-editor/editor/react";
 import {
@@ -2237,7 +2374,7 @@ var UITag2 = styled7(Tag2)`
     margin: 0 5px;
   }
 `;
-var UIPopoverContent = styled7.div`
+var UIPopoverContent2 = styled7.div`
   padding: 10px;
   display: inline-flex;
   align-items: center;
@@ -2273,9 +2410,9 @@ var VariableTagWidget = class extends WidgetType {
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.renderReact(
       /* @__PURE__ */ React17.createElement(
-        Popover2,
+        Popover3,
         {
-          content: /* @__PURE__ */ React17.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ React17.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
         /* @__PURE__ */ React17.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.key))
       )
@@ -2358,8 +2495,8 @@ function PromptEditorWithVariables(props) {
 import React21 from "react";
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
-import React20, { useEffect as useEffect6, useState as useState7 } from "react";
-import { Popover as Popover3 } from "@douyinfe/semi-ui";
+import React20, { useEffect as useEffect6, useState as useState8 } from "react";
+import { Popover as Popover4 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention2,
   getCurrentMentionReplaceRange as getCurrentMentionReplaceRange2,
@@ -2372,14 +2509,14 @@ import React19, { useMemo as useMemo10 } from "react";
 import { last as last2 } from "lodash";
 import {
   ASTMatch as ASTMatch3,
-  useScopeAvailable as useScopeAvailable2
+  useScopeAvailable as useScopeAvailable3
 } from "@flowgram.ai/editor";
 import { Tree as Tree2 } from "@douyinfe/semi-ui";
 function InputsPicker({
   inputsValues,
   onSelect
 }) {
-  const available = useScopeAvailable2();
+  const available = useScopeAvailable3();
   const getArrayDrilldown = (type, depth = 1) => {
     if (ASTMatch3.isArray(type.items)) {
       return getArrayDrilldown(type.items, depth + 1);
@@ -2414,7 +2551,7 @@ function InputsPicker({
   };
   const treeData = useMemo10(
     () => Object.entries(inputsValues).map(([key, value]) => {
-      if (value.type === "ref") {
+      if (value?.type === "ref") {
         const variable = available.getByKeyPath(value.content || []);
         if (variable) {
           return renderVariable(variable, [key]);
@@ -2433,9 +2570,9 @@ function InputsPicker({
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
 function InputsTree({ inputsValues }) {
-  const [posKey, setPosKey] = useState7("");
-  const [visible, setVisible] = useState7(false);
-  const [position, setPosition] = useState7(-1);
+  const [posKey, setPosKey] = useState8("");
+  const [visible, setVisible] = useState8(false);
+  const [position, setPosition] = useState8(-1);
   const editor = useEditor2();
   function insert(variablePath) {
     const range = getCurrentMentionReplaceRange2(editor.$view.state);
@@ -2458,7 +2595,7 @@ function InputsTree({ inputsValues }) {
     }
   }, [editor, visible]);
   return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Mention2, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React20.createElement(
-    Popover3,
+    Popover4,
     {
       visible,
       trigger: "custom",
@@ -2747,11 +2884,14 @@ themes.register("light", lightTheme);
 
 // src/components/code-editor/language-features.ts
 import { languages } from "@coze-editor/editor/preset-code";
+import { typescript } from "@coze-editor/editor/language-typescript";
 import { shell } from "@coze-editor/editor/language-shell";
 import { python } from "@coze-editor/editor/language-python";
 import { json } from "@coze-editor/editor/language-json";
 import { mixLanguages } from "@coze-editor/editor";
 languages.register("python", python);
+languages.register("typescript", typescript);
+languages.register("shell", shell);
 languages.register("json", {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
   language: mixLanguages({
@@ -2759,7 +2899,6 @@ languages.register("json", {
   }),
   languageService: json.languageService
 });
-languages.register("shell", shell);
 
 // src/components/code-editor/index.tsx
 var OriginCodeEditor = createRenderer(preset2, [
@@ -2814,8 +2953,8 @@ import React25 from "react";
 import { transformerCreator } from "@coze-editor/editor/preset-code";
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
-import React23, { useEffect as useEffect8, useState as useState8 } from "react";
-import { Popover as Popover4, Tree as Tree3 } from "@douyinfe/semi-ui";
+import React23, { useEffect as useEffect8, useState as useState9 } from "react";
+import { Popover as Popover5, Tree as Tree3 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention3,
   getCurrentMentionReplaceRange as getCurrentMentionReplaceRange3,
@@ -2823,9 +2962,9 @@ import {
   PositionMirror as PositionMirror3
 } from "@coze-editor/editor/react";
 function VariableTree2() {
-  const [posKey, setPosKey] = useState8("");
-  const [visible, setVisible] = useState8(false);
-  const [position, setPosition] = useState8(-1);
+  const [posKey, setPosKey] = useState9("");
+  const [visible, setVisible] = useState9(false);
+  const [position, setPosition] = useState9(-1);
   const editor = useEditor3();
   function insert(variablePath) {
     const range = getCurrentMentionReplaceRange3(editor.$view.state);
@@ -2849,7 +2988,7 @@ function VariableTree2() {
   }, [editor, visible]);
   const treeData = useVariableTree({});
   return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Mention3, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React23.createElement(
-    Popover4,
+    Popover5,
     {
       visible,
       trigger: "custom",
@@ -2884,7 +3023,7 @@ import {
   DisposableCollection as DisposableCollection2,
   useCurrentScope as useCurrentScope2
 } from "@flowgram.ai/editor";
-import { Popover as Popover5 } from "@douyinfe/semi-ui";
+import { Popover as Popover6 } from "@douyinfe/semi-ui";
 import { IconIssueStroked as IconIssueStroked3 } from "@douyinfe/semi-icons";
 import { useInjector as useInjector5 } from "@coze-editor/editor/react";
 import {
@@ -2925,7 +3064,7 @@ var UITag3 = styled8(Tag3)`
     margin: 0 5px;
   }
 `;
-var UIPopoverContent2 = styled8.div`
+var UIPopoverContent3 = styled8.div`
   padding: 10px;
   display: inline-flex;
   align-items: center;
@@ -2958,9 +3097,9 @@ var VariableTagWidget2 = class extends WidgetType2 {
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.root.render(
       /* @__PURE__ */ React24.createElement(
-        Popover5,
+        Popover6,
         {
-          content: /* @__PURE__ */ React24.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React24.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ React24.createElement(UIPopoverContent3, null, rootIcon, rootTitle, /* @__PURE__ */ React24.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
         },
         /* @__PURE__ */ React24.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React24.createElement(UIVarName3, null, v?.key))
       )
@@ -3080,6 +3219,64 @@ function JsonEditorWithVariables(props) {
   );
 }
 
+// src/components/inputs-values/index.tsx
+import React26 from "react";
+import { Button as Button4, IconButton as IconButton5, Input as Input5 } from "@douyinfe/semi-ui";
+import { IconDelete as IconDelete2, IconPlus as IconPlus3 } from "@douyinfe/semi-icons";
+
+// src/components/inputs-values/styles.tsx
+import styled9 from "styled-components";
+var UIRows2 = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+var UIRow3 = styled9.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+// src/components/inputs-values/index.tsx
+function InputsValues({ value, onChange, style, readonly, constantProps }) {
+  const { list, updateKey, updateValue, remove, add } = useObjectList({
+    value,
+    onChange
+  });
+  return /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React26.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React26.createElement(
+    Input5,
+    {
+      style: { width: 100, minWidth: 100, maxWidth: 100 },
+      disabled: readonly,
+      size: "small",
+      value: item.key,
+      onChange: (v) => updateKey(item.id, v)
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    DynamicValueInput,
+    {
+      style: { flexGrow: 1 },
+      readonly,
+      value: item.value,
+      onChange: (v) => updateValue(item.id, v),
+      constantProps: {
+        ...constantProps,
+        strategies: [...constantProps?.strategies || []]
+      }
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    IconButton5,
+    {
+      disabled: readonly,
+      theme: "borderless",
+      icon: /* @__PURE__ */ React26.createElement(IconDelete2, { size: "small" }),
+      size: "small",
+      onClick: () => remove(item.id)
+    }
+  )))), /* @__PURE__ */ React26.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React26.createElement(IconPlus3, null), size: "small", onClick: add }, "Add"));
+}
+
 // src/effects/provide-batch-input/index.ts
 import {
   ASTFactory as ASTFactory2,
@@ -3115,38 +3312,8 @@ var provideBatchInputEffect = createEffectFromVariableProvider({
   ]
 });
 
-// src/effects/provide-batch-outputs/index.ts
-import {
-  ASTFactory as ASTFactory3,
-  createEffectFromVariableProvider as createEffectFromVariableProvider2,
-  getNodeForm as getNodeForm2
-} from "@flowgram.ai/editor";
-var provideBatchOutputsEffect = createEffectFromVariableProvider2({
-  parse: (value, ctx) => [
-    ASTFactory3.createVariableDeclaration({
-      key: `${ctx.node.id}`,
-      meta: {
-        title: getNodeForm2(ctx.node)?.getValueIn("title"),
-        icon: ctx.node.getNodeRegistry().info?.icon
-      },
-      type: ASTFactory3.createObject({
-        properties: Object.entries(value).map(
-          ([_key, value2]) => ASTFactory3.createProperty({
-            key: _key,
-            initializer: ASTFactory3.createWrapArrayExpression({
-              wrapFor: ASTFactory3.createKeyPathExpression({
-                keyPath: value2.content || []
-              })
-            })
-          })
-        )
-      })
-    })
-  ]
-});
-
 // src/effects/auto-rename-ref/index.ts
-import { isArray, isObject as isObject2 } from "lodash";
+import { isArray, isObject as isObject2, uniq } from "lodash";
 import {
   DataEvent,
   VariableFieldKeyRenameService
@@ -3167,9 +3334,30 @@ var autoRenameRefEffect = [
           after.key
         ];
         traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
-          if (isRefMatch(_v, beforeKeyPath)) {
-            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
-            form.setValueIn(_drilldownName, _v);
+          if (_v.type === "ref") {
+            if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+              _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+              form.setValueIn(_drilldownName, _v);
+            }
+          } else if (_v.type === "template") {
+            const templateKeyPaths = getTemplateKeyPaths(_v);
+            let hasMatch = false;
+            templateKeyPaths.forEach((_keyPath) => {
+              if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                hasMatch = true;
+                const nextKeyPath = [
+                  ...afterKeyPath,
+                  ...(_keyPath || [])?.slice(beforeKeyPath.length)
+                ];
+                _v.content = _v.content?.replace(
+                  `{{${_keyPath.join(".")}}`,
+                  `{{${nextKeyPath.join(".")}}`
+                );
+              }
+            });
+            if (hasMatch) {
+              form.setValueIn(_drilldownName, { ..._v });
+            }
           }
         });
       });
@@ -3179,18 +3367,31 @@ var autoRenameRefEffect = [
     }
   }
 ];
-function isRefMatch(value, targetKeyPath) {
-  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+function isKeyPathMatch(keyPath = [], targetKeyPath) {
+  return targetKeyPath.every((_key, index) => _key === keyPath[index]);
+}
+function getTemplateKeyPaths(value) {
+  const keyPathReg = /{{(.*?)}}/g;
+  return uniq(value.content?.match(keyPathReg) || []).map(
+    (_keyPath) => _keyPath.slice(2, -2).split(".")
+  );
 }
 function isRef(value) {
   return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
 }
+function isTemplate(value) {
+  return value?.type === "template" && typeof value?.content === "string";
+}
 function traverseRef(name, value, cb) {
   if (isObject2(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
     }
+    if (isTemplate(value)) {
+      cb(name, value);
+      return;
+    }
     Object.entries(value).forEach(([_key, _value]) => {
       traverseRef(`${name}.${_key}`, _value, cb);
     });
@@ -3207,16 +3408,16 @@ function traverseRef(name, value, cb) {
 
 // src/effects/provide-json-schema-outputs/index.ts
 import {
-  ASTFactory as ASTFactory4,
-  createEffectFromVariableProvider as createEffectFromVariableProvider3,
-  getNodeForm as getNodeForm3
+  ASTFactory as ASTFactory3,
+  createEffectFromVariableProvider as createEffectFromVariableProvider2,
+  getNodeForm as getNodeForm2
 } from "@flowgram.ai/editor";
-var provideJsonSchemaOutputs = createEffectFromVariableProvider3({
+var provideJsonSchemaOutputs = createEffectFromVariableProvider2({
   parse: (value, ctx) => [
-    ASTFactory4.createVariableDeclaration({
+    ASTFactory3.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: getNodeForm3(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: getNodeForm2(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: JsonSchemaUtils.schemaToAST(value)
@@ -3247,29 +3448,29 @@ var syncVariableTitle = [
 
 // src/form-plugins/batch-outputs-plugin/index.ts
 import {
-  ASTFactory as ASTFactory5,
-  createEffectFromVariableProvider as createEffectFromVariableProvider4,
+  ASTFactory as ASTFactory4,
+  createEffectFromVariableProvider as createEffectFromVariableProvider3,
   defineFormPluginCreator,
-  getNodeForm as getNodeForm4,
+  getNodeForm as getNodeForm3,
   getNodePrivateScope,
   getNodeScope,
   ScopeChainTransformService,
   FlowNodeScopeType
 } from "@flowgram.ai/editor";
-var provideBatchOutputsEffect2 = createEffectFromVariableProvider4({
+var provideBatchOutputsEffect = createEffectFromVariableProvider3({
   parse: (value, ctx) => [
-    ASTFactory5.createVariableDeclaration({
+    ASTFactory4.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: getNodeForm4(ctx.node)?.getValueIn("title"),
+        title: getNodeForm3(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: ASTFactory5.createObject({
+      type: ASTFactory4.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => ASTFactory5.createProperty({
+          ([_key, value2]) => ASTFactory4.createProperty({
             key: _key,
-            initializer: ASTFactory5.createWrapArrayExpression({
-              wrapFor: ASTFactory5.createKeyPathExpression({
+            initializer: ASTFactory4.createWrapArrayExpression({
+              wrapFor: ASTFactory4.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -3283,7 +3484,7 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
-      [outputKey]: provideBatchOutputsEffect2
+      [outputKey]: provideBatchOutputsEffect
     });
   },
   onInit(ctx, { outputKey }) {
@@ -3319,6 +3520,85 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
     });
   }
 });
+
+// src/form-plugins/infer-inputs-plugin/index.ts
+import { get as get2, set } from "lodash";
+import {
+  defineFormPluginCreator as defineFormPluginCreator2,
+  getNodePrivateScope as getNodePrivateScope2,
+  getNodeScope as getNodeScope2
+} from "@flowgram.ai/editor";
+var createInferInputsPlugin = defineFormPluginCreator2({
+  onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+    if (!sourceKey || !targetKey) {
+      return;
+    }
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        targetKey,
+        infer(
+          get2(formData, sourceKey),
+          scope === "private" ? getNodePrivateScope2(ctx.node) : getNodeScope2(ctx.node)
+        )
+      );
+      return formData;
+    });
+  }
+});
+function isRef2(value) {
+  return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
+}
+function isTemplate2(value) {
+  return value?.type === "template" && typeof value?.content === "string";
+}
+function isConstant(value) {
+  return value?.type === "constant" && typeof value?.content !== "undefined";
+}
+var infer = (values, scope) => {
+  if (typeof values === "object") {
+    if (isConstant(values)) {
+      if (values?.schema) {
+        return values.schema;
+      }
+      if (typeof values.content === "string") {
+        return {
+          type: "string"
+        };
+      }
+      if (typeof values.content === "number") {
+        return {
+          type: "number"
+        };
+      }
+      if (typeof values.content === "boolean") {
+        return {
+          type: "boolean"
+        };
+      }
+    }
+    if (isRef2(values)) {
+      const variable = scope.available.getByKeyPath(values?.content);
+      const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : void 0;
+      return schema;
+    }
+    if (isTemplate2(values)) {
+      return {
+        type: "string"
+      };
+    }
+    return {
+      type: "object",
+      properties: Object.keys(values).reduce((acc, key) => {
+        const schema = infer(values[key], scope);
+        if (schema) {
+          acc[key] = schema;
+        }
+        return acc;
+      }, {})
+    };
+  }
+};
 export {
   ArrayIcons,
   BatchOutputs,
@@ -3327,6 +3607,7 @@ export {
   ConditionRow,
   ConstantInput,
   DynamicValueInput,
+  InputsValues,
   JsonEditorWithVariables,
   JsonSchemaEditor,
   JsonSchemaUtils,
@@ -3338,6 +3619,7 @@ export {
   VariableTypeIcons,
   autoRenameRefEffect,
   createBatchOutputsFormPlugin,
+  createInferInputsPlugin,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef,