@flowgram.ai/form-materials 0.4.9 → 0.4.10

package/dist/cjs/shared/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    isNewFlowRefValueSchema: ()=>external_format_legacy_refs_index_js_namespaceObject.isNewFlowRefValueSchema,
+    FlowValueUtils: ()=>index_js_namespaceObject.FlowValueUtils,
+    isLegacyFlowRefValueSchema: ()=>external_format_legacy_refs_index_js_namespaceObject.isLegacyFlowRefValueSchema,
+    unstableSetCreateRoot: ()=>external_polyfill_create_root_index_js_namespaceObject.unstableSetCreateRoot,
+    formatLegacyRefOnSubmit: ()=>external_format_legacy_refs_index_js_namespaceObject.formatLegacyRefOnSubmit,
+    createInjectMaterial: ()=>external_inject_material_index_js_namespaceObject.createInjectMaterial,
+    lazySuspense: ()=>external_lazy_suspense_index_js_namespaceObject.lazySuspense,
+    formatNewRefToLegacyRef: ()=>external_format_legacy_refs_index_js_namespaceObject.formatNewRefToLegacyRef,
+    polyfillCreateRoot: ()=>external_polyfill_create_root_index_js_namespaceObject.polyfillCreateRoot,
+    withSuspense: ()=>external_lazy_suspense_index_js_namespaceObject.withSuspense,
+    formatLegacyRefToNewRef: ()=>external_format_legacy_refs_index_js_namespaceObject.formatLegacyRefToNewRef,
+    formatLegacyRefOnInit: ()=>external_format_legacy_refs_index_js_namespaceObject.formatLegacyRefOnInit
+});
+const index_js_namespaceObject = require("./flow-value/index.js");
+const external_format_legacy_refs_index_js_namespaceObject = require("./format-legacy-refs/index.js");
+const external_inject_material_index_js_namespaceObject = require("./inject-material/index.js");
+const external_lazy_suspense_index_js_namespaceObject = require("./lazy-suspense/index.js");
+const external_polyfill_create_root_index_js_namespaceObject = require("./polyfill-create-root/index.js");
+exports.FlowValueUtils = __webpack_exports__.FlowValueUtils;
+exports.createInjectMaterial = __webpack_exports__.createInjectMaterial;
+exports.formatLegacyRefOnInit = __webpack_exports__.formatLegacyRefOnInit;
+exports.formatLegacyRefOnSubmit = __webpack_exports__.formatLegacyRefOnSubmit;
+exports.formatLegacyRefToNewRef = __webpack_exports__.formatLegacyRefToNewRef;
+exports.formatNewRefToLegacyRef = __webpack_exports__.formatNewRefToLegacyRef;
+exports.isLegacyFlowRefValueSchema = __webpack_exports__.isLegacyFlowRefValueSchema;
+exports.isNewFlowRefValueSchema = __webpack_exports__.isNewFlowRefValueSchema;
+exports.lazySuspense = __webpack_exports__.lazySuspense;
+exports.polyfillCreateRoot = __webpack_exports__.polyfillCreateRoot;
+exports.unstableSetCreateRoot = __webpack_exports__.unstableSetCreateRoot;
+exports.withSuspense = __webpack_exports__.withSuspense;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FlowValueUtils",
+    "createInjectMaterial",
+    "formatLegacyRefOnInit",
+    "formatLegacyRefOnSubmit",
+    "formatLegacyRefToNewRef",
+    "formatNewRefToLegacyRef",
+    "isLegacyFlowRefValueSchema",
+    "isNewFlowRefValueSchema",
+    "lazySuspense",
+    "polyfillCreateRoot",
+    "unstableSetCreateRoot",
+    "withSuspense"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/shared/inject-material/index.js

