@flowgram.ai/form-materials 0.1.31 → 0.2.1

package/dist/index.js

@@ -31,20 +31,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ArrayIcons: () => ArrayIcons,
+  BatchVariableSelector: () => BatchVariableSelector,
+  ConstantInput: () => ConstantInput,
+  DynamicValueInput: () => DynamicValueInput,
   JsonSchemaEditor: () => JsonSchemaEditor,
+  JsonSchemaUtils: () => JsonSchemaUtils,
   TypeSelector: () => TypeSelector,
   VariableSelector: () => VariableSelector,
-  VariableTypeIcons: () => VariableTypeIcons
+  VariableTypeIcons: () => VariableTypeIcons,
+  formatLegacyRefOnInit: () => formatLegacyRefOnInit,
+  formatLegacyRefOnSubmit: () => formatLegacyRefOnSubmit,
+  formatLegacyRefToNewRef: () => formatLegacyRefToNewRef,
+  formatNewRefToLegacyRef: () => formatNewRefToLegacyRef,
+  getSchemaIcon: () => getSchemaIcon,
+  getTypeSelectValue: () => getTypeSelectValue,
+  isLegacyFlowRefValueSchema: () => isLegacyFlowRefValueSchema,
+  isNewFlowRefValueSchema: () => isNewFlowRefValueSchema,
+  parseTypeSelectValue: () => parseTypeSelectValue,
+  provideBatchInputEffect: () => provideBatchInputEffect,
+  provideBatchOutputsEffect: () => provideBatchOutputsEffect
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/components/variable-selector/index.tsx
 var import_react3 = __toESM(require("react"));
-var import_semi_ui2 = require("@douyinfe/semi-ui");
+var import_semi_icons2 = require("@douyinfe/semi-icons");
 
 // src/components/variable-selector/use-variable-tree.tsx
 var import_react2 = __toESM(require("react"));
-var import_editor = require("@flowgram.ai/editor");
+var import_editor2 = require("@flowgram.ai/editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 
 // src/components/type-selector/constants.tsx
@@ -436,18 +451,131 @@ var options = [
   }
 ];
 
+// src/utils/json-schema/index.ts
+var import_lodash = require("lodash");
+var import_editor = require("@flowgram.ai/editor");
+var JsonSchemaUtils;
+((JsonSchemaUtils2) => {
+  function schemaToAST(jsonSchema) {
+    const { type, extra } = jsonSchema || {};
+    const { weak = false } = extra || {};
+    if (!type) {
+      return void 0;
+    }
+    switch (type) {
+      case "object":
+        if (weak) {
+          return { kind: import_editor.ASTKind.Object, weak: true };
+        }
+        return import_editor.ASTFactory.createObject({
+          properties: Object.entries(jsonSchema.properties || {}).sort((a, b) => ((0, import_lodash.get)(a?.[1], "extra.index") || 0) - ((0, import_lodash.get)(b?.[1], "extra.index") || 0)).map(([key, _property]) => ({
+            key,
+            type: schemaToAST(_property),
+            meta: { description: _property.description }
+          }))
+        });
+      case "array":
+        if (weak) {
+          return { kind: import_editor.ASTKind.Array, weak: true };
+        }
+        return import_editor.ASTFactory.createArray({
+          items: schemaToAST(jsonSchema.items)
+        });
+      case "map":
+        if (weak) {
+          return { kind: import_editor.ASTKind.Map, weak: true };
+        }
+        return import_editor.ASTFactory.createMap({
+          valueType: schemaToAST(jsonSchema.additionalProperties)
+        });
+      case "string":
+        return import_editor.ASTFactory.createString();
+      case "number":
+        return import_editor.ASTFactory.createNumber();
+      case "boolean":
+        return import_editor.ASTFactory.createBoolean();
+      case "integer":
+        return import_editor.ASTFactory.createInteger();
+      default:
+        return import_editor.ASTFactory.createCustomType({ typeName: type });
+    }
+  }
+  JsonSchemaUtils2.schemaToAST = schemaToAST;
+  function astToSchema(typeAST) {
+    if (import_editor.ASTMatch.isString(typeAST)) {
+      return {
+        type: "string"
+      };
+    }
+    if (import_editor.ASTMatch.isBoolean(typeAST)) {
+      return {
+        type: "boolean"
+      };
+    }
+    if (import_editor.ASTMatch.isNumber(typeAST)) {
+      return {
+        type: "number"
+      };
+    }
+    if (import_editor.ASTMatch.isInteger(typeAST)) {
+      return {
+        type: "integer"
+      };
+    }
+    if (import_editor.ASTMatch.isObject(typeAST)) {
+      return {
+        type: "object",
+        properties: Object.fromEntries(
+          Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)])
+        )
+      };
+    }
+    if (import_editor.ASTMatch.isArray(typeAST)) {
+      return {
+        type: "array",
+        items: astToSchema(typeAST.items)
+      };
+    }
+    if (import_editor.ASTMatch.isMap(typeAST)) {
+      return {
+        type: "map",
+        items: astToSchema(typeAST.valueType)
+      };
+    }
+    if (import_editor.ASTMatch.isCustomType(typeAST)) {
+      return {
+        type: typeAST.typeName
+      };
+    }
+    return void 0;
+  }
+  JsonSchemaUtils2.astToSchema = astToSchema;
+  function isASTMatchSchema(typeAST, schema) {
+    if (Array.isArray(schema)) {
+      return typeAST.isTypeEqual(
+        import_editor.ASTFactory.createUnion({
+          types: schema.map((_schema) => schemaToAST(_schema)).filter(Boolean)
+        })
+      );
+    }
+    return typeAST.isTypeEqual(schemaToAST(schema));
+  }
+  JsonSchemaUtils2.isASTMatchSchema = isASTMatchSchema;
+})(JsonSchemaUtils || (JsonSchemaUtils = {}));
+
 // src/components/variable-selector/use-variable-tree.tsx
