@flowgram.ai/form-materials 0.4.1 → 0.4.3

package/dist/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   ConditionRow: () => ConditionRow,
   ConstantInput: () => ConstantInput,
   DisplayFlowValue: () => DisplayFlowValue,
+  DisplayInputsValueAllInTag: () => DisplayInputsValueAllInTag,
   DisplayInputsValues: () => DisplayInputsValues,
   DisplayOutputs: () => DisplayOutputs,
   DisplaySchemaTag: () => DisplaySchemaTag,
@@ -81,6 +82,7 @@ __export(src_exports, {
   provideBatchOutputsEffect: () => provideBatchOutputsEffect,
   provideJsonSchemaOutputs: () => provideJsonSchemaOutputs,
   syncVariableTitle: () => syncVariableTitle,
+  useObjectList: () => useObjectList,
   useTypeManager: () => useTypeManager,
   useVariableTree: () => useVariableTree,
   validateFlowValue: () => validateFlowValue,
@@ -193,7 +195,7 @@ var extraSchema = import_zod.default.object({
 }).optional();
 var constantSchema = import_zod.default.object({
   type: import_zod.default.literal("constant"),
-  content: import_zod.default.union([import_zod.default.string(), import_zod.default.number(), import_zod.default.boolean()]).optional(),
+  content: import_zod.default.any().optional(),
   schema: import_zod.default.any().optional(),
   extra: extraSchema
 });
@@ -273,13 +275,13 @@ var FlowValueUtils;
     return;
   }
   FlowValueUtils2.traverse = traverse;
-  function getTemplateKeyPaths2(value) {
-    const keyPathReg = /{{(.*?)}}/g;
+  function getTemplateKeyPaths(value) {
+    const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
     return (0, import_lodash2.uniq)(value.content?.match(keyPathReg) || []).map(
       (_keyPath) => _keyPath.slice(2, -2).split(".")
     );
   }
-  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths2;
+  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths;
   function inferConstantJsonSchema(value) {
     if (value?.schema) {
       return value.schema;
@@ -1127,12 +1129,24 @@ function TypeSelector(props) {
     }),
     []
   );
+  const isDisabled = readonly || disabled;
   return /* @__PURE__ */ import_react14.default.createElement(
     import_semi_ui8.Cascader,
     {
-      disabled: readonly || disabled,
+      disabled: isDisabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
+      triggerRender: () => /* @__PURE__ */ import_react14.default.createElement(
+        import_semi_ui8.IconButton,
+        {
+          size: "small",
+          style: {
+            ...isDisabled ? { pointerEvents: "none" } : {},
+            ...style || {}
+          },
+          disabled: isDisabled,
+          icon
+        }
+      ),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -1685,8 +1699,25 @@ function useSelectSchema(schemaFromProps, constantProps, value) {
   if (value?.type === "constant") {
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
+  const changeVersion = (0, import_react22.useRef)(0);
+  const effectVersion = (0, import_react22.useRef)(0);
   const [selectSchema, setSelectSchema] = (0, import_react22.useState)(defaultSelectSchema);
-  return [selectSchema, setSelectSchema];
+  (0, import_react22.useEffect)(() => {
+    effectVersion.current += 1;
+    if (changeVersion.current === effectVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+    if (value?.type === "constant" && value?.schema) {
+      setSelectSchema(value?.schema);
+      return;
+    }
+  }, [value]);
+  const setSelectSchemaWithVersionUpdate = (schema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+  return [selectSchema, setSelectSchemaWithVersionUpdate];
 }
 function useIncludeSchema(schemaFromProps) {
   const includeSchema = (0, import_react22.useMemo)(() => {
@@ -1702,6 +1733,11 @@ function useIncludeSchema(schemaFromProps) {
 }
 
 // src/components/dynamic-value-input/index.tsx
+var DEFAULT_VALUE = {
+  type: "constant",
+  content: "",
+  schema: { type: "string" }
+};
 function DynamicValueInput({
   value,
   onChange,
@@ -1713,6 +1749,7 @@ function DynamicValueInput({
   const refVariable = useRefVariable(value);
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
+  const typeManager = (0, import_json_schema7.useTypeManager)();
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return /* @__PURE__ */ import_react23.default.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
@@ -1727,20 +1764,18 @@ function DynamicValueInput({
         value: selectSchema,
         onChange: (_v) => {
           setSelectSchema(_v || { type: "string" });
-          let content;
+          const schema = _v || { type: "string" };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === "object") {
             content = "{}";
           }
           if (_v?.type === "array") {
             content = "[]";
           }
-          if (_v?.type === "boolean") {
-            content = false;
-          }
           onChange({
             type: "constant",
             content,
-            schema: _v || { type: "string" }
+            schema
           });
         },
         readonly
@@ -1754,7 +1789,7 @@ function DynamicValueInput({
         {
           style: { width: "100%" },
           value: value?.content,
-          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
           includeSchema,
           readonly
         }
@@ -1768,17 +1803,17 @@ function DynamicValueInput({
         onChange: (_v) => onChange({ type: "constant", content: _v, schema: constantSchema2 }),
         schema: constantSchema2 || { type: "string" },
         readonly,
-        strategies: [...constantProps?.strategies || []],
         fallbackRenderer: () => /* @__PURE__ */ import_react23.default.createElement(
           InjectVariableSelector,
           {
             style: { width: "100%" },
-            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
             includeSchema,
             readonly
           }
         ),
-        ...constantProps
+        ...constantProps,
+        strategies: [...constantProps?.strategies || []]
       }
     );
   };
@@ -2413,8 +2448,16 @@ function VariableTree() {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
-      ...range,
+      from,
+      to,
       text: "{{" + variablePath + "}}"
     });
     setVisible(false);
@@ -2576,7 +2619,7 @@ function VariableTagInject() {
   const scope = (0, import_editor23.useCurrentScope)();
   (0, import_react39.useLayoutEffect)(() => {
     const atMatcher = new import_view4.MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => import_view4.Decoration.replace({
         widget: new VariableTagWidget({
           keyPath: match[1]?.split(".") ?? [],
@@ -2664,20 +2707,32 @@ function InputsPicker({
       children
     };
   };
-  const treeData = (0, import_react42.useMemo)(
-    () => Object.entries(inputsValues).map(([key, value]) => {
-      if (value?.type === "ref") {
+  const getTreeData = (value, keyPath) => {
+    const currKey = keyPath.join(".");
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
         const variable = available.getByKeyPath(value.content || []);
         if (variable) {
-          return renderVariable(variable, [key]);
+          return renderVariable(variable, keyPath);
         }
       }
       return {
-        key,
-        value: key,
-        label: key
+        key: currKey,
+        value: currKey,
+        label: (0, import_lodash6.last)(keyPath)
       };
-    }),
+    }
+    if ((0, import_lodash6.isPlainObject)(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: (0, import_lodash6.last)(keyPath),
+        children: Object.entries(value).map(([key, value2]) => getTreeData(value2, [...keyPath, key])).filter(Boolean)
+      };
+    }
+  };
+  const treeData = (0, import_react42.useMemo)(
+    () => Object.entries(inputsValues).map(([key, value]) => getTreeData(value, [key])).filter(Boolean),
     []
   );
   return /* @__PURE__ */ import_react42.default.createElement(import_semi_ui18.Tree, { treeData, onSelect: (v) => onSelect(v) });
@@ -2694,6 +2749,13 @@ function InputsTree({ inputsValues }) {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
       ...range,
       text: "{{" + variablePath + "}}"
@@ -2918,7 +2980,7 @@ function VariableTagInject2() {
   const scope = (0, import_editor25.useCurrentScope)();
   (0, import_react48.useLayoutEffect)(() => {
     const atMatcher = new import_view5.MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => import_view5.Decoration.replace({
         widget: new VariableTagWidget2({
           keyPath: match[1]?.split(".") ?? [],
@@ -3065,7 +3127,20 @@ function InputsValues({
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react51.default.createElement(import_semi_ui23.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons9.IconPlus, null), size: "small", onClick: () => add() }, import_editor26.I18n.t("Add")));
+  )))), /* @__PURE__ */ import_react51.default.createElement(
+    import_semi_ui23.Button,
+    {
+      disabled: readonly,
+      icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons9.IconPlus, null),
+      size: "small",
+      onClick: () => add({
+        type: "constant",
+        content: "",
+        schema: { type: "string" }
+      })
+    },
+    import_editor26.I18n.t("Add")
+  ));
 }
 
 // src/components/display-schema-tree/index.tsx
@@ -3278,18 +3353,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
       return { type: "string" };
     }
     if (value?.type === "constant") {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === "string") {
-        return { type: "string" };
-      }
-      if (typeof value?.content === "number") {
-        return { type: "number" };
-      }
-      if (typeof value?.content === "boolean") {
-        return { type: "boolean" };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
     return { type: "unknown" };
   }, [value, variable?.hash]);
@@ -3306,6 +3370,8 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 
 // src/components/display-inputs-values/index.tsx
 var import_react56 = __toESM(require("react"));
+var import_lodash8 = require("lodash");
+var import_editor29 = require("@flowgram.ai/editor");
 
 // src/components/display-inputs-values/styles.ts
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -3318,12 +3384,40 @@ var DisplayInputsWrapper = import_styled_components14.default.div`
 // src/components/display-inputs-values/index.tsx
 function DisplayInputsValues({ value, showIconInTree }) {
   const childEntries = Object.entries(value || {});
-  return /* @__PURE__ */ import_react56.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ import_react56.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
+  return /* @__PURE__ */ import_react56.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => {
+    if (FlowValueUtils.isFlowValue(value2)) {
+      return /* @__PURE__ */ import_react56.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree });
+    }
+    if ((0, import_lodash8.isPlainObject)(value2)) {
+      return /* @__PURE__ */ import_react56.default.createElement(
+        DisplayInputsValueAllInTag,
+        {
+          key,
+          title: key,
+          value: value2,
+          showIconInTree
+        }
+      );
+    }
+    return null;
+  }));
+}
+function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree
+}) {
+  const available = (0, import_editor29.useScopeAvailable)();
+  const schema = (0, import_react56.useMemo)(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+  return /* @__PURE__ */ import_react56.default.createElement(DisplaySchemaTag, { title, value: schema, showIconInTree });
 }
 
 // src/components/assign-rows/index.tsx
 var import_react59 = __toESM(require("react"));
-var import_editor29 = require("@flowgram.ai/editor");
+var import_editor30 = require("@flowgram.ai/editor");
 var import_semi_ui27 = require("@douyinfe/semi-ui");
 var import_semi_icons11 = require("@douyinfe/semi-icons");
 
@@ -3410,7 +3504,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ import_react59.default.createElement(import_editor29.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(import_editor30.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
     AssignRow,
     {
       key: childField.key,
@@ -3444,7 +3538,7 @@ function AssignRows(props) {
 
 // src/components/inputs-values-tree/index.tsx
 var import_react63 = __toESM(require("react"));
-var import_editor31 = require("@flowgram.ai/editor");
+var import_editor32 = require("@flowgram.ai/editor");
 var import_semi_ui29 = require("@douyinfe/semi-ui");
 var import_semi_icons14 = require("@douyinfe/semi-icons");
 
@@ -3554,16 +3648,16 @@ var IconAddChildren2 = () => /* @__PURE__ */ import_react60.default.createElemen
 
 // src/components/inputs-values-tree/row.tsx
 var import_react62 = __toESM(require("react"));
-var import_editor30 = require("@flowgram.ai/editor");
+var import_editor31 = require("@flowgram.ai/editor");
 var import_semi_ui28 = require("@douyinfe/semi-ui");
 var import_semi_icons13 = require("@douyinfe/semi-icons");
 
 // src/components/inputs-values-tree/hooks/use-child-list.tsx
 var import_react61 = require("react");
-var import_lodash8 = require("lodash");
+var import_lodash9 = require("lodash");
 function useChildList(value, onChange) {
   const canAddField = (0, import_react61.useMemo)(() => {
-    if (!(0, import_lodash8.isPlainObject)(value)) {
+    if (!(0, import_lodash9.isPlainObject)(value)) {
       return false;
     }
     if (FlowValueUtils.isFlowValue(value)) {
@@ -3572,7 +3666,7 @@ function useChildList(value, onChange) {
     return true;
   }, [value]);
   const objectListValue = (0, import_react61.useMemo)(() => {
-    if ((0, import_lodash8.isPlainObject)(value)) {
+    if ((0, import_lodash9.isPlainObject)(value)) {
       if (FlowValueUtils.isFlowValue(value)) {
         return void 0;
       }
@@ -3580,7 +3674,6 @@ function useChildList(value, onChange) {
     }
     return void 0;
   }, [value]);
-  console.log("debugger objectListValue", objectListValue);
   const { list, add, updateKey, updateValue, remove } = useObjectList({
     value: objectListValue,
     onChange: (value2) => {
@@ -3588,8 +3681,13 @@ function useChildList(value, onChange) {
     },
     sortIndexKey: (value2) => FlowValueUtils.isFlowValue(value2) ? "extra.index" : ""
   });
+  const hasChildren = (0, import_react61.useMemo)(
+    () => canAddField && (list.length > 0 || Object.keys(objectListValue || {}).length > 0),
+    [canAddField, list.length, Object.keys(objectListValue || {}).length]
+  );
   return {
     canAddField,
+    hasChildren,
     list,
     add,
     updateKey,
@@ -3607,7 +3705,7 @@ var AddObjectChildStrategy = {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: import_editor30.I18n.t("Configure via child fields")
+      value: import_editor31.I18n.t("Configure via child fields")
     }
   )
 };
@@ -3625,12 +3723,21 @@ function InputValueRow(props) {
     readonly
   } = props;
   const [collapse, setCollapse] = (0, import_react62.useState)(false);
-  const { canAddField, list, add, updateKey, updateValue, remove } = useChildList(
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
     value,
     onUpdateValue
   );
-  const hasChildren = canAddField && list.length > 0;
-  const flowDisplayValue = hasChildren ? { type: "constant", schema: { type: " object" } } : value;
+  const strategies = (0, import_react62.useMemo)(
+    () => [...hasChildren ? [AddObjectChildStrategy] : [], ...constantProps?.strategies || []],
+    [hasChildren, constantProps?.strategies]
+  );
+  const flowDisplayValue = (0, import_react62.useMemo)(
+    () => hasChildren ? {
+      type: "constant",
+      schema: { type: "object" }
+    } : value,
+    [hasChildren, value]
+  );
   return /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement(UITreeItemLeft2, { $isLast, $showLine: $level > 0, $showCollapse: hasChildren }, hasChildren && /* @__PURE__ */ import_react62.default.createElement(UICollapseTrigger2, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react62.default.createElement(import_semi_icons13.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react62.default.createElement(import_semi_icons13.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react62.default.createElement(UITreeItemRight2, null, /* @__PURE__ */ import_react62.default.createElement(UITreeItemMain2, null, /* @__PURE__ */ import_react62.default.createElement(UIRow4, null, /* @__PURE__ */ import_react62.default.createElement(
     BlurInput,
     {
@@ -3639,7 +3746,7 @@ function InputValueRow(props) {
       size: "small",
       value: keyName,
       onChange: (v) => onUpdateKey?.(v),
-      placeholder: import_editor30.I18n.t("Input Key")
+      placeholder: import_editor31.I18n.t("Input Key")
     }
   ), /* @__PURE__ */ import_react62.default.createElement(
     InjectDynamicValueInput,
@@ -3651,10 +3758,7 @@ function InputValueRow(props) {
       hasError,
       constantProps: {
         ...constantProps,
-        strategies: [
-          ...hasChildren ? [AddObjectChildStrategy] : [],
-          ...constantProps?.strategies || []
-        ]
+        strategies
       }
     }
   ), /* @__PURE__ */ import_react62.default.createElement(UIActions2, null, canAddField && /* @__PURE__ */ import_react62.default.createElement(
@@ -3665,7 +3769,11 @@ function InputValueRow(props) {
       theme: "borderless",
       icon: /* @__PURE__ */ import_react62.default.createElement(IconAddChildren2, null),
       onClick: () => {
-        add();
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
         setCollapse(true);
       }
     }
@@ -3730,36 +3838,42 @@ function InputsValuesTree(props) {
       disabled: readonly,
       icon: /* @__PURE__ */ import_react63.default.createElement(import_semi_icons14.IconPlus, null),
       size: "small",
-      onClick: add
+      onClick: () => {
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
+      }
     },
-    import_editor31.I18n.t("Add")
+    import_editor32.I18n.t("Add")
   ));
 }
 
 // src/effects/provide-batch-input/index.ts
-var import_editor32 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor32.createEffectFromVariableProvider)({
+var import_editor33 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor33.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor32.ASTFactory.createVariableDeclaration({
+    import_editor33.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor32.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor33.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor32.ASTFactory.createObject({
+      type: import_editor33.ASTFactory.createObject({
         properties: [
-          import_editor32.ASTFactory.createProperty({
+          import_editor33.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor32.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor32.ASTFactory.createKeyPathExpression({
+            initializer: import_editor33.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor33.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor32.ASTFactory.createProperty({
+          import_editor33.ASTFactory.createProperty({
             key: "index",
-            type: import_editor32.ASTFactory.createNumber()
+            type: import_editor33.ASTFactory.createNumber()
           })
         ]
       })
@@ -3768,13 +3882,13 @@ var provideBatchInputEffect = (0, import_editor32.createEffectFromVariableProvid
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_editor33 = require("@flowgram.ai/editor");
+var import_editor34 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor33.DataEvent.onValueInit,
+    event: import_editor34.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor33.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor34.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -3832,13 +3946,13 @@ function traverseRef(name, value, cb) {
 
 // src/effects/provide-json-schema-outputs/index.ts
 var import_json_schema11 = require("@flowgram.ai/json-schema");
-var import_editor34 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor34.createEffectFromVariableProvider)({
+var import_editor35 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor35.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor34.ASTFactory.createVariableDeclaration({
+    import_editor35.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor34.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor35.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: import_json_schema11.JsonSchemaUtils.schemaToAST(value)
@@ -3847,12 +3961,12 @@ var provideJsonSchemaOutputs = (0, import_editor34.createEffectFromVariableProvi
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor35 = require("@flowgram.ai/editor");
+var import_editor36 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor35.DataEvent.onValueChange,
+    event: import_editor36.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor35.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor36.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             ..._var.meta || {},
@@ -3866,17 +3980,17 @@ var syncVariableTitle = [
 ];
 
 // src/effects/validate-when-variable-sync/index.ts
-var import_lodash9 = require("lodash");
-var import_editor36 = require("@flowgram.ai/editor");
+var import_lodash10 = require("lodash");
+var import_editor37 = require("@flowgram.ai/editor");
 var validateWhenVariableSync = ({
   scope
 } = {}) => [
   {
-    event: import_editor36.DataEvent.onValueInit,
+    event: import_editor37.DataEvent.onValueInit,
     effect: ({ context, form }) => {
-      const nodeScope = scope === "private" ? (0, import_editor36.getNodePrivateScope)(context.node) : (0, import_editor36.getNodeScope)(context.node);
+      const nodeScope = scope === "private" ? (0, import_editor37.getNodePrivateScope)(context.node) : (0, import_editor37.getNodeScope)(context.node);
       const disposable = nodeScope.available.onListOrAnyVarChange(() => {
-        if (!(0, import_lodash9.isEmpty)(form.state.errors)) {
+        if (!(0, import_lodash10.isEmpty)(form.state.errors)) {
           form.validate();
         }
       });
@@ -3886,16 +4000,16 @@ var validateWhenVariableSync = ({
 ];
 
 // src/effects/listen-ref-value-change/index.ts
-var import_editor37 = require("@flowgram.ai/editor");
+var import_editor38 = require("@flowgram.ai/editor");
 var listenRefValueChange = (cb) => [
   {
-    event: import_editor37.DataEvent.onValueInitOrChange,
+    event: import_editor38.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor37.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor38.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (v) => {
           cb({ ...params, variable: v });
@@ -3910,16 +4024,16 @@ var listenRefValueChange = (cb) => [
 
 // src/effects/listen-ref-schema-change/index.ts
 var import_json_schema12 = require("@flowgram.ai/json-schema");
-var import_editor38 = require("@flowgram.ai/editor");
+var import_editor39 = require("@flowgram.ai/editor");
 var listenRefSchemaChange = (cb) => [
   {
-    event: import_editor38.DataEvent.onValueInitOrChange,
+    event: import_editor39.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor38.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor39.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (_type) => {
           cb({ ...params, schema: import_json_schema12.JsonSchemaUtils.astToSchema(_type) });
@@ -3936,21 +4050,21 @@ var listenRefSchemaChange = (cb) => [
 ];
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor39 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor39.createEffectFromVariableProvider)({
+var import_editor40 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor40.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor39.ASTFactory.createVariableDeclaration({
+    import_editor40.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor39.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor40.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor39.ASTFactory.createObject({
+      type: import_editor40.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor39.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor40.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor39.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor39.ASTFactory.createKeyPathExpression({
+            initializer: import_editor40.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor40.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -3960,7 +4074,7 @@ var provideBatchOutputsEffect = (0, import_editor39.createEffectFromVariableProv
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor39.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor40.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -3968,7 +4082,7 @@ var createBatchOutputsFormPlugin = (0, import_editor39.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor39.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor40.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -3978,21 +4092,21 @@ var createBatchOutputsFormPlugin = (0, import_editor39.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor39.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor40.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor39.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor40.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor39.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor39.getNodeScope)(_childBlock))
+            (0, import_editor40.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor40.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -4002,20 +4116,20 @@ var createBatchOutputsFormPlugin = (0, import_editor39.defineFormPluginCreator)(
 });
 
 // src/form-plugins/infer-inputs-plugin/index.ts
-var import_lodash10 = require("lodash");
-var import_editor40 = require("@flowgram.ai/editor");
-var createInferInputsPlugin = (0, import_editor40.defineFormPluginCreator)({
+var import_lodash11 = require("lodash");
+var import_editor41 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor41.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
       return;
     }
     addFormatOnSubmit((formData, ctx) => {
-      (0, import_lodash10.set)(
+      (0, import_lodash11.set)(
         formData,
         targetKey,
         FlowValueUtils.inferJsonSchema(
-          (0, import_lodash10.get)(formData, sourceKey),
-          scope === "private" ? (0, import_editor40.getNodePrivateScope)(ctx.node) : (0, import_editor40.getNodeScope)(ctx.node)
+          (0, import_lodash11.get)(formData, sourceKey),
+          scope === "private" ? (0, import_editor41.getNodePrivateScope)(ctx.node) : (0, import_editor41.getNodeScope)(ctx.node)
         )
       );
       return formData;
@@ -4024,34 +4138,34 @@ var createInferInputsPlugin = (0, import_editor40.defineFormPluginCreator)({
 });
 
 // src/form-plugins/infer-assign-plugin/index.ts
-var import_lodash11 = require("lodash");
+var import_lodash12 = require("lodash");
 var import_json_schema13 = require("@flowgram.ai/json-schema");
-var import_editor41 = require("@flowgram.ai/editor");
-var createInferAssignPlugin = (0, import_editor41.defineFormPluginCreator)({
+var import_editor42 = require("@flowgram.ai/editor");
+var createInferAssignPlugin = (0, import_editor42.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
     if (!assignKey || !outputKey) {
       return;
     }
     mergeEffect({
-      [assignKey]: (0, import_editor41.createEffectFromVariableProvider)({
+      [assignKey]: (0, import_editor42.createEffectFromVariableProvider)({
         parse: (value, ctx) => {
-          const declareRows = (0, import_lodash11.uniqBy)(
+          const declareRows = (0, import_lodash12.uniqBy)(
             value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
             "left"
           );
           return [
-            import_editor41.ASTFactory.createVariableDeclaration({
+            import_editor42.ASTFactory.createVariableDeclaration({
               key: `${ctx.node.id}`,
               meta: {
-                title: (0, import_editor41.getNodeForm)(ctx.node)?.getValueIn("title"),
+                title: (0, import_editor42.getNodeForm)(ctx.node)?.getValueIn("title"),
                 icon: ctx.node.getNodeRegistry().info?.icon
               },
-              type: import_editor41.ASTFactory.createObject({
+              type: import_editor42.ASTFactory.createObject({
                 properties: declareRows.map(
-                  (_v) => import_editor41.ASTFactory.createProperty({
+                  (_v) => import_editor42.ASTFactory.createProperty({
                     key: _v.left,
                     type: _v.right?.type === "constant" ? import_json_schema13.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
-                    initializer: _v.right?.type === "ref" ? import_editor41.ASTFactory.createKeyPathExpression({
+                    initializer: _v.right?.type === "ref" ? import_editor42.ASTFactory.createKeyPathExpression({
                       keyPath: _v.right?.content || []
                     }) : {}
                   })
@@ -4063,10 +4177,10 @@ var createInferAssignPlugin = (0, import_editor41.defineFormPluginCreator)({
       })
     });
     addFormatOnSubmit((formData, ctx) => {
-      (0, import_lodash11.set)(
+      (0, import_lodash12.set)(
         formData,
         outputKey,
-        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor41.getNodeScope)(ctx.node).output.variables?.[0]?.type)
+        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor42.getNodeScope)(ctx.node).output.variables?.[0]?.type)
       );
       return formData;
     });
@@ -4074,36 +4188,36 @@ var createInferAssignPlugin = (0, import_editor41.defineFormPluginCreator)({
 });
 
 // src/validate/validate-flow-value/index.tsx
-var import_lodash12 = require("lodash");
-var import_editor42 = require("@flowgram.ai/editor");
+var import_lodash13 = require("lodash");
+var import_editor43 = require("@flowgram.ai/editor");
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
   const {
     required: requiredMessage = "Field is required",
     unknownVariable: unknownVariableMessage = "Unknown Variable"
   } = errorMessages || {};
-  if (required && ((0, import_lodash12.isNil)(value) || (0, import_lodash12.isNil)(value?.content) || value?.content === "")) {
+  if (required && ((0, import_lodash13.isNil)(value) || (0, import_lodash13.isNil)(value?.content) || value?.content === "")) {
     return {
-      level: import_editor42.FeedbackLevel.Error,
+      level: import_editor43.FeedbackLevel.Error,
       message: requiredMessage
     };
   }
   if (value?.type === "ref") {
-    const variable = (0, import_editor42.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+    const variable = (0, import_editor43.getNodeScope)(node).available.getByKeyPath(value?.content || []);
     if (!variable) {
       return {
-        level: import_editor42.FeedbackLevel.Error,
+        level: import_editor43.FeedbackLevel.Error,
         message: unknownVariableMessage
       };
     }
   }
   if (value?.type === "template") {
-    const allRefs = getTemplateKeyPaths(value);
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
     for (const ref of allRefs) {
-      const variable = (0, import_editor42.getNodeScope)(node).available.getByKeyPath(ref);
+      const variable = (0, import_editor43.getNodeScope)(node).available.getByKeyPath(ref);
       if (!variable) {
         return {
-          level: import_editor42.FeedbackLevel.Error,
+          level: import_editor43.FeedbackLevel.Error,
           message: unknownVariableMessage
         };
       }
@@ -4111,12 +4225,6 @@ function validateFlowValue(value, ctx) {
   }
   return void 0;
 }
-function getTemplateKeyPaths(value) {
-  const keyPathReg = /{{(.*?)}}/g;
-  return (0, import_lodash12.uniq)(value.content?.match(keyPathReg) || []).map(
-    (_keyPath) => _keyPath.slice(2, -2).split(".")
-  );
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AssignRow,
@@ -4129,6 +4237,7 @@ function getTemplateKeyPaths(value) {
   ConditionRow,
   ConstantInput,
   DisplayFlowValue,
+  DisplayInputsValueAllInTag,
   DisplayInputsValues,
   DisplayOutputs,
   DisplaySchemaTag,
@@ -4170,6 +4279,7 @@ function getTemplateKeyPaths(value) {
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  useObjectList,
   useTypeManager,
   useVariableTree,
   validateFlowValue,