@flowgram.ai/form-materials 0.2.1 → 0.2.2

package/dist/esm/index.js

@@ -446,7 +446,8 @@ var JsonSchemaUtils;
     }
   }
   JsonSchemaUtils2.schemaToAST = schemaToAST;
-  function astToSchema(typeAST) {
+  function astToSchema(typeAST, options2) {
+    const { drilldown = true } = options2 || {};
     if (ASTMatch.isString(typeAST)) {
       return {
         type: "string"
@@ -470,21 +471,21 @@ var JsonSchemaUtils;
     if (ASTMatch.isObject(typeAST)) {
       return {
         type: "object",
-        properties: Object.fromEntries(
+        properties: drilldown ? Object.fromEntries(
           Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)])
-        )
+        ) : {}
       };
     }
     if (ASTMatch.isArray(typeAST)) {
       return {
         type: "array",
-        items: astToSchema(typeAST.items)
+        items: drilldown ? astToSchema(typeAST.items) : void 0
       };
     }
     if (ASTMatch.isMap(typeAST)) {
       return {
         type: "map",
-        items: astToSchema(typeAST.valueType)
+        items: drilldown ? astToSchema(typeAST.valueType) : void 0
       };
     }
     if (ASTMatch.isCustomType(typeAST)) {
@@ -679,7 +680,7 @@ var VariableSelector = ({
         );
       },
       showClear: false,
-      arrowIcon: value ? null : /* @__PURE__ */ React3.createElement(IconChevronDownStroked, { size: "small" }),
+      arrowIcon: /* @__PURE__ */ React3.createElement(IconChevronDownStroked, { size: "small" }),
       triggerRender,
       placeholder: config?.placeholder ?? "Select Variable..."
     }
@@ -722,8 +723,8 @@ function TypeSelector(props) {
 }
 
 // src/components/json-schema-editor/index.tsx
-import React6, { useMemo as useMemo4, useState as useState2 } from "react";
-import { Button as Button2, Checkbox, IconButton, Input } from "@douyinfe/semi-ui";
+import React7, { useMemo as useMemo4, useState as useState3 } from "react";
+import { Button as Button2, Checkbox, IconButton } from "@douyinfe/semi-ui";
 import {
   IconExpand,
   IconShrink,
@@ -975,6 +976,27 @@ function usePropertiesEdit(value, onChange) {
   };
 }
 
+// src/components/json-schema-editor/components/blur-input.tsx
+import React6, { useEffect as useEffect2, useState as useState2 } from "react";
+import Input from "@douyinfe/semi-ui/lib/es/input";
+function BlurInput(props) {
+  const [value, setValue] = useState2("");
+  useEffect2(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ React6.createElement(
+    Input,
+    {
+      ...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;
@@ -982,7 +1004,7 @@ function JsonSchemaEditor(props) {
     value,
     onChangeProps
   );
-  return /* @__PURE__ */ React6.createElement(UIContainer, null, /* @__PURE__ */ React6.createElement(UIProperties, null, propertyList.map((_property) => /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(UIContainer, null, /* @__PURE__ */ React7.createElement(UIProperties, null, propertyList.map((_property) => /* @__PURE__ */ React7.createElement(
     PropertyEdit,
     {
       key: _property.key,
@@ -995,12 +1017,12 @@ function JsonSchemaEditor(props) {
         onRemoveProperty(_property.key);
       }
     }
-  ))), /* @__PURE__ */ React6.createElement(Button2, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ React6.createElement(IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
+  ))), /* @__PURE__ */ React7.createElement(Button2, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ React7.createElement(IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
 }
 function PropertyEdit(props) {
   const { value, config, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
-  const [expand, setExpand] = useState2(false);
-  const [collapse, setCollapse] = useState2(false);
+  const [expand, setExpand] = useState3(false);
+  const [collapse, setCollapse] = useState3(false);
   const { name, type, items, description, isPropertyRequired } = value || {};
   const typeSelectorValue = useMemo4(() => ({ type, items }), [type, items]);
   const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
@@ -1011,15 +1033,15 @@ function PropertyEdit(props) {
     });
   };
   const showCollapse = isDrilldownObject && propertyList.length > 0;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(UIPropertyLeft, { $isLast, $showLine }, showCollapse && /* @__PURE__ */ React6.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React6.createElement(IconChevronDown, { size: "small" }) : /* @__PURE__ */ React6.createElement(IconChevronRight, { size: "small" }))), /* @__PURE__ */ React6.createElement(UIPropertyRight, null, /* @__PURE__ */ React6.createElement(UIPropertyMain, { $expand: expand }, /* @__PURE__ */ React6.createElement(UIRow, null, /* @__PURE__ */ React6.createElement(UIName, null, /* @__PURE__ */ React6.createElement(
-    Input,
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(UIPropertyLeft, { $isLast, $showLine }, showCollapse && /* @__PURE__ */ React7.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React7.createElement(IconChevronDown, { size: "small" }) : /* @__PURE__ */ React7.createElement(IconChevronRight, { size: "small" }))), /* @__PURE__ */ React7.createElement(UIPropertyRight, null, /* @__PURE__ */ React7.createElement(UIPropertyMain, { $expand: expand }, /* @__PURE__ */ React7.createElement(UIRow, null, /* @__PURE__ */ React7.createElement(UIName, null, /* @__PURE__ */ React7.createElement(
+    BlurInput,
     {
       placeholder: config?.placeholder ?? "Input Variable Name",
       size: "small",
       value: name,
       onChange: (value2) => onChange("name", value2)
     }
-  )), /* @__PURE__ */ React6.createElement(UIType, null, /* @__PURE__ */ React6.createElement(
+  )), /* @__PURE__ */ React7.createElement(UIType, null, /* @__PURE__ */ React7.createElement(
     TypeSelector,
     {
       value: typeSelectorValue,
@@ -1030,48 +1052,48 @@ function PropertyEdit(props) {
         });
       }
     }
-  )), /* @__PURE__ */ React6.createElement(UIRequired, null, /* @__PURE__ */ React6.createElement(
+  )), /* @__PURE__ */ React7.createElement(UIRequired, null, /* @__PURE__ */ React7.createElement(
     Checkbox,
     {
       checked: isPropertyRequired,
       onChange: (e) => onChange("isPropertyRequired", e.target.checked)
     }
-  )), /* @__PURE__ */ React6.createElement(UIActions, null, /* @__PURE__ */ React6.createElement(
+  )), /* @__PURE__ */ React7.createElement(UIActions, null, /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: expand ? /* @__PURE__ */ React6.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React6.createElement(IconExpand, { size: "small" }),
+      icon: expand ? /* @__PURE__ */ React7.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React7.createElement(IconExpand, { size: "small" }),
       onClick: () => setExpand((_expand) => !_expand)
     }
-  ), isDrilldownObject && /* @__PURE__ */ React6.createElement(
+  ), isDrilldownObject && /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React6.createElement(IconAddChildren, null),
+      icon: /* @__PURE__ */ React7.createElement(IconAddChildren, null),
       onClick: () => {
         onAddProperty();
         setCollapse(true);
       }
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React6.createElement(IconMinus, { size: "small" }),
+      icon: /* @__PURE__ */ React7.createElement(IconMinus, { size: "small" }),
       onClick: onRemove
     }
-  ))), expand && /* @__PURE__ */ React6.createElement(UIExpandDetail, null, /* @__PURE__ */ React6.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ React6.createElement(
-    Input,
+  ))), expand && /* @__PURE__ */ React7.createElement(UIExpandDetail, null, /* @__PURE__ */ React7.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ React7.createElement(
+    BlurInput,
     {
       size: "small",
       value: description,
       onChange: (value2) => onChange("description", value2),
       placeholder: config?.descPlaceholder ?? "Help LLM to understand the property"
     }
-  ))), showCollapse && /* @__PURE__ */ React6.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React6.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React6.createElement(
+  ))), showCollapse && /* @__PURE__ */ React7.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React7.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React7.createElement(
     PropertyEdit,
     {
       key: _property.key,
@@ -1090,27 +1112,27 @@ function PropertyEdit(props) {
 }
 
 // src/components/batch-variable-selector/index.tsx
-import React7 from "react";
+import React8 from "react";
 import { PrivateScopeProvider } from "@flowgram.ai/editor";
 var batchVariableSchema = {
   type: "array",
   extra: { weak: true }
 };
 function BatchVariableSelector(props) {
-  return /* @__PURE__ */ React7.createElement(PrivateScopeProvider, null, /* @__PURE__ */ React7.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+  return /* @__PURE__ */ React8.createElement(PrivateScopeProvider, null, /* @__PURE__ */ React8.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/constant-input/index.tsx
-import React8, { useMemo as useMemo5 } from "react";
+import React9, { useMemo as useMemo5 } from "react";
 import { Input as Input2, InputNumber, Select } from "@douyinfe/semi-ui";
 var defaultStrategies = [
   {
     hit: (schema) => schema?.type === "string",
-    Renderer: (props) => /* @__PURE__ */ React8.createElement(Input2, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+    Renderer: (props) => /* @__PURE__ */ React9.createElement(Input2, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
   },
   {
     hit: (schema) => schema?.type === "number",
-    Renderer: (props) => /* @__PURE__ */ React8.createElement(
+    Renderer: (props) => /* @__PURE__ */ React9.createElement(
       InputNumber,
       {
         placeholder: "Please Input Number",
@@ -1123,7 +1145,7 @@ var defaultStrategies = [
   },
   {
     hit: (schema) => schema?.type === "integer",
-    Renderer: (props) => /* @__PURE__ */ React8.createElement(
+    Renderer: (props) => /* @__PURE__ */ React9.createElement(
       InputNumber,
       {
         placeholder: "Please Input Integer",
@@ -1139,7 +1161,7 @@ var defaultStrategies = [
     hit: (schema) => schema?.type === "boolean",
     Renderer: (props) => {
       const { value, onChange, ...rest } = props;
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         Select,
         {
           placeholder: "Please Select Boolean",
@@ -1168,13 +1190,13 @@ function ConstantInput(props) {
     return strategy?.Renderer;
   }, [strategies, schema]);
   if (!Renderer) {
-    return /* @__PURE__ */ React8.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
+    return /* @__PURE__ */ React9.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ React8.createElement(Renderer, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ React9.createElement(Renderer, { value, onChange, readonly, ...rest });
 }
 
 // src/components/dynamic-value-input/index.tsx
-import React9 from "react";
+import React10, { useMemo as useMemo6 } from "react";
 import { IconButton as IconButton2 } from "@douyinfe/semi-ui";
 import { IconSetting } from "@douyinfe/semi-icons";
 
@@ -1205,19 +1227,25 @@ function DynamicValueInput({
   schema,
   constantProps
 }) {
+  const includeSchema = useMemo6(() => {
+    if (schema?.type === "number") {
+      return [schema, { type: "integer" }];
+    }
+    return schema;
+  }, [schema]);
   const renderMain = () => {
     if (value?.type === "ref") {
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         VariableSelector,
         {
           value: value?.content,
           onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
-          includeSchema: schema,
+          includeSchema,
           readonly
         }
       );
     }
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React10.createElement(
       ConstantInput,
       {
         value: value?.content,
@@ -1228,18 +1256,314 @@ function DynamicValueInput({
       }
     );
   };
-  const renderTrigger = () => /* @__PURE__ */ React9.createElement(
+  const renderTrigger = () => /* @__PURE__ */ React10.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__ */ React9.createElement(IconButton2, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React9.createElement(IconSetting, { size: "small" }) })
+      triggerRender: () => /* @__PURE__ */ React10.createElement(IconButton2, { disabled: readonly, size: "small", icon: /* @__PURE__ */ React10.createElement(IconSetting, { size: "small" }) })
     }
   );
-  return /* @__PURE__ */ React9.createElement(UIContainer2, { style }, /* @__PURE__ */ React9.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React9.createElement(UITrigger, null, renderTrigger()));
+  return /* @__PURE__ */ React10.createElement(UIContainer2, { style }, /* @__PURE__ */ React10.createElement(UIMain, null, renderMain()), /* @__PURE__ */ React10.createElement(UITrigger, null, renderTrigger()));
+}
+
+// src/components/condition-row/index.tsx
+import React12, { useMemo as useMemo9 } from "react";
+import { Input as Input3 } from "@douyinfe/semi-ui";
+
+// src/components/condition-row/styles.tsx
+import styled4 from "styled-components";
+var UIContainer3 = styled4.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+var UIOperator = styled4.div``;
+var UILeft = styled4.div`
+  width: 100%;
+`;
+var UIRight = styled4.div`
+  width: 100%;
+`;
+var UIValues = styled4.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+
+// src/components/condition-row/hooks/useRule.ts
+import { useMemo as useMemo7 } from "react";
+import { useScopeAvailable as useScopeAvailable2 } from "@flowgram.ai/editor";
+
+// 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
+import { isObject } from "lodash";
+function formatLegacyRefOnSubmit(value) {
+  if (isObject(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnSubmit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+  return value;
+}
+function formatLegacyRefOnInit(value) {
+  if (isObject(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnInit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+  return value;
+}
+function isLegacyFlowRefValueSchema(value) {
+  return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+}
+function isNewFlowRefValueSchema(value) {
+  return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+}
+function formatLegacyRefToNewRef(value) {
+  const keyPath = value.content.split(".");
+  if (keyPath[1] === "outputs") {
+    return {
+      type: "ref",
+      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
+    };
+  }
+  return {
+    type: "ref",
+    content: keyPath
+  };
+}
+function formatNewRefToLegacyRef(value) {
+  return {
+    type: "ref",
+    content: value.content.join(".")
+  };
+}
+
+// src/components/condition-row/hooks/useRule.ts
+function useRule(left) {
+  const available = useScopeAvailable2();
+  const variable = useMemo7(() => {
+    if (!left) return void 0;
+    return available.getByKeyPath(left.content);
+  }, [available, left]);
+  const rule = useMemo7(() => {
+    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
+import React11, { useMemo as useMemo8 } from "react";
+import { Button as Button3, Select as Select2 } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked as IconChevronDownStroked2 } from "@douyinfe/semi-icons";
+function useOp({ rule, op, onChange }) {
+  const options2 = useMemo8(
+    () => Object.keys(rule || {}).map((_op) => ({
+      ...opConfigs[_op] || {},
+      value: _op
+    })),
+    [rule]
+  );
+  const opConfig = useMemo8(() => opConfigs[op], [op]);
+  const renderOpSelect = () => /* @__PURE__ */ React11.createElement(
+    Select2,
+    {
+      style: { height: 22 },
+      size: "small",
+      value: op,
+      optionList: options2,
+      onChange: (v) => {
+        onChange(v);
+      },
+      triggerRender: ({ value }) => /* @__PURE__ */ React11.createElement(Button3, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ React11.createElement(IconChevronDownStroked2, { 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 = useMemo9(() => {
+    const targetType = rule?.[operator] || null;
+    return targetType ? { type: targetType, extra: { weak: true } } : null;
+  }, [rule, opConfig]);
+  return /* @__PURE__ */ React12.createElement(UIContainer3, { style }, /* @__PURE__ */ React12.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ React12.createElement(UIValues, null, /* @__PURE__ */ React12.createElement(UILeft, null, /* @__PURE__ */ React12.createElement(
+    VariableSelector,
+    {
+      readonly,
+      style: { width: "100%" },
+      value: left?.content,
+      onChange: (v) => onChange({
+        ...value,
+        left: {
+          type: "ref",
+          content: v
+        }
+      })
+    }
+  )), /* @__PURE__ */ React12.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ React12.createElement(
+    DynamicValueInput,
+    {
+      readonly: readonly || !rule,
+      value: right,
+      schema: targetSchema,
+      onChange: (v) => onChange({ ...value, right: v })
+    }
+  ) : /* @__PURE__ */ React12.createElement(Input3, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
 }
 
 // src/effects/provide-batch-input/index.ts
@@ -1308,70 +1632,69 @@ var provideBatchOutputsEffect = createEffectFromVariableProvider2({
   ]
 });
 
-// src/utils/format-legacy-refs/index.ts
-import { isObject } from "lodash";
-function formatLegacyRefOnSubmit(value) {
-  if (isObject(value)) {
-    if (isLegacyFlowRefValueSchema(value)) {
-      return formatLegacyRefToNewRef(value);
+// src/effects/auto-rename-ref/index.ts
+import { isArray, isObject as isObject2 } from "lodash";
+import {
+  DataEvent,
+  VariableFieldKeyRenameService
+} from "@flowgram.ai/editor";
+var autoRenameRefEffect = [
+  {
+    event: DataEvent.onValueInit,
+    effect: (params) => {
+      const { context, form, name } = params;
+      const renameService = context.node.getService(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();
+      };
     }
-    return Object.fromEntries(
-      Object.entries(value).map(([key, value2]) => [
-        key,
-        formatLegacyRefOnSubmit(value2)
-      ])
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.map(formatLegacyRefOnSubmit);
   }
-  return value;
+];
+function isRefMatch(value, targetKeyPath) {
+  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
 }
-function formatLegacyRefOnInit(value) {
-  if (isObject(value)) {
-    if (isNewFlowRefValueSchema(value)) {
-      return formatNewRefToLegacyRef(value);
+function isRef(value) {
+  return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
+}
+function traverseRef(name, value, cb) {
+  if (isObject2(value)) {
+    if (isRef(value)) {
+      cb(name, value);
+      return;
     }
-    return Object.fromEntries(
-      Object.entries(value).map(([key, value2]) => [
-        key,
-        formatLegacyRefOnInit(value2)
-      ])
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.map(formatLegacyRefOnInit);
+    Object.entries(value).forEach(([_key, _value]) => {
+      traverseRef(`${name}.${_key}`, _value, cb);
+    });
+    return;
   }
-  return value;
-}
-function isLegacyFlowRefValueSchema(value) {
-  return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
-}
-function isNewFlowRefValueSchema(value) {
-  return isObject(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
-}
-function formatLegacyRefToNewRef(value) {
-  const keyPath = value.content.split(".");
-  if (keyPath[1] === "outputs") {
-    return {
-      type: "ref",
-      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
-    };
+  if (isArray(value)) {
+    value.forEach((_value, idx) => {
+      traverseRef(`${name}[${idx}]`, _value, cb);
+    });
+    return;
   }
-  return {
-    type: "ref",
-    content: keyPath
-  };
-}
-function formatNewRefToLegacyRef(value) {
-  return {
-    type: "ref",
-    content: value.content.join(".")
-  };
+  return;
 }
 export {
   ArrayIcons,
   BatchVariableSelector,
+  ConditionRow,
   ConstantInput,
   DynamicValueInput,
   JsonSchemaEditor,
@@ -1379,6 +1702,7 @@ export {
   TypeSelector,
   VariableSelector,
   VariableTypeIcons,
+  autoRenameRefEffect,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef,