@flowgram.ai/form-materials 0.4.9 → 0.4.11

package/dist/esm/components/prompt-editor/editor.mjs

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ActiveLinePlaceholder, EditorProvider, Renderer } from "@flowgram.ai/coze-editor/react";
+import preset_prompt from "@flowgram.ai/coze-editor/preset-prompt";
+import { UIContainer } from "./styles.mjs";
+import markdown from "./extensions/markdown.mjs";
+import language_support from "./extensions/language-support.mjs";
+import jinja from "./extensions/jinja.mjs";
+function PromptEditor(props) {
+    const { value, onChange, readonly, placeholder, activeLinePlaceholder, style, hasError, children, disableMarkdownHighlight, options } = props || {};
+    const editorRef = useRef(null);
+    useEffect(()=>{
+        if (editorRef.current?.getValue() !== value?.content) editorRef.current?.setValue(String(value?.content || ''));
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ jsx(UIContainer, {
+        $hasError: hasError,
+        style: style,
+        children: /*#__PURE__*/ jsxs(EditorProvider, {
+            children: [
+                /*#__PURE__*/ jsx(Renderer, {
+                    didMount: (editor)=>{
+                        editorRef.current = editor;
+                    },
+                    plugins: preset_prompt,
+                    defaultValue: String(value?.content),
+                    options: {
+                        readOnly: readonly,
+                        editable: !readonly,
+                        placeholder,
+                        ...options
+                    },
+                    onChange: (e)=>{
+                        onChange({
+                            type: 'template',
+                            content: e.value
+                        });
+                    }
+                }),
+                activeLinePlaceholder && /*#__PURE__*/ jsx(ActiveLinePlaceholder, {
+                    children: activeLinePlaceholder
+                }),
+                !disableMarkdownHighlight && /*#__PURE__*/ jsx(markdown, {}),
+                /*#__PURE__*/ jsx(language_support, {}),
+                /*#__PURE__*/ jsx(jinja, {}),
+                children
+            ]
+        })
+    });
+}
+export { PromptEditor };

package/dist/esm/components/prompt-editor/extensions/jinja.mjs

@@ -0,0 +1,39 @@
+import { useLayoutEffect } from "react";
+import { useInjector } from "@flowgram.ai/coze-editor/react";
+import { astDecorator } from "@flowgram.ai/coze-editor";
+import { EditorView } from "@codemirror/view";
+function JinjaHighlight() {
+    const injector = useInjector();
+    useLayoutEffect(()=>injector.inject([
+            astDecorator.whole.of((cursor)=>{
+                if ('JinjaStatementStart' === cursor.name || 'JinjaStatementEnd' === cursor.name) return {
+                    type: 'className',
+                    className: 'jinja-statement-bracket'
+                };
+                if ('JinjaComment' === cursor.name) return {
+                    type: 'className',
+                    className: 'jinja-comment'
+                };
+                if ('JinjaExpression' === cursor.name) return {
+                    type: 'className',
+                    className: 'jinja-expression'
+                };
+            }),
+            EditorView.theme({
+                '.jinja-statement-bracket': {
+                    color: '#D1009D'
+                },
+                '.jinja-comment': {
+                    color: '#0607094D'
+                },
+                '.jinja-expression': {
+                    color: '#4E40E5'
+                }
+            })
+        ]), [
+        injector
+    ]);
+    return null;
+}
+const jinja = JinjaHighlight;
+export { jinja as default };

package/dist/esm/components/prompt-editor/extensions/language-support.mjs

@@ -0,0 +1,14 @@
+import { useLayoutEffect } from "react";
+import { useInjector } from "@flowgram.ai/coze-editor/react";
+import { languageSupport } from "@flowgram.ai/coze-editor/preset-prompt";
+function LanguageSupport() {
+    const injector = useInjector();
+    useLayoutEffect(()=>injector.inject([
+            languageSupport
+        ]), [
+        injector
+    ]);
+    return null;
+}
+const language_support = LanguageSupport;
+export { language_support as default };

package/dist/esm/components/prompt-editor/extensions/markdown.mjs

@@ -0,0 +1,47 @@
+import { useLayoutEffect } from "react";
+import { useInjector } from "@flowgram.ai/coze-editor/react";
+import { astDecorator } from "@flowgram.ai/coze-editor";
+import { EditorView } from "@codemirror/view";
+function MarkdownHighlight() {
+    const injector = useInjector();
+    useLayoutEffect(()=>injector.inject([
+            astDecorator.whole.of((cursor)=>{
+                if (cursor.name.startsWith('ATXHeading')) return {
+                    type: 'className',
+                    className: 'heading'
+                };
+                if ('Emphasis' === cursor.name) return {
+                    type: 'className',
+                    className: 'emphasis'
+                };
+                if ('StrongEmphasis' === cursor.name) return {
+                    type: 'className',
+                    className: 'strong-emphasis'
+                };
+                if ('ListMark' === cursor.name || 'QuoteMark' === cursor.name) return {
+                    type: 'className',
+                    className: 'mark'
+                };
+            }),
+            EditorView.theme({
+                '.heading': {
+                    color: '#00818C',
+                    fontWeight: 'bold'
+                },
+                '.emphasis': {
+                    fontStyle: 'italic'
+                },
+                '.strong-emphasis': {
+                    fontWeight: 'bold'
+                },
+                '.mark': {
+                    color: '#4E40E5'
+                }
+            })
+        ]), [
+        injector
+    ]);
+    return null;
+}
+const markdown = MarkdownHighlight;
+export { markdown as default };

package/dist/esm/components/prompt-editor/index.mjs

@@ -0,0 +1,5 @@
+import { lazySuspense } from "../../shared/index.mjs";
+const PromptEditor = lazySuspense(()=>import("./editor.mjs").then((module)=>({
+            default: module.PromptEditor
+        })));
+export { PromptEditor };

package/dist/esm/components/prompt-editor/styles.mjs

@@ -0,0 +1,11 @@
+import styled_components, { css } from "styled-components";
+const UIContainer = styled_components.div`
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+
+  ${({ $hasError })=>$hasError && css`
+      border: 1px solid var(--semi-color-danger-6);
+    `}
+`;
+export { UIContainer };

package/dist/esm/components/prompt-editor/types.mjs

@@ -0,0 +1 @@
+import "react";

package/dist/esm/components/prompt-editor-with-inputs/editor.mjs

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { PromptEditor } from "../prompt-editor/index.mjs";
+import { EditorInputsTree } from "../coze-editor-extensions/index.mjs";
+function PromptEditorWithInputs({ inputsValues, ...restProps }) {
+    return /*#__PURE__*/ jsx(PromptEditor, {
+        ...restProps,
+        children: /*#__PURE__*/ jsx(EditorInputsTree, {
+            inputsValues: inputsValues
+        })
+    });
+}
+export { PromptEditorWithInputs };

package/dist/esm/components/prompt-editor-with-inputs/index.mjs

@@ -0,0 +1,5 @@
+import { lazySuspense } from "../../shared/index.mjs";
+const PromptEditorWithInputs = lazySuspense(()=>import("./editor.mjs").then((module)=>({
+            default: module.PromptEditorWithInputs
+        })));
+export { PromptEditorWithInputs };

package/dist/esm/components/prompt-editor-with-variables/editor.mjs

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { PromptEditor } from "../prompt-editor/index.mjs";
+import { EditorVariableTagInject, EditorVariableTree } from "../coze-editor-extensions/index.mjs";
+function PromptEditorWithVariables(props) {
+    return /*#__PURE__*/ jsxs(PromptEditor, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(EditorVariableTree, {}),
+            /*#__PURE__*/ jsx(EditorVariableTagInject, {})
+        ]
+    });
+}
+export { PromptEditorWithVariables };