-function useVariableTree() {
-  const available = (0, import_editor.useScopeAvailable)();
+function useVariableTree(params) {
+  const { includeSchema, excludeSchema } = params;
+  const available = (0, import_editor2.useScopeAvailable)();
   const getVariableTypeIcon = (0, import_react2.useCallback)((variable) => {
-    if (variable.meta.icon) {
+    if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
         return /* @__PURE__ */ import_react2.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: variable.meta.icon });
       }
       return variable.meta.icon;
     }
     const _type = variable.type;
-    if (import_editor.ASTMatch.isArray(_type)) {
+    if (import_editor2.ASTMatch.isArray(_type)) {
       return /* @__PURE__ */ import_react2.default.createElement(
         import_semi_ui.Icon,
         {
@@ -456,32 +584,87 @@ function useVariableTree() {
         }
       );
     }
-    if (import_editor.ASTMatch.isCustomType(_type)) {
+    if (import_editor2.ASTMatch.isCustomType(_type)) {
       return /* @__PURE__ */ import_react2.default.createElement(import_semi_ui.Icon, { size: "small", svg: VariableTypeIcons[_type.typeName.toLowerCase()] });
     }
     return /* @__PURE__ */ import_react2.default.createElement(import_semi_ui.Icon, { size: "small", svg: VariableTypeIcons[variable.type?.kind.toLowerCase()] });
   }, []);
   const renderVariable = (variable, parentFields = []) => {
     let type = variable?.type;
+    if (!type) {
+      return null;
+    }
     let children;
-    if (import_editor.ASTMatch.isObject(type)) {
+    if (import_editor2.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...parentFields, variable])).filter(Boolean);
       if (!children?.length) {
         return null;
       }
     }
-    const currPath = [...parentFields.map((_field) => _field.key), variable.key].join(".");
+    const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
+    const key = keyPath.join(".");
+    const isSchemaInclude = includeSchema ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+    if (!isSchemaMatch && !children?.length) {
+      return null;
+    }
     return {
-      key: currPath,
-      label: variable.meta.title || variable.key,
-      value: currPath,
+      key,
+      label: variable.meta?.title || variable.key,
+      value: key,
+      keyPath,
       icon: getVariableTypeIcon(variable),
-      children
+      children,
+      disabled: !isSchemaMatch,
+      rootMeta: parentFields[0]?.meta
     };
   };
   return [...available.variables.slice(0).reverse()].map((_variable) => renderVariable(_variable)).filter(Boolean);
 }
 
