@flowgram.ai/form-materials 0.2.0 → 0.2.2

package/dist/index.js

@@ -32,12 +32,15 @@ var src_exports = {};
 __export(src_exports, {
   ArrayIcons: () => ArrayIcons,
   BatchVariableSelector: () => BatchVariableSelector,
+  ConditionRow: () => ConditionRow,
   ConstantInput: () => ConstantInput,
   DynamicValueInput: () => DynamicValueInput,
   JsonSchemaEditor: () => JsonSchemaEditor,
+  JsonSchemaUtils: () => JsonSchemaUtils,
   TypeSelector: () => TypeSelector,
   VariableSelector: () => VariableSelector,
   VariableTypeIcons: () => VariableTypeIcons,
+  autoRenameRefEffect: () => autoRenameRefEffect,
   formatLegacyRefOnInit: () => formatLegacyRefOnInit,
   formatLegacyRefOnSubmit: () => formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef: () => formatLegacyRefToNewRef,
@@ -58,7 +61,7 @@ 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
@@ -450,10 +453,123 @@ 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, options2) {
+    const { drilldown = true } = options2 || {};
+    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: drilldown ? Object.fromEntries(
+          Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)])
+        ) : {}
+      };
+    }
+    if (import_editor.ASTMatch.isArray(typeAST)) {
+      return {
+        type: "array",
+        items: drilldown ? astToSchema(typeAST.items) : void 0
+      };
+    }
+    if (import_editor.ASTMatch.isMap(typeAST)) {
+      return {
+        type: "map",
+        items: drilldown ? astToSchema(typeAST.valueType) : void 0
+      };
+    }
+    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(params) {
   const { includeSchema, excludeSchema } = params;
-  const available = (0, import_editor.useScopeAvailable)();
+  const available = (0, import_editor2.useScopeAvailable)();
   const getVariableTypeIcon = (0, import_react2.useCallback)((variable) => {
     if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
@@ -462,7 +578,7 @@ function useVariableTree(params) {
       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,
         {
@@ -471,7 +587,7 @@ function useVariableTree(params) {
         }
       );
     }
-    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()] });
@@ -482,7 +598,7 @@ function useVariableTree(params) {
       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;
@@ -490,8 +606,8 @@ function useVariableTree(params) {
     }
     const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
     const key = keyPath.join(".");
-    const isSchemaInclude = includeSchema ? type.isEqualWithJSONSchema(includeSchema) : true;
-    const isSchemaExclude = excludeSchema ? type.isEqualWithJSONSchema(excludeSchema) : false;
+    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;
@@ -621,7 +737,7 @@ var VariableSelector = ({
         );
       },
       showClear: false,
-      arrowIcon: value ? null : /* @__PURE__ */ import_react3.default.createElement(import_semi_icons2.IconChevronDownStroked, { size: "small" }),
+      arrowIcon: /* @__PURE__ */ import_react3.default.createElement(import_semi_icons2.IconChevronDownStroked, { size: "small" }),
       triggerRender,
       placeholder: config?.placeholder ?? "Select Variable..."
     }
@@ -664,7 +780,7 @@ function TypeSelector(props) {
 }
 
 // src/components/json-schema-editor/index.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_semi_ui4 = require("@douyinfe/semi-ui");
 var import_semi_icons4 = require("@douyinfe/semi-icons");
 
@@ -910,6 +1026,27 @@ function usePropertiesEdit(value, onChange) {
   };
 }
 