package/dist/esm/components/prompt-editor-with-variables/index.mjs

@@ -0,0 +1,5 @@
+import { lazySuspense } from "../../shared/index.mjs";
+const PromptEditorWithVariables = lazySuspense(()=>import("./editor.mjs").then((module)=>({
+            default: module.PromptEditorWithVariables
+        })));
+export { PromptEditorWithVariables };

package/dist/esm/components/type-selector/index.mjs

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Cascader, Icon, IconButton } from "@douyinfe/semi-ui";
+import { createInjectMaterial } from "../../shared/inject-material/index.mjs";
+import { useTypeManager } from "../../plugins/index.mjs";
+const labelStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 5
+};
+const getTypeSelectValue = (value)=>{
+    if (value?.type === 'array' && value?.items) return [
+        value.type,
+        ...getTypeSelectValue(value.items) || []
+    ];
+    return value?.type ? [
+        value.type
+    ] : void 0;
+};
+const parseTypeSelectValue = (value)=>{
+    const [type, ...subTypes] = value || [];
+    if ('array' === type) return {
+        type: 'array',
+        items: parseTypeSelectValue(subTypes)
+    };
+    return {
+        type
+    };
+};
+function TypeSelector(props) {
+    const { value, onChange, readonly, disabled, style } = props;
+    const selectValue = useMemo(()=>getTypeSelectValue(value), [
+        value
+    ]);
+    const typeManager = useTypeManager();
+    const icon = typeManager.getDisplayIcon(value || {});
+    const options = useMemo(()=>typeManager.getTypeRegistriesWithParentType().map((_type)=>{
+            const isArray = 'array' === _type.type;
+            return {
+                label: /*#__PURE__*/ jsxs("div", {
+                    style: labelStyle,
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            size: "small",
+                            svg: _type.icon
+                        }),
+                        typeManager.getTypeBySchema(_type)?.label || _type.type
+                    ]
+                }),
+                value: _type.type,
+                children: isArray ? typeManager.getTypeRegistriesWithParentType('array').map((_type)=>({
+                        label: /*#__PURE__*/ jsxs("div", {
+                            style: labelStyle,
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    size: "small",
+                                    svg: typeManager.getDisplayIcon({
+                                        type: 'array',
+                                        items: {
+                                            type: _type.type
+                                        }
+                                    })
+                                }),
+                                typeManager.getTypeBySchema(_type)?.label || _type.type
+                            ]
+                        }),
+                        value: _type.type
+                    })) : []
+            };
+        }), []);
+    const isDisabled = readonly || disabled;
+    return /*#__PURE__*/ jsx(Cascader, {
+        disabled: isDisabled,
+        size: "small",
+        triggerRender: ()=>/*#__PURE__*/ jsx(IconButton, {
+                size: "small",
+                style: {
+                    ...isDisabled ? {
+                        pointerEvents: 'none'
+                    } : {},
+                    ...style || {}
+                },
+                disabled: isDisabled,
+                icon: icon
+            }),
+        treeData: options,
+        value: selectValue,
+        leafOnly: true,
+        onChange: (value)=>{
+            onChange?.(parseTypeSelectValue(value));
+        }
+    });
+}
+TypeSelector.renderKey = 'type-selector-render-key';
+const InjectTypeSelector = createInjectMaterial(TypeSelector);
+export { InjectTypeSelector, TypeSelector, getTypeSelectValue, parseTypeSelectValue };

