@flowgram.ai/form-materials 0.3.2 → 0.3.4

package/dist/index.js

@@ -67,6 +67,8 @@ __export(src_exports, {
   getTypeSelectValue: () => getTypeSelectValue,
   isLegacyFlowRefValueSchema: () => isLegacyFlowRefValueSchema,
   isNewFlowRefValueSchema: () => isNewFlowRefValueSchema,
+  listenRefSchemaChange: () => listenRefSchemaChange,
+  listenRefValueChange: () => listenRefValueChange,
   parseTypeSelectValue: () => parseTypeSelectValue,
   provideBatchInputEffect: () => provideBatchInputEffect,
   provideBatchOutputsEffect: () => provideBatchOutputsEffect,
@@ -85,13 +87,14 @@ var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
 // src/components/variable-selector/index.tsx
 var import_react12 = __toESM(require("react"));
+var import_editor11 = require("@flowgram.ai/editor");
 var import_semi_ui7 = require("@douyinfe/semi-ui");
 var import_semi_icons = require("@douyinfe/semi-icons");
 
 // src/components/variable-selector/use-variable-tree.tsx
 var import_react11 = __toESM(require("react"));
 var import_json_schema4 = require("@flowgram.ai/json-schema");
-var import_editor4 = require("@flowgram.ai/editor");
+var import_editor10 = require("@flowgram.ai/editor");
 var import_semi_ui5 = require("@douyinfe/semi-ui");
 
 // src/plugins/json-schema-preset/index.tsx
@@ -103,14 +106,24 @@ var import_json_schema = require("@flowgram.ai/json-schema");
 
 // src/plugins/json-schema-preset/type-definition/string.tsx
 var import_react = __toESM(require("react"));
+var import_editor = require("@flowgram.ai/editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 var stringRegistry = {
   type: "string",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react.default.createElement(import_semi_ui.Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+  ConstantRenderer: (props) => /* @__PURE__ */ import_react.default.createElement(
+    import_semi_ui.Input,
+    {
+      placeholder: import_editor.I18n.t("Please Input String"),
+      size: "small",
+      disabled: props.readonly,
+      ...props
+    }
+  )
 };
 
 // src/plugins/json-schema-preset/type-definition/object.tsx
 var import_react5 = __toESM(require("react"));
+var import_editor3 = require("@flowgram.ai/editor");
 
 // src/components/code-editor-mini/index.tsx
 var import_react4 = __toESM(require("react"));
@@ -145,13 +158,13 @@ var import_language_typescript = require("@coze-editor/editor/language-typescrip
 var import_language_shell = require("@coze-editor/editor/language-shell");
 var import_language_python = require("@coze-editor/editor/language-python");
 var import_language_json = require("@coze-editor/editor/language-json");
-var import_editor = require("@coze-editor/editor");
+var import_editor2 = require("@coze-editor/editor");
 import_preset_code.languages.register("python", import_language_python.python);
 import_preset_code.languages.register("shell", import_language_shell.shell);
 import_preset_code.languages.register("typescript", import_language_typescript.typescript);
 import_preset_code.languages.register("json", {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
-  language: (0, import_editor.mixLanguages)({
+  language: (0, import_editor2.mixLanguages)({
     outerLanguage: import_language_json.json.language
   }),
   languageService: import_language_json.json.languageService
@@ -486,7 +499,7 @@ var objectRegistry = {
       value: props.value,
       onChange: (v) => props.onChange?.(v),
       languageId: "json",
-      placeholder: "Please Input Object",
+      placeholder: import_editor3.I18n.t("Please Input Object"),
       readonly: props.readonly
     }
   )
@@ -494,13 +507,14 @@ var objectRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/number.tsx
 var import_react6 = __toESM(require("react"));
+var import_editor4 = require("@flowgram.ai/editor");
 var import_semi_ui2 = require("@douyinfe/semi-ui");
 var numberRegistry = {
   type: "number",
   ConstantRenderer: (props) => /* @__PURE__ */ import_react6.default.createElement(
     import_semi_ui2.InputNumber,
     {
-      placeholder: "Please Input Number",
+      placeholder: import_editor4.I18n.t("Please Input Number"),
       size: "small",
       disabled: props.readonly,
       hideButtons: true,
@@ -511,13 +525,14 @@ var numberRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/integer.tsx
 var import_react7 = __toESM(require("react"));
+var import_editor5 = require("@flowgram.ai/editor");
 var import_semi_ui3 = require("@douyinfe/semi-ui");
 var integerRegistry = {
   type: "integer",
   ConstantRenderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
     import_semi_ui3.InputNumber,
     {
-      placeholder: "Please Input Integer",
+      placeholder: import_editor5.I18n.t("Please Input Integer"),
       size: "small",
       disabled: props.readonly,
       precision: 0,
@@ -528,6 +543,7 @@ var integerRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/boolean.tsx
 var import_react8 = __toESM(require("react"));
+var import_editor6 = require("@flowgram.ai/editor");
 var import_semi_ui4 = require("@douyinfe/semi-ui");
 var booleanRegistry = {
   type: "boolean",
@@ -536,12 +552,12 @@ var booleanRegistry = {
     return /* @__PURE__ */ import_react8.default.createElement(
       import_semi_ui4.Select,
       {
-        placeholder: "Please Select Boolean",
+        placeholder: import_editor6.I18n.t("Please Select Boolean"),
         size: "small",
         disabled: props.readonly,
         optionList: [
-          { label: "True", value: 1 },
-          { label: "False", value: 0 }
+          { label: import_editor6.I18n.t("True"), value: 1 },
+          { label: import_editor6.I18n.t("False"), value: 0 }
         ],
         value: value ? 1 : 0,
         onChange: (value2) => onChange?.(!!value2),
@@ -553,6 +569,7 @@ var booleanRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/array.tsx
 var import_react9 = __toESM(require("react"));
+var import_editor7 = require("@flowgram.ai/editor");
 var arrayRegistry = {
   type: "array",
   ConstantRenderer: (props) => /* @__PURE__ */ import_react9.default.createElement(
@@ -561,7 +578,7 @@ var arrayRegistry = {
       value: props.value,
       languageId: "json",
       onChange: (v) => props.onChange?.(v),
-      placeholder: "Please Input Array",
+      placeholder: import_editor7.I18n.t("Please Input Array"),
       readonly: props.readonly
     }
   )
@@ -580,8 +597,8 @@ jsonSchemaTypePreset.forEach((_type) => import_json_schema.jsonSchemaTypeManager
 
 // src/plugins/json-schema-preset/create-type-preset-plugin.tsx
 var import_json_schema2 = require("@flowgram.ai/json-schema");
-var import_editor2 = require("@flowgram.ai/editor");
-var createTypePresetPlugin = (0, import_editor2.definePluginCreator)({
+var import_editor8 = require("@flowgram.ai/editor");
+var createTypePresetPlugin = (0, import_editor8.definePluginCreator)({
   onInit(ctx, opts) {
     const typeManager = ctx.get(import_json_schema2.BaseTypeManager);
     jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
@@ -599,12 +616,12 @@ var JsonSchemaTypePresetProvider = ({
 }) => /* @__PURE__ */ import_react10.default.createElement(import_json_schema3.TypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
 
 // src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts
-var import_editor3 = require("@flowgram.ai/editor");
-var createDisableDeclarationPlugin = (0, import_editor3.definePluginCreator)({
+var import_editor9 = require("@flowgram.ai/editor");
+var createDisableDeclarationPlugin = (0, import_editor9.definePluginCreator)({
   onInit(ctx) {
-    const variableEngine = ctx.get(import_editor3.VariableEngine);
+    const variableEngine = ctx.get(import_editor9.VariableEngine);
     const handleEvent = (action) => {
-      if (import_editor3.ASTMatch.isVariableDeclaration(action.ast)) {
+      if (import_editor9.ASTMatch.isVariableDeclaration(action.ast)) {
         if (!action.ast.meta?.disabled) {
           action.ast.updateMeta({
             ...action.ast.meta || {},
@@ -622,7 +639,7 @@ var createDisableDeclarationPlugin = (0, import_editor3.definePluginCreator)({
 function useVariableTree(params) {
   const { includeSchema, excludeSchema, customSkip } = params;
   const typeManager = useTypeManager();
-  const variables = (0, import_editor4.useAvailableVariables)();
+  const variables = (0, import_editor10.useAvailableVariables)();
   const getVariableTypeIcon = (0, import_react11.useCallback)((variable) => {
     if (variable.meta?.icon) {
       if (typeof variable.meta.icon === "string") {
@@ -639,7 +656,7 @@ function useVariableTree(params) {
       return null;
     }
     let children;
-    if (import_editor4.ASTMatch.isObject(type)) {
+    if (import_editor10.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...parentFields, variable])).filter(Boolean);
     }
     const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
@@ -805,7 +822,7 @@ var VariableSelector = ({
       showClear: false,
       arrowIcon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons.IconChevronDownStroked, { size: "small" }),
       triggerRender,
-      placeholder: config?.placeholder ?? "Select Variable"
+      placeholder: config?.placeholder ?? import_editor11.I18n.t("Select Variable")
     }
   ));
 };
@@ -814,7 +831,6 @@ var VariableSelector = ({
 var import_react13 = __toESM(require("react"));
 var import_semi_ui8 = require("@douyinfe/semi-ui");
 var labelStyle = { display: "flex", alignItems: "center", gap: 5 };
-var firstUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 var getTypeSelectValue = (value) => {
   if (value?.type === "array" && value?.items) {
     return [value.type, ...getTypeSelectValue(value.items) || []];
@@ -837,7 +853,7 @@ function TypeSelector(props) {
     () => typeManager.getTypeRegistriesWithParentType().map((_type) => {
       const isArray2 = _type.type === "array";
       return {
-        label: /* @__PURE__ */ import_react13.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react13.default.createElement(import_semi_ui8.Icon, { size: "small", svg: _type.icon }), firstUppercase(_type.type)),
+        label: /* @__PURE__ */ import_react13.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react13.default.createElement(import_semi_ui8.Icon, { size: "small", svg: _type.icon }), typeManager.getTypeBySchema(_type)?.label || _type.type),
         value: _type.type,
         children: isArray2 ? typeManager.getTypeRegistriesWithParentType("array").map((_type2) => ({
           label: /* @__PURE__ */ import_react13.default.createElement("div", { style: labelStyle }, /* @__PURE__ */ import_react13.default.createElement(
@@ -849,7 +865,7 @@ function TypeSelector(props) {
                 items: { type: _type2.type }
               })
             }
-          ), firstUppercase(_type2.type)),
+          ), typeManager.getTypeBySchema(_type2)?.label || _type2.type),
           value: _type2.type
         })) : []
       };
@@ -874,6 +890,7 @@ function TypeSelector(props) {
 
 // src/components/json-schema-editor/index.tsx
 var import_react19 = __toESM(require("react"));
+var import_editor12 = require("@flowgram.ai/editor");
 var import_semi_ui11 = require("@douyinfe/semi-ui");
 var import_semi_icons4 = require("@douyinfe/semi-icons");
 
@@ -1481,22 +1498,22 @@ function PropertyEdit(props) {
         onClick: onRemove
       }
     ))),
-    expand && /* @__PURE__ */ import_react19.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react19.default.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ import_react19.default.createElement(
+    expand && /* @__PURE__ */ import_react19.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react19.default.createElement(UILabel, null, config?.descTitle ?? import_editor12.I18n.t("Description")), /* @__PURE__ */ import_react19.default.createElement(
       BlurInput,
       {
         disabled: readonly,
         size: "small",
         value: description,
         onChange: (value2) => onChange("description", value2),
-        placeholder: config?.descPlaceholder ?? "Help LLM to understand the property"
+        placeholder: config?.descPlaceholder ?? import_editor12.I18n.t("Help LLM to understand the property")
       }
-    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? "Default Value"), /* @__PURE__ */ import_react19.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react19.default.createElement(
+    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? import_editor12.I18n.t("Default Value")), /* @__PURE__ */ import_react19.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react19.default.createElement(
       DefaultValue,
       {
         value: defaultValue,
         schema: value,
         type,
-        placeholder: config?.defaultValuePlaceholder,
+        placeholder: config?.defaultValuePlaceholder ?? import_editor12.I18n.t("Default Value"),
         jsonFormatText: config?.jsonFormatText,
         onChange: (value2) => onChange("default", value2)
       }
@@ -1527,13 +1544,13 @@ function PropertyEdit(props) {
 
 // src/components/batch-variable-selector/index.tsx
 var import_react20 = __toESM(require("react"));
-var import_editor5 = require("@flowgram.ai/editor");
+var import_editor13 = require("@flowgram.ai/editor");
 var batchVariableSchema = {
   type: "array",
   extra: { weak: true }
 };
 function BatchVariableSelector(props) {
-  return /* @__PURE__ */ import_react20.default.createElement(import_editor5.PrivateScopeProvider, null, /* @__PURE__ */ import_react20.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
+  return /* @__PURE__ */ import_react20.default.createElement(import_editor13.PrivateScopeProvider, null, /* @__PURE__ */ import_react20.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/dynamic-value-input/index.tsx
@@ -1589,9 +1606,9 @@ var UITrigger = import_styled_components4.default.div`
 
 // src/components/dynamic-value-input/hooks.ts
 var import_react21 = require("react");
-var import_editor6 = require("@flowgram.ai/editor");
+var import_editor14 = require("@flowgram.ai/editor");
 function useRefVariable(value) {
-  const available = (0, import_editor6.useScopeAvailable)();
+  const available = (0, import_editor14.useScopeAvailable)();
   const refVariable = (0, import_react21.useMemo)(() => {
     if (value?.type === "ref") {
       return available.getByKeyPath(value.content);
@@ -1717,6 +1734,7 @@ function DynamicValueInput({
 
 // src/components/condition-row/index.tsx
 var import_react25 = __toESM(require("react"));
+var import_editor17 = require("@flowgram.ai/editor");
 var import_semi_ui14 = require("@douyinfe/semi-ui");
 
 // src/components/condition-row/styles.tsx
@@ -1744,10 +1762,10 @@ var UIValues = import_styled_components5.default.div`
 // src/components/condition-row/hooks/useRule.ts
 var import_react23 = require("react");
 var import_json_schema6 = require("@flowgram.ai/json-schema");
-var import_editor7 = require("@flowgram.ai/editor");
+var import_editor15 = require("@flowgram.ai/editor");
 
 // src/components/condition-row/constants.ts
-var rules = {
+var defaultRules = {
   string: {
     ["eq" /* EQ */]: "string",
     ["neq" /* NEQ */]: "string",
@@ -1803,7 +1821,7 @@ var rules = {
     ["is_not_empty" /* IS_NOT_EMPTY */]: null
   }
 };
-var opConfigs = {
+var defaultOpConfigs = {
   ["eq" /* EQ */]: {
     label: "Equal",
     abbreviation: "="
@@ -1867,8 +1885,9 @@ var opConfigs = {
 };
 
 // src/components/condition-row/hooks/useRule.ts
-function useRule(left) {
-  const available = (0, import_editor7.useScopeAvailable)();
+function useRule(left, userRules) {
+  const available = (0, import_editor15.useScopeAvailable)();
+  const rules = (0, import_react23.useMemo)(() => ({ ...defaultRules, ...userRules || {} }), [userRules]);
   const variable = (0, import_react23.useMemo)(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
@@ -1877,23 +1896,26 @@ function useRule(left) {
     if (!variable) return void 0;
     const schema = import_json_schema6.JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
-  }, [variable?.type]);
+  }, [variable?.type, rules]);
   return { rule };
 }
 
 // src/components/condition-row/hooks/useOp.tsx
 var import_react24 = __toESM(require("react"));
+var import_editor16 = require("@flowgram.ai/editor");
 var import_semi_ui13 = require("@douyinfe/semi-ui");
 var import_semi_icons6 = require("@douyinfe/semi-icons");
-function useOp({ rule, op, onChange, readonly }) {
+function useOp({ rule, op, onChange, readonly, userOps }) {
   const options = (0, import_react24.useMemo)(
     () => Object.keys(rule || {}).map((_op) => ({
-      ...opConfigs[_op] || {},
-      value: _op
+      ...defaultOpConfigs[_op] || {},
+      ...userOps?.[_op] || {},
+      value: _op,
+      label: import_editor16.I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
     })),
-    [rule]
+    [rule, userOps]
   );
-  const opConfig = (0, import_react24.useMemo)(() => opConfigs[op], [op]);
+  const opConfig = (0, import_react24.useMemo)(() => defaultOpConfigs[op], [op]);
   const renderOpSelect = () => /* @__PURE__ */ import_react24.default.createElement(
     import_semi_ui13.Select,
     {
@@ -1912,17 +1934,28 @@ function useOp({ rule, op, onChange, readonly }) {
 }
 
 // src/components/condition-row/index.tsx
-function ConditionRow({ style, value, onChange, readonly }) {
+var defaultRuleConfig = {
+  ops: {},
+  rules: {}
+};
+function ConditionRow({
+  style,
+  value,
+  onChange,
+  readonly,
+  ruleConfig = defaultRuleConfig
+}) {
   const { left, operator, right } = value || {};
-  const { rule } = useRule(left);
+  const { rule } = useRule(left, ruleConfig.rules);
   const { renderOpSelect, opConfig } = useOp({
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
-    readonly
+    readonly,
+    userOps: ruleConfig.ops
   });
   const targetSchema = (0, import_react25.useMemo)(() => {
-    const targetType = rule?.[operator] || null;
+    const targetType = rule?.[operator || ""] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
   return /* @__PURE__ */ import_react25.default.createElement(UIContainer3, { style }, /* @__PURE__ */ import_react25.default.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ import_react25.default.createElement(UIValues, null, /* @__PURE__ */ import_react25.default.createElement(UILeft, null, /* @__PURE__ */ import_react25.default.createElement(
@@ -1953,7 +1986,7 @@ function ConditionRow({ style, value, onChange, readonly }) {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: opConfig?.rightDisplay || "Empty"
+      value: opConfig?.rightDisplay || import_editor17.I18n.t("Empty")
     }
   ))));
 }
@@ -2125,13 +2158,13 @@ var UIContainer4 = import_styled_components7.default.div`
 // src/components/prompt-editor/extensions/markdown.tsx
 var import_react28 = require("react");
 var import_react29 = require("@coze-editor/editor/react");
-var import_editor8 = require("@coze-editor/editor");
+var import_editor18 = require("@coze-editor/editor");
 var import_view2 = require("@codemirror/view");
 function MarkdownHighlight() {
   const injector = (0, import_react29.useInjector)();
   (0, import_react28.useLayoutEffect)(
     () => injector.inject([
-      import_editor8.astDecorator.whole.of((cursor) => {
+      import_editor18.astDecorator.whole.of((cursor) => {
         if (cursor.name.startsWith("ATXHeading")) {
           return {
             type: "className",
@@ -2193,13 +2226,13 @@ var language_support_default = LanguageSupport;
 // src/components/prompt-editor/extensions/jinja.tsx
 var import_react32 = require("react");
 var import_react33 = require("@coze-editor/editor/react");
-var import_editor9 = require("@coze-editor/editor");
+var import_editor19 = require("@coze-editor/editor");
 var import_view3 = require("@codemirror/view");
 function JinjaHighlight() {
   const injector = (0, import_react33.useInjector)();
   (0, import_react32.useLayoutEffect)(
     () => injector.inject([
-      import_editor9.astDecorator.whole.of((cursor) => {
+      import_editor19.astDecorator.whole.of((cursor) => {
         if (cursor.name === "JinjaStatementStart" || cursor.name === "JinjaStatementEnd") {
           return {
             type: "className",
@@ -2340,7 +2373,7 @@ function VariableTree() {
 var import_react_dom = __toESM(require("react-dom"));
 var import_react38 = __toESM(require("react"));
 var import_lodash3 = require("lodash");
-var import_editor10 = require("@flowgram.ai/editor");
+var import_editor20 = require("@flowgram.ai/editor");
 var import_semi_ui18 = require("@douyinfe/semi-ui");
 var import_semi_icons8 = require("@douyinfe/semi-icons");
 var import_react39 = require("@coze-editor/editor/react");
@@ -2387,7 +2420,7 @@ var UIPopoverContent2 = import_styled_components8.default.div`
 var VariableTagWidget = class extends import_view4.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor10.DisposableCollection();
+    this.toDispose = new import_editor20.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
         return /* @__PURE__ */ import_react38.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
@@ -2425,7 +2458,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
     const dom = document.createElement("span");
     this.rootDOM = dom;
     this.toDispose.push(
-      import_editor10.Disposable.create(() => {
+      import_editor20.Disposable.create(() => {
         import_react_dom.default.unmountComponentAtNode(this.rootDOM);
       })
     );
@@ -2453,7 +2486,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
 };
 function VariableTagInject() {
   const injector = (0, import_react39.useInjector)();
-  const scope = (0, import_editor10.useCurrentScope)();
+  const scope = (0, import_editor20.useCurrentScope)();
   (0, import_react38.useLayoutEffect)(() => {
     const atMatcher = new import_view4.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
@@ -2505,15 +2538,15 @@ var import_react43 = require("@coze-editor/editor/react");
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
 var import_react41 = __toESM(require("react"));
 var import_lodash4 = require("lodash");
-var import_editor11 = require("@flowgram.ai/editor");
+var import_editor21 = require("@flowgram.ai/editor");
 var import_semi_ui19 = require("@douyinfe/semi-ui");
 function InputsPicker({
   inputsValues,
   onSelect
 }) {
-  const available = (0, import_editor11.useScopeAvailable)();
+  const available = (0, import_editor21.useScopeAvailable)();
   const getArrayDrilldown = (type, depth = 1) => {
-    if (import_editor11.ASTMatch.isArray(type.items)) {
+    if (import_editor21.ASTMatch.isArray(type.items)) {
       return getArrayDrilldown(type.items, depth + 1);
     }
     return { type: type.items, depth };
@@ -2521,12 +2554,12 @@ function InputsPicker({
   const renderVariable = (variable, keyPath) => {
     let type = variable?.type;
     let children;
-    if (import_editor11.ASTMatch.isObject(type)) {
+    if (import_editor21.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
     }
-    if (import_editor11.ASTMatch.isArray(type)) {
+    if (import_editor21.ASTMatch.isArray(type)) {
       const drilldown = getArrayDrilldown(type);
-      if (import_editor11.ASTMatch.isObject(drilldown.type)) {
+      if (import_editor21.ASTMatch.isObject(drilldown.type)) {
         children = (drilldown.type.properties || []).map(
           (_property) => renderVariable(_property, [
             ...keyPath,
@@ -2686,7 +2719,7 @@ function VariableTree2() {
 var import_react47 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_lodash5 = require("lodash");
-var import_editor12 = require("@flowgram.ai/editor");
+var import_editor22 = require("@flowgram.ai/editor");
 var import_semi_ui23 = require("@douyinfe/semi-ui");
 var import_semi_icons9 = require("@douyinfe/semi-icons");
 var import_react48 = require("@coze-editor/editor/react");
@@ -2733,7 +2766,7 @@ var UIPopoverContent3 = import_styled_components9.default.div`
 var VariableTagWidget2 = class extends import_view5.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor12.DisposableCollection();
+    this.toDispose = new import_editor22.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
         return /* @__PURE__ */ import_react47.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
@@ -2767,7 +2800,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     const dom = document.createElement("span");
     this.root = (0, import_client.createRoot)(dom);
     this.toDispose.push(
-      import_editor12.Disposable.create(() => {
+      import_editor22.Disposable.create(() => {
         this.root.unmount();
       })
     );
@@ -2795,7 +2828,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
 };
 function VariableTagInject2() {
   const injector = (0, import_react48.useInjector)();
-  const scope = (0, import_editor12.useCurrentScope)();
+  const scope = (0, import_editor22.useCurrentScope)();
   (0, import_react47.useLayoutEffect)(() => {
     const atMatcher = new import_view5.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
@@ -3077,7 +3110,7 @@ function SchemaTree(props) {
 // src/components/display-outputs/index.tsx
 var import_react54 = __toESM(require("react"));
 var import_json_schema7 = require("@flowgram.ai/json-schema");
-var import_editor13 = require("@flowgram.ai/editor");
+var import_editor23 = require("@flowgram.ai/editor");
 
 // src/components/display-schema-tag/index.tsx
 var import_react53 = __toESM(require("react"));
@@ -3130,8 +3163,8 @@ var DisplayOutputsWrapper = import_styled_components13.default.div`
 
 // src/components/display-outputs/index.tsx
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
-  const scope = (0, import_editor13.useCurrentScope)();
-  const refresh = (0, import_editor13.useRefresh)();
+  const scope = (0, import_editor23.useCurrentScope)();
+  const refresh = (0, import_editor23.useRefresh)();
   (0, import_react54.useEffect)(() => {
     if (!displayFromScope) {
       return () => null;
@@ -3166,9 +3199,9 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
 // src/components/display-flow-value/index.tsx
 var import_react55 = __toESM(require("react"));
 var import_json_schema8 = require("@flowgram.ai/json-schema");
-var import_editor14 = require("@flowgram.ai/editor");
+var import_editor24 = require("@flowgram.ai/editor");
 function DisplayFlowValue({ value, title, showIconInTree }) {
-  const available = (0, import_editor14.useScopeAvailable)();
+  const available = (0, import_editor24.useScopeAvailable)();
   const variable = value?.type === "ref" ? available.getByKeyPath(value?.content) : void 0;
   const schema = (0, import_react55.useMemo)(() => {
     if (value?.type === "ref") {
@@ -3223,7 +3256,7 @@ function DisplayInputsValues({ value, showIconInTree }) {
 
 // src/components/assign-rows/index.tsx
 var import_react59 = __toESM(require("react"));
-var import_editor15 = require("@flowgram.ai/editor");
+var import_editor25 = require("@flowgram.ai/editor");
 var import_semi_ui28 = require("@douyinfe/semi-ui");
 var import_semi_icons12 = require("@douyinfe/semi-icons");
 
@@ -3310,7 +3343,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ import_react59.default.createElement(import_editor15.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_editor25.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,
@@ -3343,29 +3376,29 @@ function AssignRows(props) {
 }
 
 // src/effects/provide-batch-input/index.ts
-var import_editor16 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor16.createEffectFromVariableProvider)({
+var import_editor26 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor26.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor16.ASTFactory.createVariableDeclaration({
+    import_editor26.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor16.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor26.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor16.ASTFactory.createObject({
+      type: import_editor26.ASTFactory.createObject({
         properties: [
-          import_editor16.ASTFactory.createProperty({
+          import_editor26.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor16.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor16.ASTFactory.createKeyPathExpression({
+            initializer: import_editor26.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor26.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor16.ASTFactory.createProperty({
+          import_editor26.ASTFactory.createProperty({
             key: "index",
-            type: import_editor16.ASTFactory.createNumber()
+            type: import_editor26.ASTFactory.createNumber()
           })
         ]
       })
@@ -3375,13 +3408,13 @@ var provideBatchInputEffect = (0, import_editor16.createEffectFromVariableProvid
 
 // src/effects/auto-rename-ref/index.ts
 var import_lodash6 = require("lodash");
-var import_editor17 = require("@flowgram.ai/editor");
+var import_editor27 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor17.DataEvent.onValueInit,
+    event: import_editor27.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor17.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor27.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -3466,13 +3499,13 @@ function traverseRef(name, value, cb) {
 
 // src/effects/provide-json-schema-outputs/index.ts
 var import_json_schema9 = require("@flowgram.ai/json-schema");
-var import_editor18 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor18.createEffectFromVariableProvider)({
+var import_editor28 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor28.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor18.ASTFactory.createVariableDeclaration({
+    import_editor28.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor18.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor28.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: import_json_schema9.JsonSchemaUtils.schemaToAST(value)
@@ -3481,12 +3514,12 @@ var provideJsonSchemaOutputs = (0, import_editor18.createEffectFromVariableProvi
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor19 = require("@flowgram.ai/editor");
+var import_editor29 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor19.DataEvent.onValueChange,
+    event: import_editor29.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor19.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor29.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             ..._var.meta || {},
@@ -3501,14 +3534,14 @@ var syncVariableTitle = [
 
 // src/effects/validate-when-variable-sync/index.ts
 var import_lodash7 = require("lodash");
-var import_editor20 = require("@flowgram.ai/editor");
+var import_editor30 = require("@flowgram.ai/editor");
 var validateWhenVariableSync = ({
   scope
 } = {}) => [
   {
-    event: import_editor20.DataEvent.onValueInit,
+    event: import_editor30.DataEvent.onValueInit,
     effect: ({ context, form }) => {
-      const nodeScope = scope === "private" ? (0, import_editor20.getNodePrivateScope)(context.node) : (0, import_editor20.getNodeScope)(context.node);
+      const nodeScope = scope === "private" ? (0, import_editor30.getNodePrivateScope)(context.node) : (0, import_editor30.getNodeScope)(context.node);
       const disposable = nodeScope.available.onListOrAnyVarChange(() => {
         if (!(0, import_lodash7.isEmpty)(form.state.errors)) {
           form.validate();
@@ -3519,6 +3552,56 @@ var validateWhenVariableSync = ({
   }
 ];
 
+// src/effects/listen-ref-value-change/index.ts
+var import_editor31 = require("@flowgram.ai/editor");
+var listenRefValueChange = (cb) => [
+  {
+    event: import_editor31.DataEvent.onValueInitOrChange,
+    effect: (params) => {
+      const { context, value } = params;
+      if (value?.type !== "ref") {
+        return () => null;
+      }
+      const disposable = (0, import_editor31.getNodeScope)(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (v) => {
+          cb({ ...params, variable: v });
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+
+// src/effects/listen-ref-schema-change/index.ts
+var import_json_schema10 = require("@flowgram.ai/json-schema");
+var import_editor32 = require("@flowgram.ai/editor");
+var listenRefSchemaChange = (cb) => [
+  {
+    event: import_editor32.DataEvent.onValueInitOrChange,
+    effect: (params) => {
+      const { context, value } = params;
+      if (value?.type !== "ref") {
+        return () => null;
+      }
+      const disposable = (0, import_editor32.getNodeScope)(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (_type) => {
+          cb({ ...params, schema: import_json_schema10.JsonSchemaUtils.astToSchema(_type) });
+        },
+        {
+          selector: (_v) => _v?.type
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+
 // src/shared/format-legacy-refs/index.ts
 var import_lodash8 = require("lodash");
 function formatLegacyRefOnSubmit(value) {
@@ -3582,21 +3665,21 @@ function formatNewRefToLegacyRef(value) {
 }
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor21 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor21.createEffectFromVariableProvider)({
+var import_editor33 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor33.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor21.ASTFactory.createVariableDeclaration({
+    import_editor33.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor21.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor33.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor21.ASTFactory.createObject({
+      type: import_editor33.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor21.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor33.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor21.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor21.ASTFactory.createKeyPathExpression({
+            initializer: import_editor33.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor33.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -3606,7 +3689,7 @@ var provideBatchOutputsEffect = (0, import_editor21.createEffectFromVariableProv
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor21.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor33.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -3614,7 +3697,7 @@ var createBatchOutputsFormPlugin = (0, import_editor21.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor21.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor33.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -3624,21 +3707,21 @@ var createBatchOutputsFormPlugin = (0, import_editor21.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor21.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor33.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor21.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor33.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor21.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor21.getNodeScope)(_childBlock))
+            (0, import_editor33.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor33.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -3649,9 +3732,9 @@ var createBatchOutputsFormPlugin = (0, import_editor21.defineFormPluginCreator)(
 
 // src/form-plugins/infer-inputs-plugin/index.ts
 var import_lodash9 = require("lodash");
-var import_json_schema10 = require("@flowgram.ai/json-schema");
-var import_editor22 = require("@flowgram.ai/editor");
-var createInferInputsPlugin = (0, import_editor22.defineFormPluginCreator)({
+var import_json_schema11 = require("@flowgram.ai/json-schema");
+var import_editor34 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor34.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
       return;
@@ -3662,7 +3745,7 @@ var createInferInputsPlugin = (0, import_editor22.defineFormPluginCreator)({
         targetKey,
         infer(
           (0, import_lodash9.get)(formData, sourceKey),
-          scope === "private" ? (0, import_editor22.getNodePrivateScope)(ctx.node) : (0, import_editor22.getNodeScope)(ctx.node)
+          scope === "private" ? (0, import_editor34.getNodePrivateScope)(ctx.node) : (0, import_editor34.getNodeScope)(ctx.node)
         )
       );
       return formData;
@@ -3702,7 +3785,7 @@ var infer = (values, scope) => {
     }
     if (isRef2(values)) {
       const variable = scope.available.getByKeyPath(values?.content);
-      const schema = variable?.type ? import_json_schema10.JsonSchemaUtils.astToSchema(variable?.type) : void 0;
+      const schema = variable?.type ? import_json_schema11.JsonSchemaUtils.astToSchema(variable?.type) : void 0;
       return schema;
     }
     if (isTemplate2(values)) {
@@ -3725,33 +3808,33 @@ var infer = (values, scope) => {
 
 // src/form-plugins/infer-assign-plugin/index.ts
 var import_lodash10 = require("lodash");
-var import_json_schema11 = require("@flowgram.ai/json-schema");
-var import_editor23 = require("@flowgram.ai/editor");
-var createInferAssignPlugin = (0, import_editor23.defineFormPluginCreator)({
+var import_json_schema12 = require("@flowgram.ai/json-schema");
+var import_editor35 = require("@flowgram.ai/editor");
+var createInferAssignPlugin = (0, import_editor35.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
     if (!assignKey || !outputKey) {
       return;
     }
     mergeEffect({
-      [assignKey]: (0, import_editor23.createEffectFromVariableProvider)({
+      [assignKey]: (0, import_editor35.createEffectFromVariableProvider)({
         parse: (value, ctx) => {
           const declareRows = (0, import_lodash10.uniqBy)(
             value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
             "left"
           );
           return [
-            import_editor23.ASTFactory.createVariableDeclaration({
+            import_editor35.ASTFactory.createVariableDeclaration({
               key: `${ctx.node.id}`,
               meta: {
-                title: (0, import_editor23.getNodeForm)(ctx.node)?.getValueIn("title"),
+                title: (0, import_editor35.getNodeForm)(ctx.node)?.getValueIn("title"),
                 icon: ctx.node.getNodeRegistry().info?.icon
               },
-              type: import_editor23.ASTFactory.createObject({
+              type: import_editor35.ASTFactory.createObject({
                 properties: declareRows.map(
-                  (_v) => import_editor23.ASTFactory.createProperty({
+                  (_v) => import_editor35.ASTFactory.createProperty({
                     key: _v.left,
-                    type: _v.right?.type === "constant" ? import_json_schema11.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
-                    initializer: _v.right?.type === "ref" ? import_editor23.ASTFactory.createKeyPathExpression({
+                    type: _v.right?.type === "constant" ? import_json_schema12.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
+                    initializer: _v.right?.type === "ref" ? import_editor35.ASTFactory.createKeyPathExpression({
                       keyPath: _v.right?.content || []
                     }) : {}
                   })
@@ -3766,7 +3849,7 @@ var createInferAssignPlugin = (0, import_editor23.defineFormPluginCreator)({
       (0, import_lodash10.set)(
         formData,
         outputKey,
-        import_json_schema11.JsonSchemaUtils.astToSchema((0, import_editor23.getNodeScope)(ctx.node).output.variables?.[0]?.type)
+        import_json_schema12.JsonSchemaUtils.astToSchema((0, import_editor35.getNodeScope)(ctx.node).output.variables?.[0]?.type)
       );
       return formData;
     });
@@ -3775,7 +3858,7 @@ var createInferAssignPlugin = (0, import_editor23.defineFormPluginCreator)({
 
 // src/validate/validate-flow-value/index.tsx
 var import_lodash11 = require("lodash");
-var import_editor24 = require("@flowgram.ai/editor");
+var import_editor36 = require("@flowgram.ai/editor");
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
   const {
@@ -3784,15 +3867,15 @@ function validateFlowValue(value, ctx) {
   } = errorMessages || {};
   if (required && ((0, import_lodash11.isNil)(value) || (0, import_lodash11.isNil)(value?.content) || value?.content === "")) {
     return {
-      level: import_editor24.FeedbackLevel.Error,
+      level: import_editor36.FeedbackLevel.Error,
       message: requiredMessage
     };
   }
   if (value?.type === "ref") {
-    const variable = (0, import_editor24.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+    const variable = (0, import_editor36.getNodeScope)(node).available.getByKeyPath(value?.content || []);
     if (!variable) {
       return {
-        level: import_editor24.FeedbackLevel.Error,
+        level: import_editor36.FeedbackLevel.Error,
         message: unknownVariableMessage
       };
     }
@@ -3800,10 +3883,10 @@ function validateFlowValue(value, ctx) {
   if (value?.type === "template") {
     const allRefs = getTemplateKeyPaths2(value);
     for (const ref of allRefs) {
-      const variable = (0, import_editor24.getNodeScope)(node).available.getByKeyPath(ref);
+      const variable = (0, import_editor36.getNodeScope)(node).available.getByKeyPath(ref);
       if (!variable) {
         return {
-          level: import_editor24.FeedbackLevel.Error,
+          level: import_editor36.FeedbackLevel.Error,
           message: unknownVariableMessage
         };
       }
@@ -3856,6 +3939,8 @@ function getTemplateKeyPaths2(value) {
   getTypeSelectValue,
   isLegacyFlowRefValueSchema,
   isNewFlowRefValueSchema,
+  listenRefSchemaChange,
+  listenRefValueChange,
   parseTypeSelectValue,
   provideBatchInputEffect,
   provideBatchOutputsEffect,