+// src/components/variable-selector/styles.tsx
+var import_styled_components = __toESM(require("styled-components"));
+var import_semi_ui2 = require("@douyinfe/semi-ui");
+var UIRootTitle = import_styled_components.default.span`
+  margin-right: 4px;
+  color: var(--semi-color-text-2);
+`;
+var UITag = (0, import_styled_components.default)(import_semi_ui2.Tag)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0;
+  }
+`;
+var UITreeSelect = (0, import_styled_components.default)(import_semi_ui2.TreeSelect)`
+  outline: ${({ $error }) => $error ? "1px solid red" : "none"};
+
+  height: 22px;
+  min-height: 22px;
+  line-height: 22px;
+
+  & .semi-tree-select-selection {
+    padding: 0 2px;
+    height: 22px;
+  }
+
+  & .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  & .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+`;
+
 // src/components/variable-selector/index.tsx
 var VariableSelector = ({
   value,
@@ -489,26 +672,70 @@ var VariableSelector = ({
   onChange,
   style,
   readonly = false,
-  hasError
+  includeSchema,
+  excludeSchema,
+  hasError,
+  triggerRender
 }) => {
-  const treeData = useVariableTree();
+  const treeData = useVariableTree({ includeSchema, excludeSchema });
+  const treeValue = (0, import_react3.useMemo)(() => {
+    if (typeof value === "string") {
+      console.warn(
+        "The Value of VariableSelector is a string, it should be an ARRAY. \n",
+        "Please check the value of VariableSelector \n"
+      );
+      return value;
+    }
+    return value?.join(".");
+  }, [value]);
+  const renderIcon = (icon) => {
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ import_react3.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+    }
+    return icon;
+  };
   return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(
-    import_semi_ui2.TreeSelect,
+    UITreeSelect,
     {
       dropdownMatchSelectWidth: false,
       disabled: readonly,
       treeData,
       size: "small",
-      value,
-      style: {
-        ...style,
-        outline: hasError ? "1px solid red" : void 0
-      },
+      value: treeValue,
+      clearIcon: null,
+      $error: hasError,
+      style,
       validateStatus: hasError ? "error" : void 0,
-      onChange: (option) => {
-        onChange(option);
+      onChange: (_, _config) => {
+        onChange(_config.keyPath);
+      },
+      renderSelectedItem: (_option) => {
+        if (!_option?.keyPath) {
+          return /* @__PURE__ */ import_react3.default.createElement(
+            UITag,
+            {
+              prefixIcon: /* @__PURE__ */ import_react3.default.createElement(import_semi_icons2.IconIssueStroked, null),
+              color: "amber",
+              closable: !readonly,
+              onClose: () => onChange(void 0)
+            },
+            config?.notFoundContent ?? "Undefined"
+          );
+        }
+        return /* @__PURE__ */ import_react3.default.createElement(
+          UITag,
+          {
+            prefixIcon: renderIcon(_option.rootMeta?.icon || _option?.icon),
+            closable: !readonly,
+            onClose: () => onChange(void 0)
+          },
+          /* @__PURE__ */ import_react3.default.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null),
+          _option.label
+        );
       },
-      showClear: true,
+      showClear: false,
+      arrowIcon: value ? null : /* @__PURE__ */ import_react3.default.createElement(import_semi_icons2.IconChevronDownStroked, { size: "small" }),
+      triggerRender,
       placeholder: config?.placeholder ?? "Select Variable..."
     }
   ));
@@ -531,13 +758,14 @@ var parseTypeSelectValue = (value) => {
   return { type };
 };
 function TypeSelector(props) {
-  const { value, onChange } = props;
+  const { value, onChange, disabled, style } = props;
   const selectValue = (0, import_react4.useMemo)(() => getTypeSelectValue(value), [value]);
   return /* @__PURE__ */ import_react4.default.createElement(
     import_semi_ui3.Cascader,
     {
+      disabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ import_react4.default.createElement(import_semi_ui3.Button, { size: "small", style: { width: 50 } }, getSchemaIcon(value)),
+      triggerRender: () => /* @__PURE__ */ import_react4.default.createElement(import_semi_ui3.Button, { size: "small", style }, getSchemaIcon(value)),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -551,52 +779,52 @@ function TypeSelector(props) {
 // src/components/json-schema-editor/index.tsx
 var import_react7 = __toESM(require("react"));
 var import_semi_ui4 = require("@douyinfe/semi-ui");
-var import_semi_icons3 = require("@douyinfe/semi-icons");
+var import_semi_icons4 = require("@douyinfe/semi-icons");
 
 // src/components/json-schema-editor/styles.tsx
 var import_react5 = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_semi_icons2 = __toESM(require("@douyinfe/semi-icons"));
-var UIContainer = import_styled_components.default.div`
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_semi_icons3 = __toESM(require("@douyinfe/semi-icons"));
+var UIContainer = import_styled_components2.default.div`
   /* & .semi-input {
     background-color: #fff;
     border-radius: 6px;
     height: 24px;
   } */
 `;