+// src/components/json-schema-editor/components/blur-input.tsx
+var import_react7 = __toESM(require("react"));
+var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
+function BlurInput(props) {
+  const [value, setValue] = (0, import_react7.useState)("");
+  (0, import_react7.useEffect)(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_input.default,
+    {
+      ...props,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+      },
+      onBlur: (e) => props.onChange?.(value, e)
+    }
+  );
+}
+
 // src/components/json-schema-editor/index.tsx
 function JsonSchemaEditor(props) {
   const { value = { type: "object" }, config = {}, onChange: onChangeProps } = props;
@@ -917,7 +1054,7 @@ function JsonSchemaEditor(props) {
     value,
     onChangeProps
   );
-  return /* @__PURE__ */ import_react7.default.createElement(UIContainer, null, /* @__PURE__ */ import_react7.default.createElement(UIProperties, null, propertyList.map((_property) => /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(UIContainer, null, /* @__PURE__ */ import_react8.default.createElement(UIProperties, null, propertyList.map((_property) => /* @__PURE__ */ import_react8.default.createElement(
     PropertyEdit,
     {
       key: _property.key,
@@ -930,14 +1067,14 @@ 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_icons4.IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
+  ))), /* @__PURE__ */ import_react8.default.createElement(import_semi_ui4.Button, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
 }
 function PropertyEdit(props) {
   const { value, config, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
-  const [expand, setExpand] = (0, import_react7.useState)(false);
-  const [collapse, setCollapse] = (0, import_react7.useState)(false);
+  const [expand, setExpand] = (0, import_react8.useState)(false);
+  const [collapse, setCollapse] = (0, import_react8.useState)(false);
   const { name, type, items, description, isPropertyRequired } = value || {};
-  const typeSelectorValue = (0, import_react7.useMemo)(() => ({ type, items }), [type, items]);
+  const typeSelectorValue = (0, import_react8.useMemo)(() => ({ type, items }), [type, items]);
   const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
   const onChange = (key, _value) => {
     onChangeProps?.({
@@ -946,15 +1083,15 @@ 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_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,
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(UIPropertyLeft, { $isLast, $showLine }, showCollapse && /* @__PURE__ */ import_react8.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react8.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react8.default.createElement(UIPropertyMain, { $expand: expand }, /* @__PURE__ */ import_react8.default.createElement(UIRow, null, /* @__PURE__ */ import_react8.default.createElement(UIName, null, /* @__PURE__ */ import_react8.default.createElement(
+    BlurInput,
     {
       placeholder: config?.placeholder ?? "Input Variable Name",
       size: "small",
       value: name,
       onChange: (value2) => onChange("name", value2)
     }
-  )), /* @__PURE__ */ import_react7.default.createElement(UIType, null, /* @__PURE__ */ import_react7.default.createElement(
+  )), /* @__PURE__ */ import_react8.default.createElement(UIType, null, /* @__PURE__ */ import_react8.default.createElement(
     TypeSelector,
     {
       value: typeSelectorValue,
@@ -965,48 +1102,48 @@ function PropertyEdit(props) {
         });
       }
     }
-  )), /* @__PURE__ */ import_react7.default.createElement(UIRequired, null, /* @__PURE__ */ import_react7.default.createElement(
+  )), /* @__PURE__ */ import_react8.default.createElement(UIRequired, null, /* @__PURE__ */ import_react8.default.createElement(
     import_semi_ui4.Checkbox,
     {
       checked: isPropertyRequired,
       onChange: (e) => onChange("isPropertyRequired", e.target.checked)
     }
-  )), /* @__PURE__ */ import_react7.default.createElement(UIActions, null, /* @__PURE__ */ import_react7.default.createElement(
+  )), /* @__PURE__ */ import_react8.default.createElement(UIActions, null, /* @__PURE__ */ import_react8.default.createElement(
     import_semi_ui4.IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: expand ? /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconExpand, { size: "small" }),
+      icon: expand ? /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconExpand, { size: "small" }),
       onClick: () => setExpand((_expand) => !_expand)
     }
-  ), isDrilldownObject && /* @__PURE__ */ import_react7.default.createElement(
+  ), isDrilldownObject && /* @__PURE__ */ import_react8.default.createElement(
     import_semi_ui4.IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react7.default.createElement(IconAddChildren, null),
+      icon: /* @__PURE__ */ import_react8.default.createElement(IconAddChildren, null),
       onClick: () => {
         onAddProperty();
         setCollapse(true);
       }
     }
-  ), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     import_semi_ui4.IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react7.default.createElement(import_semi_icons4.IconMinus, { size: "small" }),
+      icon: /* @__PURE__ */ import_react8.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(
-    import_semi_ui4.Input,
+  ))), expand && /* @__PURE__ */ import_react8.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react8.default.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ import_react8.default.createElement(
+    BlurInput,
     {
       size: "small",
       value: description,
       onChange: (value2) => onChange("description", value2),
       placeholder: config?.descPlaceholder ?? "Help LLM to understand the property"
     }
-  ))), showCollapse && /* @__PURE__ */ import_react7.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react7.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react7.default.createElement(
+  ))), showCollapse && /* @__PURE__ */ import_react8.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react8.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react8.default.createElement(
     PropertyEdit,
     {
       key: _property.key,
@@ -1025,27 +1162,27 @@ function PropertyEdit(props) {
 }
 
 // src/components/batch-variable-selector/index.tsx
-var import_react8 = __toESM(require("react"));
-var import_editor2 = require("@flowgram.ai/editor");
+var import_react9 = __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_editor2.PrivateScopeProvider, null, /* @__PURE__ */ import_react8.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+  return /* @__PURE__ */ import_react9.default.createElement(import_editor3.PrivateScopeProvider, null, /* @__PURE__ */ import_react9.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/constant-input/index.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __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 })
+    Renderer: (props) => /* @__PURE__ */ import_react10.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(
+    Renderer: (props) => /* @__PURE__ */ import_react10.default.createElement(
       import_semi_ui5.InputNumber,
       {
         placeholder: "Please Input Number",
@@ -1058,7 +1195,7 @@ var defaultStrategies = [
   },
   {
     hit: (schema) => schema?.type === "integer",
-    Renderer: (props) => /* @__PURE__ */ import_react9.default.createElement(
+    Renderer: (props) => /* @__PURE__ */ import_react10.default.createElement(
       import_semi_ui5.InputNumber,
       {
         placeholder: "Please Input Integer",
@@ -1074,7 +1211,7 @@ var defaultStrategies = [
     hit: (schema) => schema?.type === "boolean",
     Renderer: (props) => {
       const { value, onChange, ...rest } = props;
-      return /* @__PURE__ */ import_react9.default.createElement(
+      return /* @__PURE__ */ import_react10.default.createElement(
         import_semi_ui5.Select,
         {
           placeholder: "Please Select Boolean",
@@ -1094,22 +1231,22 @@ var defaultStrategies = [
 ];
 function ConstantInput(props) {
   const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
-  const strategies = (0, import_react9.useMemo)(
+  const strategies = (0, import_react10.useMemo)(
     () => [...defaultStrategies, ...extraStrategies || []],
     [extraStrategies]
   );
-  const Renderer = (0, import_react9.useMemo)(() => {
+  const Renderer = (0, import_react10.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_react10.default.createElement(import_semi_ui5.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ import_react9.default.createElement(Renderer, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ import_react10.default.createElement(Renderer, { value, onChange, readonly, ...rest });
 }
 
 // src/components/dynamic-value-input/index.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_semi_ui6 = require("@douyinfe/semi-ui");
 var import_semi_icons5 = require("@douyinfe/semi-icons");
 
@@ -1140,19 +1277,25 @@ function DynamicValueInput({
   schema,
   constantProps
 }) {
+  const includeSchema = (0, import_react11.useMemo)(() => {
+    if (schema?.type === "number") {
+      return [schema, { type: "integer" }];
+    }
+    return schema;
+  }, [schema]);
   const renderMain = () => {
     if (value?.type === "ref") {
-      return /* @__PURE__ */ import_react10.default.createElement(
+      return /* @__PURE__ */ import_react11.default.createElement(
         VariableSelector,
         {
           value: value?.content,
           onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
-          includeSchema: schema,
+          includeSchema,
           readonly
         }
       );
     }
-    return /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement(
       ConstantInput,
       {
         value: value?.content,
@@ -1163,82 +1306,176 @@ function DynamicValueInput({
       }
     );
   };
-  const renderTrigger = () => /* @__PURE__ */ import_react10.default.createElement(
+  const renderTrigger = () => /* @__PURE__ */ import_react11.default.createElement(
     VariableSelector,
     {
       style: { width: "100%" },
       value: value?.type === "ref" ? value?.content : void 0,
       onChange: (_v) => onChange({ type: "ref", content: _v }),
-      includeSchema: schema,
+      includeSchema,
       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" }) })
+      triggerRender: () => /* @__PURE__ */ import_react11.default.createElement(import_semi_ui6.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react11.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()));
+  return /* @__PURE__ */ import_react11.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react11.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react11.default.createElement(UITrigger, null, renderTrigger()));
 }
 
-// src/effects/provide-batch-input/index.ts
-var import_editor3 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor3.createEffectFromVariableProvider)({
-  private: true,
-  parse: (value, ctx) => [
-    import_editor3.ASTFactory.createVariableDeclaration({
-      key: `${ctx.node.id}_locals`,
-      meta: {
-        title: (0, import_editor3.getNodeForm)(ctx.node)?.getValueIn("title"),
-        icon: ctx.node.getNodeRegistry().info?.icon
-      },
-      type: import_editor3.ASTFactory.createObject({
-        properties: [
-          import_editor3.ASTFactory.createProperty({
-            key: "item",
-            initializer: import_editor3.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor3.ASTFactory.createKeyPathExpression({
-                keyPath: value.content || []
-              })
-            })
-          }),
-          import_editor3.ASTFactory.createProperty({
-            key: "index",
-            type: import_editor3.ASTFactory.createNumber()
-          })
-        ]
-      })
-    })
-  ]
-});
+// src/components/condition-row/index.tsx
+var import_react14 = __toESM(require("react"));
+var import_semi_ui8 = require("@douyinfe/semi-ui");
 
-// src/effects/provide-batch-outputs/index.ts
+// src/components/condition-row/styles.tsx
+var import_styled_components4 = __toESM(require("styled-components"));
+var UIContainer3 = import_styled_components4.default.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+var UIOperator = import_styled_components4.default.div``;
+var UILeft = import_styled_components4.default.div`
+  width: 100%;
+`;
+var UIRight = import_styled_components4.default.div`
+  width: 100%;
+`;
+var UIValues = import_styled_components4.default.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+
+// src/components/condition-row/hooks/useRule.ts
+var import_react12 = require("react");
 var import_editor4 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor4.createEffectFromVariableProvider)({
-  private: true,
-  parse: (value, ctx) => [
-    import_editor4.ASTFactory.createVariableDeclaration({
-      key: `${ctx.node.id}`,
-      meta: {
-        title: (0, import_editor4.getNodeForm)(ctx.node)?.getValueIn("title"),
-        icon: ctx.node.getNodeRegistry().info?.icon
-      },
-      type: import_editor4.ASTFactory.createObject({
-        properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor4.ASTFactory.createProperty({
-            key: _key,
-            initializer: import_editor4.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor4.ASTFactory.createKeyPathExpression({
-                keyPath: value2.content || []
-              })
-            })
-          })
-        )
-      })
-    })
-  ]
-});
+
+// src/components/condition-row/constants.ts
+var rules = {
+  string: {
+    ["eq" /* EQ */]: "string",
+    ["neq" /* NEQ */]: "string",
+    ["contains" /* CONTAINS */]: "string",
+    ["not_contains" /* NOT_CONTAINS */]: "string",
+    ["in" /* IN */]: "array",
+    ["nin" /* NIN */]: "array",
+    ["is_empty" /* IS_EMPTY */]: "string",
+    ["is_not_empty" /* IS_NOT_EMPTY */]: "string"
+  },
+  number: {
+    ["eq" /* EQ */]: "number",
+    ["neq" /* NEQ */]: "number",
+    ["gt" /* GT */]: "number",
+    ["gte" /* GTE */]: "number",
+    ["lt" /* LT */]: "number",
+    ["lte" /* LTE */]: "number",
+    ["in" /* IN */]: "array",
+    ["nin" /* NIN */]: "array",
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+  },
+  integer: {
+    ["eq" /* EQ */]: "number",
+    ["neq" /* NEQ */]: "number",
+    ["gt" /* GT */]: "number",
+    ["gte" /* GTE */]: "number",
+    ["lt" /* LT */]: "number",
+    ["lte" /* LTE */]: "number",
+    ["in" /* IN */]: "array",
+    ["nin" /* NIN */]: "array",
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+  },
+  boolean: {
+    ["eq" /* EQ */]: "boolean",
+    ["neq" /* NEQ */]: "boolean",
+    ["is_true" /* IS_TRUE */]: null,
+    ["is_false" /* IS_FALSE */]: null,
+    ["in" /* IN */]: "array",
+    ["nin" /* NIN */]: "array",
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+  },
+  object: {
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+  },
+  array: {
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+  },
+  map: {
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+  }
+};
+var opConfigs = {
+  ["eq" /* EQ */]: {
+    label: "Equal",
+    abbreviation: "="
+  },
+  ["neq" /* NEQ */]: {
+    label: "Not Equal",
+    abbreviation: "\u2260"
+  },
+  ["gt" /* GT */]: {
+    label: "Greater Than",
+    abbreviation: ">"
+  },
+  ["gte" /* GTE */]: {
+    label: "Greater Than or Equal",
+    abbreviation: ">="
+  },
+  ["lt" /* LT */]: {
+    label: "Less Than",
+    abbreviation: "<"
+  },
+  ["lte" /* LTE */]: {
+    label: "Less Than or Equal",
+    abbreviation: "<="
+  },
+  ["in" /* IN */]: {
+    label: "In",
+    abbreviation: "\u2208"
+  },
+  ["nin" /* NIN */]: {
+    label: "Not In",
+    abbreviation: "\u2209"
+  },
+  ["contains" /* CONTAINS */]: {
+    label: "Contains",
+    abbreviation: "\u2287"
+  },
+  ["not_contains" /* NOT_CONTAINS */]: {
+    label: "Not Contains",
+    abbreviation: "\u2289"
+  },
+  ["is_empty" /* IS_EMPTY */]: {
+    label: "Is Empty",
+    abbreviation: "=",
+    rightDisplay: "Empty"
+  },
+  ["is_not_empty" /* IS_NOT_EMPTY */]: {
+    label: "Is Not Empty",
+    abbreviation: "\u2260",
+    rightDisplay: "Empty"
+  },
+  ["is_true" /* IS_TRUE */]: {
+    label: "Is True",
+    abbreviation: "=",
+    rightDisplay: "True"
+  },
+  ["is_false" /* IS_FALSE */]: {
+    label: "Is False",
+    abbreviation: "=",
+    rightDisplay: "False"
+  }
+};
 
 // src/utils/format-legacy-refs/index.ts
-var import_lodash = require("lodash");
+var import_lodash2 = require("lodash");
 function formatLegacyRefOnSubmit(value) {
-  if ((0, import_lodash.isObject)(value)) {
+  if ((0, import_lodash2.isObject)(value)) {
     if (isLegacyFlowRefValueSchema(value)) {
       return formatLegacyRefToNewRef(value);
     }
@@ -1255,7 +1492,7 @@ function formatLegacyRefOnSubmit(value) {
   return value;
 }
 function formatLegacyRefOnInit(value) {
-  if ((0, import_lodash.isObject)(value)) {
+  if ((0, import_lodash2.isObject)(value)) {
     if (isNewFlowRefValueSchema(value)) {
       return formatNewRefToLegacyRef(value);
     }
@@ -1272,10 +1509,10 @@ function formatLegacyRefOnInit(value) {
   return value;
 }
 function isLegacyFlowRefValueSchema(value) {
-  return (0, import_lodash.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+  return (0, import_lodash2.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
 }
 function isNewFlowRefValueSchema(value) {
-  return (0, import_lodash.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+  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(".");
@@ -1296,16 +1533,216 @@ function formatNewRefToLegacyRef(value) {
     content: value.content.join(".")
   };
 }
+
+// src/components/condition-row/hooks/useRule.ts
+function useRule(left) {
+  const available = (0, import_editor4.useScopeAvailable)();
+  const variable = (0, import_react12.useMemo)(() => {
+    if (!left) return void 0;
+    return available.getByKeyPath(left.content);
+  }, [available, left]);
+  const rule = (0, import_react12.useMemo)(() => {
+    if (!variable) return void 0;
+    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+    return rules[schema?.type];
+  }, [variable?.type]);
+  return { rule };
+}
+
+// src/components/condition-row/hooks/useOp.tsx
+var import_react13 = __toESM(require("react"));
+var import_semi_ui7 = require("@douyinfe/semi-ui");
+var import_semi_icons6 = require("@douyinfe/semi-icons");
+function useOp({ rule, op, onChange }) {
+  const options2 = (0, import_react13.useMemo)(
+    () => Object.keys(rule || {}).map((_op) => ({
+      ...opConfigs[_op] || {},
+      value: _op
+    })),
+    [rule]
+  );
+  const opConfig = (0, import_react13.useMemo)(() => opConfigs[op], [op]);
+  const renderOpSelect = () => /* @__PURE__ */ import_react13.default.createElement(
+    import_semi_ui7.Select,
+    {
+      style: { height: 22 },
+      size: "small",
+      value: op,
+      optionList: options2,
+      onChange: (v) => {
+        onChange(v);
+      },
+      triggerRender: ({ value }) => /* @__PURE__ */ import_react13.default.createElement(import_semi_ui7.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react13.default.createElement(import_semi_icons6.IconChevronDownStroked, { size: "small" }))
+    }
+  );
+  return { renderOpSelect, opConfig };
+}
+
+// src/components/condition-row/index.tsx
+function ConditionRow({ style, value, onChange, readonly }) {
+  const { left, operator, right } = value || {};
+  const { rule } = useRule(left);
+  const { renderOpSelect, opConfig } = useOp({
+    rule,
+    op: operator,
+    onChange: (v) => onChange({ ...value, operator: v })
+  });
+  const targetSchema = (0, import_react14.useMemo)(() => {
+    const targetType = rule?.[operator] || null;
+    return targetType ? { type: targetType, extra: { weak: true } } : null;
+  }, [rule, opConfig]);
+  return /* @__PURE__ */ import_react14.default.createElement(UIContainer3, { style }, /* @__PURE__ */ import_react14.default.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ import_react14.default.createElement(UIValues, null, /* @__PURE__ */ import_react14.default.createElement(UILeft, null, /* @__PURE__ */ import_react14.default.createElement(
+    VariableSelector,
+    {
+      readonly,
+      style: { width: "100%" },
+      value: left?.content,
+      onChange: (v) => onChange({
+        ...value,
+        left: {
+          type: "ref",
+          content: v
+        }
+      })
+    }
+  )), /* @__PURE__ */ import_react14.default.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ import_react14.default.createElement(
+    DynamicValueInput,
+    {
+      readonly: readonly || !rule,
+      value: right,
+      schema: targetSchema,
+      onChange: (v) => onChange({ ...value, right: v })
+    }
+  ) : /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.Input, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
+}
+
+// src/effects/provide-batch-input/index.ts
+var import_editor5 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor5.createEffectFromVariableProvider)({
+  private: true,
+  parse: (value, ctx) => [
+    import_editor5.ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: (0, import_editor5.getNodeForm)(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: import_editor5.ASTFactory.createObject({
+        properties: [
+          import_editor5.ASTFactory.createProperty({
+            key: "item",
+            initializer: import_editor5.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor5.ASTFactory.createKeyPathExpression({
+                keyPath: value.content || []
+              })
+            })
+          }),
+          import_editor5.ASTFactory.createProperty({
+            key: "index",
+            type: import_editor5.ASTFactory.createNumber()
+          })
+        ]
+      })
+    })
+  ]
+});
+
+// src/effects/provide-batch-outputs/index.ts
+var import_editor6 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor6.createEffectFromVariableProvider)({
+  private: true,
+  parse: (value, ctx) => [
+    import_editor6.ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: (0, import_editor6.getNodeForm)(ctx.node)?.getValueIn("title"),
+        icon: ctx.node.getNodeRegistry().info?.icon
+      },
+      type: import_editor6.ASTFactory.createObject({
+        properties: Object.entries(value).map(
+          ([_key, value2]) => import_editor6.ASTFactory.createProperty({
+            key: _key,
+            initializer: import_editor6.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor6.ASTFactory.createKeyPathExpression({
+                keyPath: value2.content || []
+              })
+            })
+          })
+        )
+      })
+    })
+  ]
+});
+
+// src/effects/auto-rename-ref/index.ts
+var import_lodash3 = require("lodash");
+var import_editor7 = require("@flowgram.ai/editor");
+var autoRenameRefEffect = [
+  {
+    event: import_editor7.DataEvent.onValueInit,
+    effect: (params) => {
+      const { context, form, name } = params;
+      const renameService = context.node.getService(import_editor7.VariableFieldKeyRenameService);
+      const disposable = renameService.onRename(({ before, after }) => {
+        const beforeKeyPath = [
+          ...before.parentFields.map((_field) => _field.key).reverse(),
+          before.key
+        ];
+        const afterKeyPath = [
+          ...after.parentFields.map((_field) => _field.key).reverse(),
+          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);
+          }
+        });
+      });
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+function isRefMatch(value, targetKeyPath) {
+  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+}
+function isRef(value) {
+  return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
+}
+function traverseRef(name, value, cb) {
+  if ((0, import_lodash3.isObject)(value)) {
+    if (isRef(value)) {
+      cb(name, value);
+      return;
+    }
+    Object.entries(value).forEach(([_key, _value]) => {
+      traverseRef(`${name}.${_key}`, _value, cb);
+    });
+    return;
+  }
+  if ((0, import_lodash3.isArray)(value)) {
+    value.forEach((_value, idx) => {
+      traverseRef(`${name}[${idx}]`, _value, cb);
+    });
+    return;
+  }
+  return;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrayIcons,
   BatchVariableSelector,
+  ConditionRow,
   ConstantInput,
   DynamicValueInput,
   JsonSchemaEditor,
+  JsonSchemaUtils,
   TypeSelector,
   VariableSelector,
   VariableTypeIcons,
+  autoRenameRefEffect,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef,