@flowgram.ai/form-materials 0.4.9 → 0.4.10

package/dist/esm/components/json-schema-editor/styles.mjs

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import styled_components, { css } from "styled-components";
+import semi_icons from "@douyinfe/semi-icons";
+const UIContainer = styled_components.div`
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+`;
+const UIRow = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+const UICollapseTrigger = styled_components.div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+const UIExpandDetail = styled_components.div`
+  display: flex;
+  flex-direction: column;
+`;
+const UILabel = styled_components.div`
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+`;
+const UITreeItems = styled_components.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink })=>$shrink && css`
+      padding-left: 3px;
+      margin-top: 10px;
+    `}
+`;
+const UITreeItemLeft = styled_components.div`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $showCollapse })=>{
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
+    return $showLine && css`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -14px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -14px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: ${width}; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `;
+}}
+`;
+const UITreeItemRight = styled_components.div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+const UITreeItemMain = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+`;
+const UICollapsible = styled_components.div`
+  display: none;
+
+  ${({ $collapse })=>$collapse && css`
+      display: block;
+    `}
+`;
+const UIName = styled_components.div`
+  flex-grow: 1;
+`;
+const UIType = styled_components.div``;
+const UIRequired = styled_components.div``;
+const UIActions = styled_components.div`
+  white-space: nowrap;
+`;
+const iconAddChildrenSvg = /*#__PURE__*/ jsxs("svg", {
+    className: "icon-icon icon-icon-coz_add_node ",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+        /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+        }),
+        /*#__PURE__*/ jsx("path", {
+            d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"
+        })
+    ]
+});
+const IconAddChildren = ()=>/*#__PURE__*/ jsx(semi_icons, {
+        size: "small",
+        svg: iconAddChildrenSvg
+    });
+const DefaultValueWrapper = styled_components.div`
+  margin: 0;
+`;
+const ConstantInputWrapper = styled_components.div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
+export { ConstantInputWrapper, DefaultValueWrapper, IconAddChildren, UIActions, UICollapseTrigger, UICollapsible, UIContainer, UIExpandDetail, UILabel, UIName, UIRequired, UIRow, UITreeItemLeft, UITreeItemMain, UITreeItemRight, UITreeItems, UIType };

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 { InputsTree } from "./extensions/inputs-tree.mjs";
+function PromptEditorWithInputs({ inputsValues, ...restProps }) {
+    return /*#__PURE__*/ jsx(PromptEditor, {
+        ...restProps,
+        children: /*#__PURE__*/ jsx(InputsTree, {
+            inputsValues: inputsValues
+        })
+    });
+}
+export { PromptEditorWithInputs };

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

@@ -0,0 +1,67 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover } from "@douyinfe/semi-ui";
+import { InputsPicker } from "../inputs-picker.mjs";
+function InputsTree({ inputsValues }) {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = getCurrentMentionReplaceRange(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            ...range,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: [
+                    '{',
+                    '{}',
+                    '@'
+                ],
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300
+                    },
+                    children: /*#__PURE__*/ jsx(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { InputsTree };

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-inputs/inputs-picker.mjs

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { isPlainObject, last } from "lodash-es";
+import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
+import { Tree } from "@douyinfe/semi-ui";
+import { FlowValueUtils } from "../../shared/index.mjs";
+function InputsPicker({ inputsValues, onSelect }) {
+    const available = useScopeAvailable();
+    const getArrayDrilldown = (type, depth = 1)=>{
+        if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
+        return {
+            type: type.items,
+            depth: depth
+        };
+    };
+    const renderVariable = (variable, keyPath)=>{
+        let type = variable?.type;
+        let children;
+        if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...keyPath,
+                _property.key
+            ])).filter(Boolean);
+        if (ASTMatch.isArray(type)) {
+            const drilldown = getArrayDrilldown(type);
+            if (ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
+                    ...keyPath,
+                    ...new Array(drilldown.depth).fill('[0]'),
+                    _property.key
+                ])).filter(Boolean);
+        }
+        const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
+        return {
+            key: key,
+            label: last(keyPath),
+            value: key,
+            children
+        };
+    };
+    const getTreeData = (value, keyPath)=>{
+        const currKey = keyPath.join('.');
+        if (FlowValueUtils.isFlowValue(value)) {
+            if (FlowValueUtils.isRef(value)) {
+                const variable = available.getByKeyPath(value.content || []);
+                if (variable) return renderVariable(variable, keyPath);
+            }
+            return {
+                key: currKey,
+                value: currKey,
+                label: last(keyPath)
+            };
+        }
+        if (isPlainObject(value)) return {
+            key: currKey,
+            value: currKey,
+            label: last(keyPath),
+            children: Object.entries(value).map(([key, value])=>getTreeData(value, [
+                    ...keyPath,
+                    key
+                ])).filter(Boolean)
+        };
+    };
+    const treeData = useMemo(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
+                key
+            ])).filter(Boolean), []);
+    return /*#__PURE__*/ jsx(Tree, {
+        treeData: treeData,
+        onSelect: (v)=>onSelect(v)
+    });
+}
+export { InputsPicker };

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

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { PromptEditor } from "../prompt-editor/index.mjs";
+import { VariableTree } from "./extensions/variable-tree.mjs";
+import { VariableTagInject } from "./extensions/variable-tag.mjs";
+function PromptEditorWithVariables(props) {
+    return /*#__PURE__*/ jsxs(PromptEditor, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(VariableTree, {}),
+            /*#__PURE__*/ jsx(VariableTagInject, {})
+        ]
+    });
+}
+export { PromptEditorWithVariables };

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

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect } from "react";
+import { isEqual, last } from "lodash-es";
+import { Disposable, DisposableCollection, useCurrentScope } from "@flowgram.ai/editor";
+import { useInjector } from "@flowgram.ai/coze-editor/react";
+import { Popover } from "@douyinfe/semi-ui";
+import { IconIssueStroked } from "@douyinfe/semi-icons";
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { polyfillCreateRoot } from "../../../shared/index.mjs";
+import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from "../styles.mjs";
+class VariableTagWidget extends WidgetType {
+    constructor({ keyPath, scope }){
+        super(), this.toDispose = new DisposableCollection(), this.renderIcon = (icon)=>{
+            if ('string' == typeof icon) return /*#__PURE__*/ jsx("img", {
+                style: {
+                    marginRight: 8
+                },
+                width: 12,
+                height: 12,
+                src: icon
+            });
+            return icon;
+        };
+        this.keyPath = keyPath;
+        this.scope = scope;
+    }
+    renderVariable(v) {
+        if (!v) return void this.root.render(/*#__PURE__*/ jsx(UITag, {
+            prefixIcon: /*#__PURE__*/ jsx(IconIssueStroked, {}),
+            color: "amber",
+            children: "Unknown"
+        }));
+        const rootField = last(v.parentFields);
+        const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
+            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
+        });
+        const rootIcon = this.renderIcon(rootField?.meta.icon);
+        this.root.render(/*#__PURE__*/ jsx(Popover, {
+            content: /*#__PURE__*/ jsxs(UIPopoverContent, {
+                children: [
+                    rootIcon,
+                    rootTitle,
+                    /*#__PURE__*/ jsx(UIVarName, {
+                        children: v?.keyPath.slice(1).join('.')
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ jsxs(UITag, {
+                prefixIcon: rootIcon,
+                children: [
+                    rootTitle,
+                    /*#__PURE__*/ jsx(UIVarName, {
+                        children: v?.key
+                    })
+                ]
+            })
+        }));
+    }
+    toDOM(view) {
+        const dom = document.createElement('span');
+        this.root = polyfillCreateRoot(dom);
+        this.toDispose.push(Disposable.create(()=>{
+            this.root.unmount();
+        }));
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
+            this.renderVariable(v);
+        }, {
+            triggerOnInit: false
+        }));
+        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        return dom;
+    }
+    eq(other) {
+        return isEqual(this.keyPath, other.keyPath);
+    }
+    ignoreEvent() {
+        return false;
+    }
+    destroy(dom) {
+        this.toDispose.dispose();
+    }
+}
+function VariableTagInject() {
+    const injector = useInjector();
+    const scope = useCurrentScope();
+    useLayoutEffect(()=>{
+        const atMatcher = new MatchDecorator({
+            regexp: /\{\{([^\}\{]+)\}\}/g,
+            decoration: (match)=>Decoration.replace({
+                    widget: new VariableTagWidget({
+                        keyPath: match[1]?.split('.') ?? [],
+                        scope
+                    })
+                })
+        });
+        return injector.inject([
+            ViewPlugin.fromClass(class {
+                constructor(view){
+                    this.view = view;
+                    this.decorations = atMatcher.createDeco(view);
+                }
+                update() {
+                    this.decorations = atMatcher.createDeco(this.view);
+                }
+            }, {
+                decorations: (p)=>p.decorations,
+                provide (p) {
+                    return EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? Decoration.none);
+                }
+            })
+        ]);
+    }, [
+        injector
+    ]);
+    return null;
+}
+export { VariableTagInject };

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

@@ -0,0 +1,69 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import { useVariableTree } from "../../variable-selector/index.mjs";
+function VariableTree() {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = getCurrentMentionReplaceRange(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            from,
+            to,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    const treeData = useVariableTree({});
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: [
+                    '{',
+                    '{}',
+                    '@'
+                ],
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300
+                    },
+                    children: /*#__PURE__*/ jsx(Tree, {
+                        treeData: treeData,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { VariableTree };