-var UIRow = import_styled_components.default.div`
+var UIRow = import_styled_components2.default.div`
   display: flex;
   align-items: center;
   gap: 6px;
 `;
-var UICollapseTrigger = import_styled_components.default.div`
+var UICollapseTrigger = import_styled_components2.default.div`
   cursor: pointer;
   margin-right: 5px;
 `;
-var UIExpandDetail = import_styled_components.default.div`
+var UIExpandDetail = import_styled_components2.default.div`
   display: flex;
   flex-direction: column;
 `;
-var UILabel = import_styled_components.default.div`
+var UILabel = import_styled_components2.default.div`
   font-size: 12px;
   color: #999;
   font-weight: 400;
   margin-bottom: 2px;
 `;
-var UIProperties = import_styled_components.default.div`
+var UIProperties = import_styled_components2.default.div`
   display: grid;
   grid-template-columns: auto 1fr;
 
-  ${({ $shrink }) => $shrink && import_styled_components.css`
+  ${({ $shrink }) => $shrink && import_styled_components2.css`
       padding-left: 10px;
       margin-top: 10px;
     `}
 `;
-var UIPropertyLeft = import_styled_components.default.div`
+var UIPropertyLeft = import_styled_components2.default.div`
   grid-column: 1;
   position: relative;
 
-  ${({ $showLine, $isLast }) => $showLine && import_styled_components.css`
+  ${({ $showLine, $isLast }) => $showLine && import_styled_components2.css`
       &::before {
         /* 竖线 */
         content: '';
@@ -622,7 +850,7 @@ var UIPropertyLeft = import_styled_components.default.div`
       }
     `}
 `;
-var UIPropertyRight = import_styled_components.default.div`
+var UIPropertyRight = import_styled_components2.default.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -630,30 +858,30 @@ var UIPropertyRight = import_styled_components.default.div`
     margin-bottom: 0px;
   }
 `;
-var UIPropertyMain = import_styled_components.default.div`
+var UIPropertyMain = import_styled_components2.default.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
 
-  ${({ $expand }) => $expand && import_styled_components.css`
+  ${({ $expand }) => $expand && import_styled_components2.css`
       background-color: #f5f5f5;
       padding: 10px;
       border-radius: 4px;
     `}
 `;
-var UICollapsible = import_styled_components.default.div`
+var UICollapsible = import_styled_components2.default.div`
   display: none;
 
-  ${({ $collapse }) => $collapse && import_styled_components.css`
+  ${({ $collapse }) => $collapse && import_styled_components2.css`
       display: block;
     `}
 `;
-var UIName = import_styled_components.default.div`
+var UIName = import_styled_components2.default.div`
   flex-grow: 1;
 `;
-var UIType = import_styled_components.default.div``;
-var UIRequired = import_styled_components.default.div``;
-var UIActions = import_styled_components.default.div`
+var UIType = import_styled_components2.default.div``;
+var UIRequired = import_styled_components2.default.div``;
+var UIActions = import_styled_components2.default.div`
   white-space: nowrap;
 `;
 var iconAddChildrenSvg = /* @__PURE__ */ import_react5.default.createElement(
@@ -676,7 +904,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ import_react5.default.createElement(
   ),
   /* @__PURE__ */ import_react5.default.createElement("path", { d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z" })
 );
-var IconAddChildren = () => /* @__PURE__ */ import_react5.default.createElement(import_semi_icons2.default, { size: "small", svg: iconAddChildrenSvg });
+var IconAddChildren = () => /* @__PURE__ */ import_react5.default.createElement(import_semi_icons3.default, { size: "small", svg: iconAddChildrenSvg });
 
 // src/components/json-schema-editor/hooks.tsx
 var import_react6 = require("react");
@@ -697,12 +925,16 @@ function usePropertiesEdit(value, onChange) {
   const drilldown = (0, import_react6.useMemo)(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
   const isDrilldownObject = drilldown.schema?.type === "object";
   const initPropertyList = (0, import_react6.useMemo)(
-    () => isDrilldownObject ? Object.entries(drilldown.schema?.properties || {}).map(
-      ([name, _value]) => ({
+    () => 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
+        ..._value,
+        extra: {
+          ..._value.extra || {},
+          index
+        }
       })
     ) : [],
     [isDrilldownObject]
@@ -718,7 +950,7 @@ function usePropertiesEdit(value, onChange) {
             nameMap.set(_property.name, _property);
           }
         }
-        return Object.entries(drilldown.schema?.properties || {}).map(([name, _value]) => {
+        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 {
@@ -764,7 +996,10 @@ function usePropertiesEdit(value, onChange) {
     });
   };
   const onAddProperty = () => {
-    updatePropertyList((_list) => [..._list, { key: genId(), name: "", type: "string" }]);
+    updatePropertyList((_list) => [
+      ..._list,
+      { key: genId(), name: "", type: "string", extra: { index: _list.length + 1 } }
+    ]);
   };
   const onRemoveProperty = (key) => {
     updatePropertyList((_list) => _list.filter((_property) => _property.key !== key));
@@ -808,7 +1043,7 @@ function JsonSchemaEditor(props) {
         onRemoveProperty(_property.key);
       }
     }
-  ))), /* @__PURE__ */ import_react7.default.createElement(import_semi_ui4.Button, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ import_react7.default.createElement(import_semi_icons3.IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
+  ))), /* @__PURE__ */ import_react7.default.createElement(import_semi_ui4.Button, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
 }
 function PropertyEdit(props) {
   const { value, config, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
@@ -824,7 +1059,7 @@ function PropertyEdit(props) {
     });
   };
   const showCollapse = isDrilldownObject && propertyList.length > 0;
-  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(UIPropertyLeft, { $isLast, $showLine }, showCollapse && /* @__PURE__ */ import_react7.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react7.default.createElement(import_semi_icons3.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react7.default.createElement(import_semi_icons3.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react7.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react7.default.createElement(UIPropertyMain, { $expand: expand }, /* @__PURE__ */ import_react7.default.createElement(UIRow, null, /* @__PURE__ */ import_react7.default.createElement(UIName, null, /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(UIPropertyLeft, { $isLast, $showLine }, showCollapse && /* @__PURE__ */ import_react7.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react7.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react7.default.createElement(UIPropertyMain, { $expand: expand }, /* @__PURE__ */ import_react7.default.createElement(UIRow, null, /* @__PURE__ */ import_react7.default.createElement(UIName, null, /* @__PURE__ */ import_react7.default.createElement(
     import_semi_ui4.Input,
     {
       placeholder: config?.placeholder ?? "Input Variable Name",
@@ -854,7 +1089,7 @@ function PropertyEdit(props) {
     {
       size: "small",
       theme: "borderless",
-      icon: expand ? /* @__PURE__ */ import_react7.default.createElement(import_semi_icons3.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react7.default.createElement(import_semi_icons3.IconExpand, { size: "small" }),
+      icon: expand ? /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconExpand, { size: "small" }),
       onClick: () => setExpand((_expand) => !_expand)
     }
   ), isDrilldownObject && /* @__PURE__ */ import_react7.default.createElement(
@@ -873,7 +1108,7 @@ function PropertyEdit(props) {
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react7.default.createElement(import_semi_icons3.IconMinus, { size: "small" }),
+      icon: /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconMinus, { size: "small" }),
       onClick: onRemove
     }
   ))), expand && /* @__PURE__ */ import_react7.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react7.default.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ import_react7.default.createElement(
@@ -901,12 +1136,300 @@ function PropertyEdit(props) {
     }
   ))))));
 }
+
+// src/components/batch-variable-selector/index.tsx
+var import_react8 = __toESM(require("react"));
+var import_editor3 = require("@flowgram.ai/editor");
+var batchVariableSchema = {
+  type: "array",
+  extra: { weak: true }
+};
+function BatchVariableSelector(props) {
+  return /* @__PURE__ */ import_react8.default.createElement(import_editor3.PrivateScopeProvider, null, /* @__PURE__ */ import_react8.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+}
+
+// src/components/constant-input/index.tsx
+var import_react9 = __toESM(require("react"));
+var import_semi_ui5 = require("@douyinfe/semi-ui");
+var defaultStrategies = [
+  {
+    hit: (schema) => schema?.type === "string",
+    Renderer: (props) => /* @__PURE__ */ import_react9.default.createElement(import_semi_ui5.Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+  },
+  {
+    hit: (schema) => schema?.type === "number",
+    Renderer: (props) => /* @__PURE__ */ import_react9.default.createElement(
+      import_semi_ui5.InputNumber,
+      {
+        placeholder: "Please Input Number",
+        size: "small",
+        disabled: props.readonly,
+        hideButtons: true,
+        ...props
+      }
+    )
+  },
+  {
+    hit: (schema) => schema?.type === "integer",
+    Renderer: (props) => /* @__PURE__ */ import_react9.default.createElement(
+      import_semi_ui5.InputNumber,
+      {
+        placeholder: "Please Input Integer",
+        size: "small",
+        disabled: props.readonly,
+        hideButtons: true,
+        precision: 0,
+        ...props
+      }
+    )
+  },
+  {
+    hit: (schema) => schema?.type === "boolean",
+    Renderer: (props) => {
+      const { value, onChange, ...rest } = props;
+      return /* @__PURE__ */ import_react9.default.createElement(
+        import_semi_ui5.Select,
+        {
+          placeholder: "Please Select Boolean",
+          size: "small",
+          disabled: props.readonly,
+          optionList: [
+            { label: "True", value: 1 },
+            { label: "False", value: 0 }
+          ],
+          value: value ? 1 : 0,
+          onChange: (value2) => onChange?.(!!value2),
+          ...rest
+        }
+      );
+    }
+  }
+];
+function ConstantInput(props) {
+  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const strategies = (0, import_react9.useMemo)(
+    () => [...defaultStrategies, ...extraStrategies || []],
+    [extraStrategies]
+  );
+  const Renderer = (0, import_react9.useMemo)(() => {
+    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+    return strategy?.Renderer;
+  }, [strategies, schema]);
+  if (!Renderer) {
+    return /* @__PURE__ */ import_react9.default.createElement(import_semi_ui5.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
+  }
+  return /* @__PURE__ */ import_react9.default.createElement(Renderer, { value, onChange, readonly, ...rest });
+}
+
+// src/components/dynamic-value-input/index.tsx
+var import_react10 = __toESM(require("react"));
+var import_semi_ui6 = require("@douyinfe/semi-ui");
+var import_semi_icons5 = require("@douyinfe/semi-icons");
+
+// src/components/dynamic-value-input/styles.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+var UIContainer2 = import_styled_components3.default.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+var UIMain = import_styled_components3.default.div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
+var UITrigger = import_styled_components3.default.div``;
+
+// src/components/dynamic-value-input/index.tsx
+function DynamicValueInput({
+  value,
+  onChange,
+  readonly,
+  style,
+  schema,
+  constantProps
+}) {
+  const renderMain = () => {
+    if (value?.type === "ref") {
+      return /* @__PURE__ */ import_react10.default.createElement(
+        VariableSelector,
+        {
+          value: value?.content,
+          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+          includeSchema: schema,
+          readonly
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react10.default.createElement(
+      ConstantInput,
+      {
+        value: value?.content,
+        onChange: (_v) => onChange({ type: "constant", content: _v }),
+        schema: schema || { type: "string" },
+        readonly,
+        ...constantProps
+      }
+    );
+  };
+  const renderTrigger = () => /* @__PURE__ */ import_react10.default.createElement(
+    VariableSelector,
+    {
+      style: { width: "100%" },
+      value: value?.type === "ref" ? value?.content : void 0,
+      onChange: (_v) => onChange({ type: "ref", content: _v }),
+      includeSchema: schema,
+      readonly,
+      triggerRender: () => /* @__PURE__ */ import_react10.default.createElement(import_semi_ui6.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconSetting, { size: "small" }) })
+    }
+  );
+  return /* @__PURE__ */ import_react10.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react10.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react10.default.createElement(UITrigger, null, renderTrigger()));
+}
+
+// src/effects/provide-batch-input/index.ts
+var import_editor4 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor4.createEffectFromVariableProvider)({
+  private: true,
+  parse: (value, ctx) => [
+    import_editor4.ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: (0, import_editor4.getNodeForm)(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: import_editor4.ASTFactory.createObject({
+        properties: [
+          import_editor4.ASTFactory.createProperty({
+            key: "item",
+            initializer: import_editor4.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor4.ASTFactory.createKeyPathExpression({
+                keyPath: value.content || []
+              })
+            })
+          }),
+          import_editor4.ASTFactory.createProperty({
+            key: "index",
+            type: import_editor4.ASTFactory.createNumber()
+          })
+        ]
+      })
+    })
+  ]
+});
+
+// src/effects/provide-batch-outputs/index.ts
+var import_editor5 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor5.createEffectFromVariableProvider)({
+  private: true,
+  parse: (value, ctx) => [
+    import_editor5.ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: (0, import_editor5.getNodeForm)(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: import_editor5.ASTFactory.createObject({
+        properties: Object.entries(value).map(
+          ([_key, value2]) => import_editor5.ASTFactory.createProperty({
+            key: _key,
+            initializer: import_editor5.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor5.ASTFactory.createKeyPathExpression({
+                keyPath: value2.content || []
+              })
+            })
+          })
+        )
+      })
+    })
+  ]
+});
+
+// src/utils/format-legacy-refs/index.ts
+var import_lodash2 = require("lodash");
+function formatLegacyRefOnSubmit(value) {
+  if ((0, import_lodash2.isObject)(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnSubmit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+  return value;
+}
+function formatLegacyRefOnInit(value) {
+  if ((0, import_lodash2.isObject)(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnInit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+  return value;
+}
+function isLegacyFlowRefValueSchema(value) {
+  return (0, import_lodash2.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+}
+function isNewFlowRefValueSchema(value) {
+  return (0, import_lodash2.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(".")
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrayIcons,
+  BatchVariableSelector,
+  ConstantInput,
+  DynamicValueInput,
   JsonSchemaEditor,
+  JsonSchemaUtils,
   TypeSelector,
   VariableSelector,
-  VariableTypeIcons
+  VariableTypeIcons,
+  formatLegacyRefOnInit,
+  formatLegacyRefOnSubmit,
+  formatLegacyRefToNewRef,
+  formatNewRefToLegacyRef,
+  getSchemaIcon,
+  getTypeSelectValue,
+  isLegacyFlowRefValueSchema,
+  isNewFlowRefValueSchema,
+  parseTypeSelectValue,
+  provideBatchInputEffect,
+  provideBatchOutputsEffect
 });
 //# sourceMappingURL=index.js.map