package/dist/esm/components/variable-selector/context.mjs

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const VariableSelectorContext = /*#__PURE__*/ createContext({});
+const useVariableSelectorContext = ()=>useContext(VariableSelectorContext);
+const VariableSelectorProvider = ({ children, skipVariable })=>{
+    const context = useMemo(()=>({
+            skipVariable
+        }), [
+        skipVariable
+    ]);
+    return /*#__PURE__*/ jsx(VariableSelectorContext.Provider, {
+        value: context,
+        children: children
+    });
+};
+export { VariableSelectorContext, VariableSelectorProvider, useVariableSelectorContext };

package/dist/esm/components/variable-selector/index.mjs

@@ -0,0 +1,101 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Popover } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
+import { createInjectMaterial } from "../../shared/index.mjs";
+import { useVariableTree } from "./use-variable-tree.mjs";
+import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from "./styles.mjs";
+import { VariableSelectorProvider, useVariableSelectorContext } from "./context.mjs";
+const VariableSelector = ({ value, config = {}, onChange, style, readonly = false, includeSchema, excludeSchema, hasError, triggerRender })=>{
+    const { skipVariable } = useVariableSelectorContext();
+    const treeData = useVariableTree({
+        includeSchema,
+        excludeSchema,
+        skipVariable
+    });
+    const treeValue = useMemo(()=>{
+        if ('string' == typeof value) {
+            console.warn('The Value of VariableSelector is a string, it should be an ARRAY. \n', 'Please check the value of VariableSelector \n');
+            return value;
+        }
+        return value?.join('.');
+    }, [
+        value
+    ]);
+    const renderIcon = (icon)=>{
+        if ('string' == typeof icon) return /*#__PURE__*/ jsx("img", {
+            style: {
+                marginRight: 8
+            },
+            width: 12,
+            height: 12,
+            src: icon
+        });
+        return icon;
+    };
+    console.log('debugger treeValue', treeValue);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(UITreeSelect, {
+            dropdownMatchSelectWidth: false,
+            disabled: readonly,
+            treeData: treeData,
+            size: "small",
+            value: treeValue,
+            clearIcon: null,
+            $error: hasError,
+            style: style,
+            validateStatus: hasError ? 'error' : void 0,
+            onChange: (_, _config)=>{
+                onChange(_config.keyPath);
+            },
+            renderSelectedItem: (_option)=>{
+                if (!_option?.keyPath) return /*#__PURE__*/ jsx(UITag, {
+                    prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
+                    color: "amber",
+                    closable: !readonly,
+                    onClose: ()=>onChange(void 0),
+                    children: config?.notFoundContent ?? 'Undefined'
+                });
+                const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
+                const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+                    children: _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} ` : null
+                });
+                return /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(Popover, {
+                        content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+                            children: [
+                                rootIcon,
+                                rootTitle,
+                                /*#__PURE__*/ jsx(UIVarName, {
+                                    children: _option.keyPath.slice(1).join('.')
+                                })
+                            ]
+                        }),
+                        children: /*#__PURE__*/ jsxs(UITag, {
+                            prefixIcon: rootIcon,
+                            closable: !readonly,
+                            onClose: ()=>onChange(void 0),
+                            children: [
+                                rootTitle,
+                                !_option.isRoot && /*#__PURE__*/ jsx(UIVarName, {
+                                    $inSelector: true,
+                                    children: _option.label
+                                })
+                            ]
+                        })
+                    })
+                });
+            },
+            showClear: false,
+            arrowIcon: /*#__PURE__*/ jsx(IconChevronDownStroked, {
+                size: "small"
+            }),
+            triggerRender: triggerRender,
+            placeholder: config?.placeholder ?? I18n.t('Select Variable')
+        })
+    });
+};
+VariableSelector.renderKey = 'variable-selector-render-key';
+const InjectVariableSelector = createInjectMaterial(VariableSelector);
+export { InjectVariableSelector, VariableSelector, VariableSelectorProvider, useVariableTree };

package/dist/esm/components/variable-selector/styles.mjs

@@ -0,0 +1,58 @@
+import styled_components, { css } from "styled-components";
+import { Tag, TreeSelect } from "@douyinfe/semi-ui";
+const UIRootTitle = styled_components.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+const UIVarName = styled_components.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  ${({ $inSelector })=>$inSelector && css`
+      min-width: 50%;
+    `}
+`;
+const UITag = styled_components(Tag)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0;
+    height: 22px;
+  }
+`;
+const UITreeSelect = styled_components(TreeSelect)`
+  outline: ${({ $error })=>$error ? '1px solid red' : 'none'};
+
+  & .semi-tree-select-selection {
+    padding: 0px;
+    height: 22px;
+  }
+
+  & .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  & .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+`;
+const UIPopoverContent = styled_components.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+`;
+export { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName };

package/dist/esm/components/variable-selector/use-variable-tree.mjs

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { ASTMatch, useAvailableVariables } from "@flowgram.ai/editor";
+import { Icon } from "@douyinfe/semi-ui";
+import { useTypeManager } from "../../plugins/index.mjs";
+function useVariableTree(params) {
+    const { includeSchema, excludeSchema, skipVariable } = params;
+    const typeManager = useTypeManager();
+    const variables = useAvailableVariables();
+    const getVariableTypeIcon = useCallback((variable)=>{
+        if (variable.meta?.icon) {
+            if ('string' == typeof variable.meta.icon) return /*#__PURE__*/ jsx("img", {
+                style: {
+                    marginRight: 8
+                },
+                width: 12,
+                height: 12,
+                src: variable.meta.icon
+            });
+            return variable.meta.icon;
+        }
+        const schema = JsonSchemaUtils.astToSchema(variable.type, {
+            drilldownObject: false
+        });
+        return /*#__PURE__*/ jsx(Icon, {
+            size: "small",
+            svg: typeManager.getDisplayIcon(schema || {})
+        });
+    }, []);
+    const renderVariable = (variable, parentFields = [])=>{
+        let type = variable?.type;
+        if (!type) return null;
+        let children;
+        if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...parentFields,
+                variable
+            ])).filter(Boolean);
+        const keyPath = [
+            ...parentFields.map((_field)=>_field.key),
+            variable.key
+        ];
+        const key = keyPath.join('.');
+        const isSchemaInclude = includeSchema ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
+        const isSchemaExclude = excludeSchema ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
+        const isCustomSkip = skipVariable ? skipVariable(variable) : false;
+        const isMetaDisabled = variable.meta?.disabled;
+        const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
+        if (!isSchemaMatch && !children?.length) return null;
+        return {
+            key: key,
+            label: variable.meta?.title || variable.key,
+            value: key,
+            keyPath,
+            icon: getVariableTypeIcon(variable),
+            children,
+            disabled: !isSchemaMatch,
+            rootMeta: parentFields[0]?.meta || variable.meta,
+            isRoot: !parentFields?.length
+        };
+    };
+    return [
+        ...variables.slice(0).reverse()
+    ].map((_variable)=>renderVariable(_variable)).filter(Boolean);
+}
+export { useVariableTree };

