@flowgram.ai/form-materials 0.4.9 → 0.4.10

package/dist/esm/form-plugins/infer-assign-plugin/index.mjs

@@ -0,0 +1,38 @@
+import { set, uniqBy } from "lodash-es";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { ASTFactory, createEffectFromVariableProvider, defineFormPluginCreator, getNodeForm, getNodeScope } from "@flowgram.ai/editor";
+const createInferAssignPlugin = defineFormPluginCreator({
+    onSetupFormMeta ({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
+        if (!assignKey || !outputKey) return;
+        mergeEffect({
+            [assignKey]: createEffectFromVariableProvider({
+                parse: (value, ctx)=>{
+                    const declareRows = uniqBy(value.filter((_v)=>'declare' === _v.operator && _v.left && _v.right), 'left');
+                    return [
+                        ASTFactory.createVariableDeclaration({
+                            key: `${ctx.node.id}`,
+                            meta: {
+                                title: getNodeForm(ctx.node)?.getValueIn('title'),
+                                icon: ctx.node.getNodeRegistry().info?.icon
+                            },
+                            type: ASTFactory.createObject({
+                                properties: declareRows.map((_v)=>ASTFactory.createProperty({
+                                        key: _v.left,
+                                        type: _v.right?.type === 'constant' ? JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
+                                        initializer: _v.right?.type === 'ref' ? ASTFactory.createKeyPathExpression({
+                                            keyPath: _v.right?.content || []
+                                        }) : {}
+                                    }))
+                            })
+                        })
+                    ];
+                }
+            })
+        });
+        addFormatOnSubmit((formData, ctx)=>{
+            set(formData, outputKey, JsonSchemaUtils.astToSchema(getNodeScope(ctx.node).output.variables?.[0]?.type));
+            return formData;
+        });
+    }
+});
+export { createInferAssignPlugin };

package/dist/esm/form-plugins/infer-inputs-plugin/index.mjs

@@ -0,0 +1,13 @@
+import { get, set } from "lodash-es";
+import { defineFormPluginCreator, getNodePrivateScope, getNodeScope } from "@flowgram.ai/editor";
+import { FlowValueUtils } from "../../shared/index.mjs";
+const createInferInputsPlugin = defineFormPluginCreator({
+    onSetupFormMeta ({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+        if (!sourceKey || !targetKey) return;
+        addFormatOnSubmit((formData, ctx)=>{
+            set(formData, targetKey, FlowValueUtils.inferJsonSchema(get(formData, sourceKey), 'private' === scope ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)));
+            return formData;
+        });
+    }
+});
+export { createInferInputsPlugin };

package/dist/esm/hooks/index.mjs

@@ -0,0 +1,2 @@
+import { useObjectList } from "./use-object-list/index.mjs";
+export { useObjectList };

package/dist/esm/hooks/use-object-list/index.mjs

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from "react";
+import { nanoid } from "nanoid";
+import { difference, get, isObject, set } from "lodash-es";
+function genId() {
+    return nanoid();
+}
+function useObjectList({ value, onChange, sortIndexKey }) {
+    const [list, setList] = useState([]);
+    const effectVersion = useRef(0);
+    const changeVersion = useRef(0);
+    const getSortIndex = (value)=>{
+        if ('function' == typeof sortIndexKey) return get(value, sortIndexKey(value)) || 0;
+        return get(value, sortIndexKey || '') || 0;
+    };
+    useEffect(()=>{
+        effectVersion.current = effectVersion.current + 1;
+        if (effectVersion.current === changeVersion.current) return;
+        effectVersion.current = changeVersion.current;
+        setList((_prevList)=>{
+            const newKeys = Object.entries(value || {}).sort((a, b)=>getSortIndex(a[1]) - getSortIndex(b[1])).map(([key])=>key);
+            const oldKeys = _prevList.map((item)=>item.key).filter(Boolean);
+            const addKeys = difference(newKeys, oldKeys);
+            return _prevList.filter((item)=>!item.key || newKeys.includes(item.key)).map((item)=>({
+                    id: item.id,
+                    key: item.key,
+                    value: item.key ? value?.[item.key] : item.value
+                })).concat(addKeys.map((_key)=>({
+                    id: genId(),
+                    key: _key,
+                    value: value?.[_key]
+                })));
+        });
+    }, [
+        value
+    ]);
+    const add = (defaultValue)=>{
+        setList((prevList)=>[
+                ...prevList,
+                {
+                    id: genId(),
+                    value: defaultValue
+                }
+            ]);
+    };
+    const updateValue = (itemId, value)=>{
+        changeVersion.current = changeVersion.current + 1;
+        setList((prevList)=>{
+            const nextList = prevList.map((_item)=>{
+                if (_item.id === itemId) return {
+                    ..._item,
+                    value
+                };
+                return _item;
+            });
+            onChange(Object.fromEntries(nextList.filter((item)=>item.key).map((item)=>[
+                    item.key,
+                    item.value
+                ]).map((_res, idx)=>{
+                const indexKey = 'function' == typeof sortIndexKey ? sortIndexKey(_res[1]) : sortIndexKey;
+                if (isObject(_res[1]) && indexKey) set(_res[1], indexKey, idx);
+                return _res;
+            })));
+            return nextList;
+        });
+    };
+    const updateKey = (itemId, key)=>{
+        changeVersion.current = changeVersion.current + 1;
+        setList((prevList)=>{
+            const nextList = prevList.map((_item)=>{
+                if (_item.id === itemId) return {
+                    ..._item,
+                    key
+                };
+                return _item;
+            });
+            onChange(Object.fromEntries(nextList.filter((item)=>item.key).map((item)=>[
+                    item.key,
+                    item.value
+                ])));
+            return nextList;
+        });
+    };
+    const remove = (itemId)=>{
+        changeVersion.current = changeVersion.current + 1;
+        setList((prevList)=>{
+            const nextList = prevList.filter((_item)=>_item.id !== itemId);
+            onChange(Object.fromEntries(nextList.filter((item)=>item.key).map((item)=>[
+                    item.key,
+                    item.value
+                ])));
+            return nextList;
+        });
+    };
+    return {
+        list,
+        add,
+        updateKey,
+        updateValue,
+        remove
+    };
+}
+export { useObjectList };

package/dist/esm/index.mjs

@@ -0,0 +1,8 @@
+import { AssignRow, AssignRows, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, useVariableTree } from "./components/index.mjs";
+import { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provideBatchInputEffect, provideJsonSchemaOutputs, syncVariableTitle, validateWhenVariableSync } from "./effects/index.mjs";
+import { createBatchOutputsFormPlugin, createInferAssignPlugin, createInferInputsPlugin, provideBatchOutputsEffect } from "./form-plugins/index.mjs";
+import { useObjectList } from "./hooks/index.mjs";
+import { JsonSchemaTypePresetProvider, JsonSchemaUtils, createDisableDeclarationPlugin, createTypePresetPlugin, useTypeManager } from "./plugins/index.mjs";
+import { FlowValueUtils, createInjectMaterial, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, polyfillCreateRoot, unstableSetCreateRoot, withSuspense } from "./shared/index.mjs";
+import { validateFlowValue } from "./validate/index.mjs";
+export { AssignRow, AssignRows, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, FlowValueUtils, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, JsonSchemaUtils, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, VariableSelector, VariableSelectorProvider, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync, withSuspense };

package/dist/esm/plugins/disable-declaration-plugin/create-disable-declaration-plugin.mjs

@@ -0,0 +1,17 @@
+import { ASTMatch, VariableEngine, definePluginCreator } from "@flowgram.ai/editor";
+const createDisableDeclarationPlugin = definePluginCreator({
+    onInit (ctx) {
+        const variableEngine = ctx.get(VariableEngine);
+        const handleEvent = (action)=>{
+            if (ASTMatch.isVariableDeclaration(action.ast)) {
+                if (!action.ast.meta?.disabled) action.ast.updateMeta({
+                    ...action.ast.meta || {},
+                    disabled: true
+                });
+            }
+        };
+        variableEngine.onGlobalEvent('NewAST', handleEvent);
+        variableEngine.onGlobalEvent('UpdateAST', handleEvent);
+    }
+});
+export { createDisableDeclarationPlugin };

package/dist/esm/plugins/disable-declaration-plugin/index.mjs

@@ -0,0 +1,2 @@
+import { createDisableDeclarationPlugin } from "./create-disable-declaration-plugin.mjs";
+export { createDisableDeclarationPlugin };

package/dist/esm/plugins/index.mjs

@@ -0,0 +1,3 @@
+import { createDisableDeclarationPlugin } from "./disable-declaration-plugin/index.mjs";
+import { JsonSchemaTypePresetProvider, JsonSchemaUtils, createTypePresetPlugin, useTypeManager } from "./json-schema-preset/index.mjs";
+export { JsonSchemaTypePresetProvider, JsonSchemaUtils, createDisableDeclarationPlugin, createTypePresetPlugin, useTypeManager };

package/dist/esm/plugins/json-schema-preset/create-type-preset-plugin.mjs

@@ -0,0 +1,15 @@
+import { BaseTypeManager, jsonSchemaContainerModule } from "@flowgram.ai/json-schema";
+import { definePluginCreator } from "@flowgram.ai/editor";
+import { jsonSchemaTypePreset } from "./type-definition/index.mjs";
+const createTypePresetPlugin = definePluginCreator({
+    onInit (ctx, opts) {
+        const typeManager = ctx.get(BaseTypeManager);
+        jsonSchemaTypePreset.forEach((_type)=>typeManager.register(_type));
+        opts.types?.forEach((_type)=>typeManager.register(_type));
+        opts.unregisterTypes?.forEach((_type)=>typeManager.unregister(_type));
+    },
+    containerModules: [
+        jsonSchemaContainerModule
+    ]
+});
+export { createTypePresetPlugin };

package/dist/esm/plugins/json-schema-preset/index.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { JsonSchemaUtils, TypePresetProvider, useTypeManager } from "@flowgram.ai/json-schema";
+import { jsonSchemaTypePreset } from "./type-definition/index.mjs";
+import { createTypePresetPlugin } from "./create-type-preset-plugin.mjs";
+const json_schema_preset_useTypeManager = ()=>useTypeManager();
+const JsonSchemaTypePresetProvider = ({ types = [], children })=>/*#__PURE__*/ jsx(TypePresetProvider, {
+        types: [
+            ...jsonSchemaTypePreset,
+            ...types
+        ],
+        children: children
+    });
+export { JsonSchemaTypePresetProvider, JsonSchemaUtils, createTypePresetPlugin, json_schema_preset_useTypeManager as useTypeManager };

package/dist/esm/plugins/json-schema-preset/type-definition/array.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { CodeEditorMini } from "../../../components/code-editor-mini/index.mjs";
+const arrayRegistry = {
+    type: 'array',
+    ConstantRenderer: (props)=>/*#__PURE__*/ jsx(CodeEditorMini, {
+            value: props.value,
+            languageId: "json",
+            onChange: (v)=>props.onChange?.(v),
+            placeholder: I18n.t('Please Input Array'),
+            readonly: props.readonly
+        })
+};
+export { arrayRegistry };

package/dist/esm/plugins/json-schema-preset/type-definition/boolean.mjs

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Select } from "@douyinfe/semi-ui";
+const booleanRegistry = {
+    type: 'boolean',
+    ConstantRenderer: (props)=>{
+        const { value, onChange, ...rest } = props;
+        return /*#__PURE__*/ jsx(Select, {
+            placeholder: I18n.t('Please Select Boolean'),
+            size: "small",
+            disabled: props.readonly,
+            optionList: [
+                {
+                    label: I18n.t('True'),
+                    value: 1
+                },
+                {
+                    label: I18n.t('False'),
+                    value: 0
+                }
+            ],
+            value: value ? 1 : 0,
+            onChange: (value)=>onChange?.(!!value),
+            ...rest
+        });
+    }
+};
+export { booleanRegistry };