@@ -0,0 +1,65 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createInjectMaterial: ()=>createInjectMaterial
+});
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const editor_namespaceObject = require("@flowgram.ai/editor");
+function createInjectMaterial(Component, params) {
+    const InjectComponent = (props)=>{
+        const container = (0, editor_namespaceObject.usePlaygroundContainer)();
+        if (!container?.isBound(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
+            ...props
+        });
+        const rendererRegistry = container.get(editor_namespaceObject.FlowRendererRegistry);
+        const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
+        const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
+        if (renderer?.type !== editor_namespaceObject.FlowRendererComponentType.REACT) return /*#__PURE__*/ external_react_default().createElement(Component, {
+            ...props
+        });
+        return /*#__PURE__*/ external_react_default().createElement(renderer.renderer, {
+            ...props
+        });
+    };
+    return InjectComponent;
+}
+exports.createInjectMaterial = __webpack_exports__.createInjectMaterial;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "createInjectMaterial"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/shared/lazy-suspense/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    withSuspense: ()=>withSuspense,
+    lazySuspense: ()=>lazySuspense
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+function withSuspense(Component, fallback) {
+    const WithSuspenseComponent = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Suspense, {
+            fallback: fallback || /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Skeleton.Paragraph, {
+                style: {
+                    width: '100%'
+                },
+                rows: 1
+            }),
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
+                ...props
+            })
+        });
+    return WithSuspenseComponent;
+}
+function lazySuspense(params, fallback) {
+    return withSuspense(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(params), fallback);
+}
+exports.lazySuspense = __webpack_exports__.lazySuspense;
+exports.withSuspense = __webpack_exports__.withSuspense;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "lazySuspense",
+    "withSuspense"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/shared/polyfill-create-root/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    polyfillCreateRoot: ()=>polyfillCreateRoot,
+    unstableSetCreateRoot: ()=>unstableSetCreateRoot
+});
+const external_react_dom_namespaceObject = require("react-dom");
+let unstableCreateRoot = (dom)=>({
+        render (children) {
+            external_react_dom_namespaceObject.render(children, dom);
+        },
+        unmount () {
+            external_react_dom_namespaceObject.unmountComponentAtNode(dom);
+        }
+    });
+function polyfillCreateRoot(dom) {
+    return unstableCreateRoot(dom);
+}
+function unstableSetCreateRoot(createRoot) {
+    unstableCreateRoot = createRoot;
+}
+exports.polyfillCreateRoot = __webpack_exports__.polyfillCreateRoot;
+exports.unstableSetCreateRoot = __webpack_exports__.unstableSetCreateRoot;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "polyfillCreateRoot",
+    "unstableSetCreateRoot"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/validate/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    validateFlowValue: ()=>index_js_namespaceObject.validateFlowValue
+});
+const index_js_namespaceObject = require("./validate-flow-value/index.js");
+exports.validateFlowValue = __webpack_exports__.validateFlowValue;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "validateFlowValue"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/validate/validate-flow-value/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    validateFlowValue: ()=>validateFlowValue
+});
+const external_lodash_es_namespaceObject = require("lodash-es");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const index_js_namespaceObject = require("../../shared/index.js");
+function validateFlowValue(value, ctx) {
+    const { node, required, errorMessages } = ctx;
+    const { required: requiredMessage = 'Field is required', unknownVariable: unknownVariableMessage = 'Unknown Variable' } = errorMessages || {};
+    if (required && ((0, external_lodash_es_namespaceObject.isNil)(value) || (0, external_lodash_es_namespaceObject.isNil)(value?.content) || value?.content === '')) return {
+        level: editor_namespaceObject.FeedbackLevel.Error,
+        message: requiredMessage
+    };
+    if (value?.type === 'ref') {
+        const variable = (0, editor_namespaceObject.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+        if (!variable) return {
+            level: editor_namespaceObject.FeedbackLevel.Error,
+            message: unknownVariableMessage
+        };
+    }
+    if (value?.type === 'template') {
+        const allRefs = index_js_namespaceObject.FlowValueUtils.getTemplateKeyPaths(value);
+        for (const ref of allRefs){
+            const variable = (0, editor_namespaceObject.getNodeScope)(node).available.getByKeyPath(ref);
+            if (!variable) return {
+                level: editor_namespaceObject.FeedbackLevel.Error,
+                message: unknownVariableMessage
+            };
+        }
+    }
+}
+exports.validateFlowValue = __webpack_exports__.validateFlowValue;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "validateFlowValue"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/esm/components/assign-row/index.mjs

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { IconButton } from "@douyinfe/semi-ui";
+import { IconMinus } from "@douyinfe/semi-icons";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { BlurInput } from "../blur-input/index.mjs";
+function AssignRow(props) {
+    const { value = {
+        operator: 'assign'
+    }, onChange, onDelete, readonly } = props;
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 5
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    width: 150,
+                    minWidth: 150,
+                    maxWidth: 150
+                },
+                children: value?.operator === 'assign' ? /*#__PURE__*/ jsx(InjectVariableSelector, {
+                    style: {
+                        width: '100%',
+                        height: 26
+                    },
+                    value: value?.left?.content,
+                    config: {
+                        placeholder: 'Select Left'
+                    },
+                    onChange: (v)=>onChange?.({
+                            ...value,
+                            left: {
+                                type: 'ref',
+                                content: v
+                            }
+                        })
+                }) : /*#__PURE__*/ jsx(BlurInput, {
+                    style: {
+                        height: 26
+                    },
+                    size: "small",
+                    placeholder: "Input Name",
+                    value: value?.left,
+                    onChange: (v)=>onChange?.({
+                            ...value,
+                            left: v
+                        })
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    flexGrow: 1
+                },
+                children: /*#__PURE__*/ jsx(InjectDynamicValueInput, {
+                    readonly: readonly,
+                    value: value?.right,
+                    onChange: (v)=>onChange?.({
+                            ...value,
+                            right: v
+                        })
+                })
+            }),
+            onDelete && /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    size: "small",
+                    theme: "borderless",
+                    icon: /*#__PURE__*/ jsx(IconMinus, {}),
+                    onClick: ()=>onDelete?.()
+                })
+            })
+        ]
+    });
+}
+export { AssignRow };

package/dist/esm/components/assign-rows/index.mjs

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { FieldArray } from "@flowgram.ai/editor";
+import { Button } from "@douyinfe/semi-ui";
+import { IconPlus } from "@douyinfe/semi-icons";
+import { AssignRow } from "../assign-row/index.mjs";
+function AssignRows(props) {
+    const { name, readonly } = props;
+    return /*#__PURE__*/ jsx(FieldArray, {
+        name: name,
+        children: ({ field })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    field.map((childField, index)=>/*#__PURE__*/ jsx(AssignRow, {
+                            readonly: readonly,
+                            value: childField.value,
+                            onChange: (value)=>{
+                                childField.onChange(value);
+                            },
+                            onDelete: ()=>field.remove(index)
+                        }, childField.key)),
+                    /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            gap: 5
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "small",
+                                theme: "borderless",
+                                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                                onClick: ()=>field.append({
+                                        operator: 'assign'
+                                    }),
+                                children: "Assign"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "small",
+                                theme: "borderless",
+                                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                                onClick: ()=>field.append({
+                                        operator: 'declare'
+                                    }),
+                                children: "Declaration"
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+}
+export { AssignRows };

package/dist/esm/components/batch-outputs/index.mjs

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button, Input } from "@douyinfe/semi-ui";
+import { IconDelete, IconPlus } from "@douyinfe/semi-icons";
+import { useObjectList } from "../../hooks/index.mjs";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { UIRow, UIRows } from "./styles.mjs";
+function BatchOutputs(props) {
+    const { readonly, style } = props;
+    const { list, add, updateKey, updateValue, remove } = useObjectList(props);
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(UIRows, {
+                style: style,
+                children: list.map((item)=>/*#__PURE__*/ jsxs(UIRow, {
+                        children: [
+                            /*#__PURE__*/ jsx(Input, {
+                                style: {
+                                    width: 100
+                                },
+                                disabled: readonly,
+                                size: "small",
+                                value: item.key,
+                                onChange: (v)=>updateKey(item.id, v)
+                            }),
+                            /*#__PURE__*/ jsx(InjectVariableSelector, {
+                                style: {
+                                    flexGrow: 1
+                                },
+                                readonly: readonly,
+                                value: item.value?.content,
+                                onChange: (v)=>updateValue(item.id, {
+                                        type: 'ref',
+                                        content: v
+                                    })
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                disabled: readonly,
+                                icon: /*#__PURE__*/ jsx(IconDelete, {}),
+                                size: "small",
+                                onClick: ()=>remove(item.id)
+                            })
+                        ]
+                    }, item.id))
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                disabled: readonly,
+                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                size: "small",
+                onClick: ()=>add(),
+                children: I18n.t('Add')
+            })
+        ]
+    });
+}
+export { BatchOutputs };

package/dist/esm/components/batch-outputs/styles.mjs

@@ -0,0 +1,13 @@
+import styled_components from "styled-components";
+const UIRows = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+const UIRow = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+export { UIRow, UIRows };

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { PrivateScopeProvider } from "@flowgram.ai/editor";
+import { VariableSelector } from "../variable-selector/index.mjs";
+const batchVariableSchema = {
+    type: 'array',
+    extra: {
+        weak: true
+    }
+};
+function BatchVariableSelector(props) {
+    return /*#__PURE__*/ jsx(PrivateScopeProvider, {
+        children: /*#__PURE__*/ jsx(VariableSelector, {
+            ...props,
+            includeSchema: batchVariableSchema
+        })
+    });
+}
+export { BatchVariableSelector };

package/dist/esm/components/blur-input/index.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import input from "@douyinfe/semi-ui/lib/es/input";
+function BlurInput(props) {
+    const [value, setValue] = useState('');
+    useEffect(()=>{
+        setValue(props.value);
+    }, [
+        props.value
+    ]);
+    return /*#__PURE__*/ jsx(input, {
+        ...props,
+        value: value,
+        onChange: (value)=>{
+            setValue(value);
+        },
+        onBlur: (e)=>props.onChange?.(value, e)
+    });
+}
+export { BlurInput };

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

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ActiveLinePlaceholder, EditorProvider, createRenderer } from "@flowgram.ai/coze-editor/react";
+import preset_code from "@flowgram.ai/coze-editor/preset-code";
+import { EditorView } from "@codemirror/view";
+import { getSuffixByLanguageId } from "./utils.mjs";
+import "./theme/index.mjs";
+import "./language-features.mjs";
+const OriginCodeEditor = createRenderer(preset_code, [
+    EditorView.theme({
+        '&.cm-focused': {
+            outline: 'none'
+        }
+    })
+]);
+function CodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly }) {
+    const editorRef = useRef(null);
+    useEffect(()=>{
+        if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        if ("typescript" === languageId) import("./init-worker.mjs").then((module)=>{
+            module.initTsWorker();
+        });
+    }, [
+        languageId
+    ]);
+    return /*#__PURE__*/ jsx(EditorProvider, {
+        children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
+            defaultValue: String(value || ''),
+            options: {
+                uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+                languageId,
+                theme,
+                placeholder,
+                readOnly: readonly,
+                editable: !readonly,
+                ...options || {}
+            },
+            didMount: (editor)=>{
+                editorRef.current = editor;
+            },
+            onChange: (e)=>onChange?.(e.value),
+            children: [
+                activeLinePlaceholder && /*#__PURE__*/ jsx(ActiveLinePlaceholder, {
+                    children: activeLinePlaceholder
+                }),
+                children
+            ]
+        })
+    });
+}
+export { CodeEditor };

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

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