package/dist/esm/effects/auto-rename-ref/index.mjs

@@ -0,0 +1,64 @@
+import { DataEvent, VariableFieldKeyRenameService } from "@flowgram.ai/editor";
+import { FlowValueUtils } from "../../shared/index.mjs";
+const 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 ('ref' === _v.type) {
+                        if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+                            _v.content = [
+                                ...afterKeyPath,
+                                ...(_v.content || [])?.slice(beforeKeyPath.length)
+                            ];
+                            form.setValueIn(_drilldownName, _v);
+                        }
+                    } else if ('template' === _v.type) {
+                        const templateKeyPaths = FlowValueUtils.getTemplateKeyPaths(_v);
+                        let hasMatch = false;
+                        templateKeyPaths.forEach((_keyPath)=>{
+                            if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                                hasMatch = true;
+                                const nextKeyPath = [
+                                    ...afterKeyPath,
+                                    ...(_keyPath || [])?.slice(beforeKeyPath.length)
+                                ];
+                                _v.content = _v.content?.replace(`{{${_keyPath.join('.')}}`, `{{${nextKeyPath.join('.')}}`);
+                            }
+                        });
+                        if (hasMatch) form.setValueIn(_drilldownName, {
+                            ..._v
+                        });
+                    }
+                });
+            });
+            return ()=>{
+                disposable.dispose();
+            };
+        }
+    }
+];
+function isKeyPathMatch(keyPath = [], targetKeyPath) {
+    return targetKeyPath.every((_key, index)=>_key === keyPath[index]);
+}
+function traverseRef(name, value, cb) {
+    for (const { value: _v, path } of FlowValueUtils.traverse(value, {
+        includeTypes: [
+            'ref',
+            'template'
+        ],
+        path: name
+    }))cb(path, _v);
+}
+export { autoRenameRefEffect };