package/dist/esm/plugins/json-schema-preset/type-definition/date-time.mjs

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { DatePicker } from "@douyinfe/semi-ui";
+const dateTimeRegistry = {
+    type: 'date-time',
+    ConstantRenderer: (props)=>/*#__PURE__*/ jsx(DatePicker, {
+            size: "small",
+            type: "dateTime",
+            density: "compact",
+            style: {
+                width: '100%',
+                ...props.style || {}
+            },
+            disabled: props.readonly,
+            ...props
+        })
+};
+export { dateTimeRegistry };

package/dist/esm/plugins/json-schema-preset/type-definition/index.mjs

@@ -0,0 +1,19 @@
+import { jsonSchemaTypeManager } from "@flowgram.ai/json-schema";
+import { stringRegistry } from "./string.mjs";
+import { objectRegistry } from "./object.mjs";
+import { numberRegistry } from "./number.mjs";
+import { integerRegistry } from "./integer.mjs";
+import { dateTimeRegistry } from "./date-time.mjs";
+import { booleanRegistry } from "./boolean.mjs";
+import { arrayRegistry } from "./array.mjs";
+const jsonSchemaTypePreset = [
+    stringRegistry,
+    objectRegistry,
+    numberRegistry,
+    integerRegistry,
+    booleanRegistry,
+    arrayRegistry,
+    dateTimeRegistry
+];
+jsonSchemaTypePreset.forEach((_type)=>jsonSchemaTypeManager.register(_type));
+export { jsonSchemaTypePreset };

package/dist/esm/plugins/json-schema-preset/type-definition/integer.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { InputNumber } from "@douyinfe/semi-ui";
+const integerRegistry = {
+    type: 'integer',
+    ConstantRenderer: (props)=>/*#__PURE__*/ jsx(InputNumber, {
+            placeholder: I18n.t('Please Input Integer'),
+            size: "small",
+            disabled: props.readonly,
+            precision: 0,
+            ...props
+        })
+};
+export { integerRegistry };

package/dist/esm/plugins/json-schema-preset/type-definition/number.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { InputNumber } from "@douyinfe/semi-ui";
+const numberRegistry = {
+    type: 'number',
+    ConstantRenderer: (props)=>/*#__PURE__*/ jsx(InputNumber, {
+            placeholder: I18n.t('Please Input Number'),
+            size: "small",
+            disabled: props.readonly,
+            hideButtons: true,
+            ...props
+        })
+};
+export { numberRegistry };

package/dist/esm/plugins/json-schema-preset/type-definition/object.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { CodeEditorMini } from "../../../components/code-editor-mini/index.mjs";
+const objectRegistry = {
+    type: 'object',
+    ConstantRenderer: (props)=>/*#__PURE__*/ jsx(CodeEditorMini, {
+            value: props.value,
+            onChange: (v)=>props.onChange?.(v),
+            languageId: "json",
+            placeholder: I18n.t('Please Input Object'),
+            readonly: props.readonly
+        })
+};
+export { objectRegistry };