package/dist/esm/effects/index.mjs

@@ -0,0 +1,8 @@
+import { autoRenameRefEffect } from "./auto-rename-ref/index.mjs";
+import { listenRefSchemaChange } from "./listen-ref-schema-change/index.mjs";
+import { listenRefValueChange } from "./listen-ref-value-change/index.mjs";
+import { provideBatchInputEffect } from "./provide-batch-input/index.mjs";
+import { provideJsonSchemaOutputs } from "./provide-json-schema-outputs/index.mjs";
+import { syncVariableTitle } from "./sync-variable-title/index.mjs";
+import { validateWhenVariableSync } from "./validate-when-variable-sync/index.mjs";
+export { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provideBatchInputEffect, provideJsonSchemaOutputs, syncVariableTitle, validateWhenVariableSync };

package/dist/esm/effects/listen-ref-schema-change/index.mjs

@@ -0,0 +1,23 @@
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { DataEvent, getNodeScope } from "@flowgram.ai/editor";
+const listenRefSchemaChange = (cb)=>[
+        {
+            event: DataEvent.onValueInitOrChange,
+            effect: (params)=>{
+                const { context, value } = params;
+                if (value?.type !== 'ref') return ()=>null;
+                const disposable = getNodeScope(context.node).available.trackByKeyPath(value?.content || [], (_type)=>{
+                    cb({
+                        ...params,
+                        schema: JsonSchemaUtils.astToSchema(_type)
+                    });
+                }, {
+                    selector: (_v)=>_v?.type
+                });
+                return ()=>{
+                    disposable.dispose();
+                };
+            }
+        }
+    ];
+export { listenRefSchemaChange };