package/dist/esm/plugins/json-schema-preset/type-definition/string.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Input, TextArea } from "@douyinfe/semi-ui";
+const stringRegistry = {
+    type: 'string',
+    ConstantRenderer: (props)=>props?.enableMultiLineStr ? /*#__PURE__*/ jsx(TextArea, {
+            autosize: true,
+            rows: 1,
+            placeholder: I18n.t('Please Input String'),
+            disabled: props.readonly,
+            ...props
+        }) : /*#__PURE__*/ jsx(Input, {
+            size: "small",
+            placeholder: I18n.t('Please Input String'),
+            disabled: props.readonly,
+            ...props
+        })
+};
+export { stringRegistry };

package/dist/esm/shared/flow-value/index.mjs

@@ -0,0 +1,2 @@
+import { FlowValueUtils } from "./utils.mjs";
+export { FlowValueUtils };

package/dist/esm/shared/flow-value/schema.mjs

@@ -0,0 +1,26 @@
+import zod from "zod";
+const extraSchema = zod.object({
+    index: zod.number().optional()
+}).optional();
+const constantSchema = zod.object({
+    type: zod.literal('constant'),
+    content: zod.any().optional(),
+    schema: zod.any().optional(),
+    extra: extraSchema
+});
+const refSchema = zod.object({
+    type: zod.literal('ref'),
+    content: zod.array(zod.string()).optional(),
+    extra: extraSchema
+});
+const expressionSchema = zod.object({
+    type: zod.literal('expression'),
+    content: zod.string().optional(),
+    extra: extraSchema
+});
+const templateSchema = zod.object({
+    type: zod.literal('template'),
+    content: zod.string().optional(),
+    extra: extraSchema
+});
+export { constantSchema, expressionSchema, extraSchema, refSchema, templateSchema };

package/dist/esm/shared/flow-value/utils.mjs

@@ -0,0 +1,108 @@
+import { isArray, isObject, isPlainObject, uniq } from "lodash-es";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { constantSchema, expressionSchema, refSchema, templateSchema } from "./schema.mjs";
+(function(FlowValueUtils) {
+    function isConstant(value) {
+        return constantSchema.safeParse(value).success;
+    }
+    FlowValueUtils.isConstant = isConstant;
+    function isRef(value) {
+        return refSchema.safeParse(value).success;
+    }
+    FlowValueUtils.isRef = isRef;
+    function isExpression(value) {
+        return expressionSchema.safeParse(value).success;
+    }
+    FlowValueUtils.isExpression = isExpression;
+    function isTemplate(value) {
+        return templateSchema.safeParse(value).success;
+    }
+    FlowValueUtils.isTemplate = isTemplate;
+    function isConstantOrRef(value) {
+        return isConstant(value) || isRef(value);
+    }
+    FlowValueUtils.isConstantOrRef = isConstantOrRef;
+    function isFlowValue(value) {
+        return isConstant(value) || isRef(value) || isExpression(value) || isTemplate(value);
+    }
+    FlowValueUtils.isFlowValue = isFlowValue;
+    function* traverse(value, options) {
+        const { includeTypes = [
+            'ref',
+            'template'
+        ], path = '' } = options;
+        if (isPlainObject(value)) {
+            if (isRef(value) && includeTypes.includes('ref')) return void (yield {
+                value,
+                path
+            });
+            if (isTemplate(value) && includeTypes.includes('template')) return void (yield {
+                value,
+                path
+            });
+            if (isExpression(value) && includeTypes.includes('expression')) return void (yield {
+                value,
+                path
+            });
+            if (isConstant(value) && includeTypes.includes('constant')) return void (yield {
+                value,
+                path
+            });
+            for (const [_key, _value] of Object.entries(value))yield* traverse(_value, {
+                ...options,
+                path: `${path}.${_key}`
+            });
+            return;
+        }
+        if (isArray(value)) for (const [_idx, _value] of value.entries())yield* traverse(_value, {
+            ...options,
+            path: `${path}[${_idx}]`
+        });
+    }
+    FlowValueUtils.traverse = traverse;
+    function getTemplateKeyPaths(value) {
+        const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
+        return uniq(value.content?.match(keyPathReg) || []).map((_keyPath)=>_keyPath.slice(2, -2).split('.'));
+    }
+    FlowValueUtils.getTemplateKeyPaths = getTemplateKeyPaths;
+    function inferConstantJsonSchema(value) {
+        if (value?.schema) return value.schema;
+        if ('string' == typeof value.content) return {
+            type: 'string'
+        };
+        if ('number' == typeof value.content) return {
+            type: 'number'
+        };
+        if ('boolean' == typeof value.content) return {
+            type: 'boolean'
+        };
+        if (isObject(value.content)) return {
+            type: 'object'
+        };
+    }
+    FlowValueUtils.inferConstantJsonSchema = inferConstantJsonSchema;
+    function inferJsonSchema(values, scope) {
+        if (isPlainObject(values)) {
+            if (isConstant(values)) return inferConstantJsonSchema(values);
+            if (isRef(values)) {
+                const variable = scope.available.getByKeyPath(values?.content);
+                const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : void 0;
+                return schema;
+            }
+            if (isTemplate(values)) return {
+                type: 'string'
+            };
+            return {
+                type: 'object',
+                properties: Object.keys(values).reduce((acc, key)=>{
+                    const schema = inferJsonSchema(values[key], scope);
+                    if (schema) acc[key] = schema;
+                    return acc;
+                }, {})
+            };
+        }
+    }
+    FlowValueUtils.inferJsonSchema = inferJsonSchema;
+})(utils_FlowValueUtils || (utils_FlowValueUtils = {}));
+var utils_FlowValueUtils;
+export { utils_FlowValueUtils as FlowValueUtils };

package/dist/esm/shared/format-legacy-refs/index.mjs

@@ -0,0 +1,50 @@
+import { isObject } from "lodash-es";
+function formatLegacyRefOnSubmit(value) {
+    if (isObject(value)) {
+        if (isLegacyFlowRefValueSchema(value)) return formatLegacyRefToNewRef(value);
+        return Object.fromEntries(Object.entries(value).map(([key, value])=>[
+                key,
+                formatLegacyRefOnSubmit(value)
+            ]));
+    }
+    if (Array.isArray(value)) return value.map(formatLegacyRefOnSubmit);
+    return value;
+}
+function formatLegacyRefOnInit(value) {
+    if (isObject(value)) {
+        if (isNewFlowRefValueSchema(value)) return formatNewRefToLegacyRef(value);
+        return Object.fromEntries(Object.entries(value).map(([key, value])=>[
+                key,
+                formatLegacyRefOnInit(value)
+            ]));
+    }
+    if (Array.isArray(value)) return value.map(formatLegacyRefOnInit);
+    return value;
+}
+function isLegacyFlowRefValueSchema(value) {
+    return isObject(value) && 2 === Object.keys(value).length && 'ref' === value.type && 'string' == typeof value.content;
+}
+function isNewFlowRefValueSchema(value) {
+    return isObject(value) && 2 === Object.keys(value).length && 'ref' === value.type && Array.isArray(value.content);
+}
+function formatLegacyRefToNewRef(value) {
+    const keyPath = value.content.split('.');
+    if ('outputs' === keyPath[1]) return {
+        type: 'ref',
+        content: [
+            `${keyPath[0]}.${keyPath[1]}`,
+            ...keyPath.length > 2 ? keyPath.slice(2) : []
+        ]
+    };
+    return {
+        type: 'ref',
+        content: keyPath
+    };
+}
+function formatNewRefToLegacyRef(value) {
+    return {
+        type: 'ref',
+        content: value.content.join('.')
+    };
+}
+export { formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema };

package/dist/esm/shared/index.mjs

@@ -0,0 +1,6 @@
+import { FlowValueUtils } from "./flow-value/index.mjs";
+import { formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema } from "./format-legacy-refs/index.mjs";
+import { createInjectMaterial } from "./inject-material/index.mjs";
+import { lazySuspense, withSuspense } from "./lazy-suspense/index.mjs";
+import { polyfillCreateRoot, unstableSetCreateRoot } from "./polyfill-create-root/index.mjs";
+export { FlowValueUtils, createInjectMaterial, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, polyfillCreateRoot, unstableSetCreateRoot, withSuspense };

package/dist/esm/shared/inject-material/index.mjs

@@ -0,0 +1,21 @@
+import react from "react";
+import { FlowRendererComponentType, FlowRendererRegistry, usePlaygroundContainer } from "@flowgram.ai/editor";
+function createInjectMaterial(Component, params) {
+    const InjectComponent = (props)=>{
+        const container = usePlaygroundContainer();
+        if (!container?.isBound(FlowRendererRegistry)) return /*#__PURE__*/ react.createElement(Component, {
+            ...props
+        });
+        const rendererRegistry = container.get(FlowRendererRegistry);
+        const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
+        const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
+        if (renderer?.type !== FlowRendererComponentType.REACT) return /*#__PURE__*/ react.createElement(Component, {
+            ...props
+        });
+        return /*#__PURE__*/ react.createElement(renderer.renderer, {
+            ...props
+        });
+    };
+    return InjectComponent;
+}
+export { createInjectMaterial };

package/dist/esm/shared/lazy-suspense/index.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import { Skeleton } from "@douyinfe/semi-ui";
+function withSuspense(Component, fallback) {
+    const WithSuspenseComponent = (props)=>/*#__PURE__*/ jsx(Suspense, {
+            fallback: fallback || /*#__PURE__*/ jsx(Skeleton.Paragraph, {
+                style: {
+                    width: '100%'
+                },
+                rows: 1
+            }),
+            children: /*#__PURE__*/ jsx(Component, {
+                ...props
+            })
+        });
+    return WithSuspenseComponent;
+}
+function lazySuspense(params, fallback) {
+    return withSuspense(/*#__PURE__*/ lazy(params), fallback);
+}
+export { lazySuspense, withSuspense };

package/dist/esm/shared/polyfill-create-root/index.mjs

@@ -0,0 +1,16 @@
+import { render, unmountComponentAtNode } from "react-dom";
+let unstableCreateRoot = (dom)=>({
+        render (children) {
+            render(children, dom);
+        },
+        unmount () {
+            unmountComponentAtNode(dom);
+        }
+    });
+function polyfillCreateRoot(dom) {
+    return unstableCreateRoot(dom);
+}
+function unstableSetCreateRoot(createRoot) {
+    unstableCreateRoot = createRoot;
+}
+export { polyfillCreateRoot, unstableSetCreateRoot };