@flowgram.ai/form-materials 0.4.3 → 0.4.5

package/dist/index.js

@@ -78,10 +78,12 @@ __export(src_exports, {
   listenRefSchemaChange: () => listenRefSchemaChange,
   listenRefValueChange: () => listenRefValueChange,
   parseTypeSelectValue: () => parseTypeSelectValue,
+  polyfillCreateRoot: () => polyfillCreateRoot,
   provideBatchInputEffect: () => provideBatchInputEffect,
   provideBatchOutputsEffect: () => provideBatchOutputsEffect,
   provideJsonSchemaOutputs: () => provideJsonSchemaOutputs,
   syncVariableTitle: () => syncVariableTitle,
+  unstableSetCreateRoot: () => unstableSetCreateRoot,
   useObjectList: () => useObjectList,
   useTypeManager: () => useTypeManager,
   useVariableTree: () => useVariableTree,
@@ -337,6 +339,23 @@ var FlowValueUtils;
   FlowValueUtils2.inferJsonSchema = inferJsonSchema;
 })(FlowValueUtils || (FlowValueUtils = {}));
 
+// src/shared/polyfill-create-root/index.tsx
+var ReactDOM = __toESM(require("react-dom"));
+var unstableCreateRoot = (dom) => ({
+  render(children) {
+    ReactDOM.render(children, dom);
+  },
+  unmount() {
+    ReactDOM.unmountComponentAtNode(dom);
+  }
+});
+function polyfillCreateRoot(dom) {
+  return unstableCreateRoot(dom);
+}
+function unstableSetCreateRoot(createRoot) {
+  unstableCreateRoot = createRoot;
+}
+
 // src/components/variable-selector/use-variable-tree.tsx
 var import_react12 = __toESM(require("react"));
 var import_json_schema5 = require("@flowgram.ai/json-schema");
@@ -449,54 +468,55 @@ var import_preset_code4 = require("@coze-editor/editor/preset-code");
 // src/components/code-editor/theme/light.ts
 var import_preset_code2 = require("@coze-editor/editor/preset-code");
 var colors = {
-  background: "#F7F7FC",
-  // syntax
-  comment: "#000A298A",
-  key: "#00818C",
-  string: "#D1009D",
-  number: "#C74200",
-  boolean: "#2B57D9",
-  null: "#2B57D9",
-  separator: "#0F1529D1"
+  background: "#FFFFFF",
+  comment: "#6B7280",
+  key: "#2563EB",
+  variable: "#DC2626",
+  string: "#059669",
+  number: "#EA580C",
+  boolean: "#7C3AED",
+  null: "#7C3AED",
+  separator: "#374151"
 };
 var lightTheme = (0, import_preset_code2.createTheme)({
   variant: "light",
   settings: {
-    background: "#fff",
-    foreground: "#000",
-    caret: "#000",
-    selection: "#d9d9d9",
-    gutterBackground: "#f0f0f0",
-    gutterForeground: "#666",
+    background: "#FFFFFF",
+    foreground: "#1F2937",
+    caret: "#2563EB",
+    selection: "#E5E7EB",
+    gutterBackground: "#F9FAFB",
+    gutterForeground: "#6B7280",
     gutterBorderColor: "transparent",
     gutterBorderWidth: 0,
-    lineHighlight: "#e1e1e180",
-    bracketColors: ["#FFD700", "#DD99FF", "#78B0FF"],
+    lineHighlight: "#F3F4F680",
+    bracketColors: ["#F59E0B", "#8B5CF6", "#06B6D4"],
     tooltip: {
-      backgroundColor: "#f0f0f0",
-      color: "#000",
-      border: "1px solid #ccc"
+      backgroundColor: "#FFFFFF",
+      color: "#1F2937",
+      border: "1px solid #E5E7EB",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
     },
     link: {
-      color: "#007bff"
+      color: "#2563EB"
     },
     completionItemHover: {
-      backgroundColor: "#f0f0f0"
+      backgroundColor: "#F3F4F6"
     },
     completionItemSelected: {
-      backgroundColor: "#e0e0e0"
+      backgroundColor: "#E5E7EB"
     },
     completionItemIcon: {
-      color: "#333"
+      color: "#4B5563"
     },
     completionItemLabel: {
-      color: "#333"
+      color: "#1F2937"
     },
     completionItemInfo: {
-      color: "#333"
+      color: "#4B5563"
     },
     completionItemDetail: {
-      color: "#666"
+      color: "#6B7280"
     }
   },
   styles: [
@@ -509,6 +529,10 @@ var lightTheme = (0, import_preset_code2.createTheme)({
       tag: [import_preset_code2.tags.propertyName],
       color: colors.key
     },
+    {
+      tag: [import_preset_code2.tags.variableName],
+      color: colors.variable
+    },
     {
       tag: [import_preset_code2.tags.string],
       color: colors.string
@@ -532,27 +556,44 @@ var lightTheme = (0, import_preset_code2.createTheme)({
     // markdown
     {
       tag: [import_preset_code2.tags.heading],
-      color: "#3e76ef"
+      color: "#2563EB"
     },
     {
       tag: [import_preset_code2.tags.processingInstruction],
-      color: "#3e76ef"
+      color: "#2563EB"
+    },
+    // js
+    {
+      tag: [import_preset_code2.tags.definitionKeyword],
+      color: "#9333EA"
+    },
+    {
+      tag: [import_preset_code2.tags.modifier],
+      color: "#9333EA"
+    },
+    {
+      tag: [import_preset_code2.tags.controlKeyword],
+      color: "#9333EA"
+    },
+    {
+      tag: [import_preset_code2.tags.operatorKeyword],
+      color: "#9333EA"
     },
     // shell
     // curl
     {
       tag: [import_preset_code2.tags.standard(import_preset_code2.tags.variableName)],
-      color: "#00804A"
+      color: "#059669"
     },
     // -X
     {
       tag: [import_preset_code2.tags.attributeName],
-      color: "#C74200"
+      color: "#EA580C"
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [import_preset_code2.tags.special(import_preset_code2.tags.string)],
-      color: "#2B57D9"
+      color: "#2563EB"
     }
   ]
 });
@@ -560,54 +601,55 @@ var lightTheme = (0, import_preset_code2.createTheme)({
 // src/components/code-editor/theme/dark.ts
 var import_preset_code3 = require("@coze-editor/editor/preset-code");
 var colors2 = {
-  background: "#151B27",
-  // syntax
-  comment: "#FFFFFF63",
-  key: "#39E5D7",
-  string: "#FF94D2",
-  number: "#FF9933",
-  boolean: "#78B0FF",
-  null: "#78B0FF",
-  separator: "#FFFFFFC9"
+  background: "#0D1117",
+  // syntax - 现代化暗色主题配色
+  comment: "#8B949E",
+  key: "#7DD3FC",
+  variable: "#F472B6",
+  string: "#34D399",
+  number: "#FBBF24",
+  boolean: "#A78BFA",
+  null: "#A78BFA",
+  separator: "#E6EDF3"
 };
 var darkTheme = (0, import_preset_code3.createTheme)({
   variant: "dark",
   settings: {
     background: colors2.background,
-    foreground: "#fff",
-    caret: "#AEAFAD",
-    selection: "#d9d9d942",
+    foreground: "#E6EDF3",
+    caret: "#7DD3FC",
+    selection: "#264F7833",
     gutterBackground: colors2.background,
-    gutterForeground: "#FFFFFF63",
+    gutterForeground: "#6E7681",
     gutterBorderColor: "transparent",
     gutterBorderWidth: 0,
-    lineHighlight: "#272e3d36",
-    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    lineHighlight: "#21262D",
+    bracketColors: ["#FBBF24", "#A78BFA", "#7DD3FC"],
     tooltip: {
-      backgroundColor: "#363D4D",
-      color: "#fff",
-      border: "none"
+      backgroundColor: "#21262D",
+      color: "#E6EDF3",
+      border: "1px solid #30363D"
     },
     link: {
-      color: "#4daafc"
+      color: "#58A6FF"
     },
     completionItemHover: {
-      backgroundColor: "#FFFFFF0F"
+      backgroundColor: "#21262D"
     },
     completionItemSelected: {
-      backgroundColor: "#FFFFFF17"
+      backgroundColor: "#1F6EEB"
     },
     completionItemIcon: {
-      color: "#FFFFFFC9"
+      color: "#8B949E"
     },
     completionItemLabel: {
-      color: "#FFFFFFC9"
+      color: "#E6EDF3"
     },
     completionItemInfo: {
-      color: "#FFFFFFC9"
+      color: "#8B949E"
     },
     completionItemDetail: {
-      color: "#FFFFFF63"
+      color: "#6E7681"
     }
   },
   styles: [
@@ -640,30 +682,47 @@ var darkTheme = (0, import_preset_code3.createTheme)({
       tag: [import_preset_code3.tags.separator],
       color: colors2.separator
     },
+    // js
+    {
+      tag: [import_preset_code3.tags.definitionKeyword],
+      color: "#C084FC"
+    },
+    {
+      tag: [import_preset_code3.tags.modifier],
+      color: "#C084FC"
+    },
+    {
+      tag: [import_preset_code3.tags.controlKeyword],
+      color: "#C084FC"
+    },
+    {
+      tag: [import_preset_code3.tags.operatorKeyword],
+      color: "#C084FC"
+    },
     // markdown
     {
       tag: [import_preset_code3.tags.heading],
-      color: "#6b6bff"
+      color: "#7DD3FC"
     },
     {
       tag: [import_preset_code3.tags.processingInstruction],
-      color: "#6b6bff"
+      color: "#7DD3FC"
     },
     // shell
     // curl
     {
       tag: [import_preset_code3.tags.standard(import_preset_code3.tags.variableName)],
-      color: "#3BEB84"
+      color: "#34D399"
     },
     // -X
     {
       tag: [import_preset_code3.tags.attributeName],
-      color: "#FF9933"
+      color: "#FBBF24"
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [import_preset_code3.tags.special(import_preset_code3.tags.string)],
-      color: "#78B0FF"
+      color: "#7DD3FC"
     }
   ]
 });
@@ -1518,7 +1577,7 @@ function PropertyEdit(props) {
     BlurInput,
     {
       disabled: readonly,
-      placeholder: config?.placeholder ?? "Input Variable Name",
+      placeholder: config?.placeholder ?? import_editor14.I18n.t("Input Variable Name"),
       size: "small",
       value: name,
       onChange: (value2) => onChange("name", value2)
@@ -2500,7 +2559,6 @@ function VariableTree() {
 }
 
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
-var import_react_dom = __toESM(require("react-dom"));
 var import_react39 = __toESM(require("react"));
 var import_lodash5 = require("lodash");
 var import_editor23 = require("@flowgram.ai/editor");
@@ -2560,36 +2618,32 @@ var VariableTagWidget = class extends import_view4.WidgetType {
     this.keyPath = keyPath;
     this.scope = scope;
   }
-  renderReact(jsx) {
-    import_react_dom.default.render(jsx, this.rootDOM);
-  }
   renderVariable(v) {
     if (!v) {
-      this.renderReact(
+      this.root.render(
         /* @__PURE__ */ import_react39.default.createElement(UITag2, { prefixIcon: /* @__PURE__ */ import_react39.default.createElement(import_semi_icons7.IconIssueStroked, null), color: "amber" }, "Unknown")
       );
       return;
     }
-    const rootField = (0, import_lodash5.last)(v.parentFields) || v;
-    const isRoot = v.parentFields.length === 0;
-    const rootTitle = /* @__PURE__ */ import_react39.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
+    const rootField = (0, import_lodash5.last)(v.parentFields);
+    const rootTitle = /* @__PURE__ */ import_react39.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
-    this.renderReact(
+    this.root.render(
       /* @__PURE__ */ import_react39.default.createElement(
         import_semi_ui17.Popover,
         {
           content: /* @__PURE__ */ import_react39.default.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ import_react39.default.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ import_react39.default.createElement(UIVarName2, null, v?.key))
+        /* @__PURE__ */ import_react39.default.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName2, null, v?.key))
       )
     );
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.rootDOM = dom;
+    this.root = polyfillCreateRoot(dom);
     this.toDispose.push(
       import_editor23.Disposable.create(() => {
-        import_react_dom.default.unmountComponentAtNode(this.rootDOM);
+        this.root.unmount();
       })
     );
     this.toDispose.push(
@@ -2866,7 +2920,6 @@ function VariableTree2() {
 
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
 var import_react48 = __toESM(require("react"));
-var import_client = require("react-dom/client");
 var import_lodash7 = require("lodash");
 var import_editor25 = require("@flowgram.ai/editor");
 var import_semi_ui22 = require("@douyinfe/semi-ui");
@@ -2947,7 +3000,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.root = (0, import_client.createRoot)(dom);
+    this.root = polyfillCreateRoot(dom);
     this.toDispose.push(
       import_editor25.Disposable.create(() => {
         this.root.unmount();
@@ -3014,6 +3067,7 @@ function VariableTagInject2() {
 }
 
 // src/components/json-editor-with-variables/index.tsx
+var import_editor26 = require("@flowgram.ai/editor");
 function findAllMatches(inputString, regex) {
   const globalRegex = new RegExp(
     regex,
@@ -3047,7 +3101,7 @@ function JsonEditorWithVariables(props) {
     CodeEditor,
     {
       languageId: "json",
-      activeLinePlaceholder: "Press '@' to Select variable",
+      activeLinePlaceholder: import_editor26.I18n.t("Press '@' to Select variable"),
       ...props,
       options: {
         transformer,
@@ -3061,7 +3115,7 @@ function JsonEditorWithVariables(props) {
 
 // src/components/inputs-values/index.tsx
 var import_react51 = __toESM(require("react"));
-var import_editor26 = require("@flowgram.ai/editor");
+var import_editor27 = require("@flowgram.ai/editor");
 var import_semi_ui23 = require("@douyinfe/semi-ui");
 var import_semi_icons9 = require("@douyinfe/semi-icons");
 
@@ -3102,7 +3156,7 @@ function InputsValues({
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: import_editor26.I18n.t("Input Key")
+      placeholder: import_editor27.I18n.t("Input Key")
     }
   ), /* @__PURE__ */ import_react51.default.createElement(
     InjectDynamicValueInput,
@@ -3139,7 +3193,7 @@ function InputsValues({
         schema: { type: "string" }
       })
     },
-    import_editor26.I18n.t("Add")
+    import_editor27.I18n.t("Add")
   ));
 }
 
@@ -3252,7 +3306,7 @@ function SchemaTree(props) {
 // src/components/display-outputs/index.tsx
 var import_react54 = __toESM(require("react"));
 var import_json_schema9 = require("@flowgram.ai/json-schema");
-var import_editor27 = require("@flowgram.ai/editor");
+var import_editor28 = require("@flowgram.ai/editor");
 
 // src/components/display-schema-tag/index.tsx
 var import_react53 = __toESM(require("react"));
@@ -3305,8 +3359,8 @@ var DisplayOutputsWrapper = import_styled_components13.default.div`
 
 // src/components/display-outputs/index.tsx
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
-  const scope = (0, import_editor27.useCurrentScope)();
-  const refresh = (0, import_editor27.useRefresh)();
+  const scope = (0, import_editor28.useCurrentScope)();
+  const refresh = (0, import_editor28.useRefresh)();
   (0, import_react54.useEffect)(() => {
     if (!displayFromScope) {
       return () => null;
@@ -3341,9 +3395,9 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
 // src/components/display-flow-value/index.tsx
 var import_react55 = __toESM(require("react"));
 var import_json_schema10 = require("@flowgram.ai/json-schema");
-var import_editor28 = require("@flowgram.ai/editor");
+var import_editor29 = require("@flowgram.ai/editor");
 function DisplayFlowValue({ value, title, showIconInTree }) {
-  const available = (0, import_editor28.useScopeAvailable)();
+  const available = (0, import_editor29.useScopeAvailable)();
   const variable = value?.type === "ref" ? available.getByKeyPath(value?.content) : void 0;
   const schema = (0, import_react55.useMemo)(() => {
     if (value?.type === "ref") {
@@ -3371,7 +3425,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 // src/components/display-inputs-values/index.tsx
 var import_react56 = __toESM(require("react"));
 var import_lodash8 = require("lodash");
-var import_editor29 = require("@flowgram.ai/editor");
+var import_editor30 = require("@flowgram.ai/editor");
 
 // src/components/display-inputs-values/styles.ts
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -3407,7 +3461,7 @@ function DisplayInputsValueAllInTag({
   title,
   showIconInTree
 }) {
-  const available = (0, import_editor29.useScopeAvailable)();
+  const available = (0, import_editor30.useScopeAvailable)();
   const schema = (0, import_react56.useMemo)(
     () => FlowValueUtils.inferJsonSchema(value, available.scope),
     [available.version, value]
@@ -3417,7 +3471,7 @@ function DisplayInputsValueAllInTag({
 
 // src/components/assign-rows/index.tsx
 var import_react59 = __toESM(require("react"));
-var import_editor30 = require("@flowgram.ai/editor");
+var import_editor31 = require("@flowgram.ai/editor");
 var import_semi_ui27 = require("@douyinfe/semi-ui");
 var import_semi_icons11 = require("@douyinfe/semi-icons");
 
@@ -3504,7 +3558,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ import_react59.default.createElement(import_editor30.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(import_editor31.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
     AssignRow,
     {
       key: childField.key,
@@ -3538,7 +3592,7 @@ function AssignRows(props) {
 
 // src/components/inputs-values-tree/index.tsx
 var import_react63 = __toESM(require("react"));
-var import_editor32 = require("@flowgram.ai/editor");
+var import_editor33 = require("@flowgram.ai/editor");
 var import_semi_ui29 = require("@douyinfe/semi-ui");
 var import_semi_icons14 = require("@douyinfe/semi-icons");
 
@@ -3648,7 +3702,7 @@ var IconAddChildren2 = () => /* @__PURE__ */ import_react60.default.createElemen
 
 // src/components/inputs-values-tree/row.tsx
 var import_react62 = __toESM(require("react"));
-var import_editor31 = require("@flowgram.ai/editor");
+var import_editor32 = require("@flowgram.ai/editor");
 var import_semi_ui28 = require("@douyinfe/semi-ui");
 var import_semi_icons13 = require("@douyinfe/semi-icons");
 
@@ -3705,7 +3759,7 @@ var AddObjectChildStrategy = {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: import_editor31.I18n.t("Configure via child fields")
+      value: import_editor32.I18n.t("Configure via child fields")
     }
   )
 };
@@ -3746,7 +3800,7 @@ function InputValueRow(props) {
       size: "small",
       value: keyName,
       onChange: (v) => onUpdateKey?.(v),
-      placeholder: import_editor31.I18n.t("Input Key")
+      placeholder: import_editor32.I18n.t("Input Key")
     }
   ), /* @__PURE__ */ import_react62.default.createElement(
     InjectDynamicValueInput,
@@ -3846,34 +3900,34 @@ function InputsValuesTree(props) {
         });
       }
     },
-    import_editor32.I18n.t("Add")
+    import_editor33.I18n.t("Add")
   ));
 }
 
 // src/effects/provide-batch-input/index.ts
-var import_editor33 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor33.createEffectFromVariableProvider)({
+var import_editor34 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor34.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor33.ASTFactory.createVariableDeclaration({
+    import_editor34.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor33.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor34.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor33.ASTFactory.createObject({
+      type: import_editor34.ASTFactory.createObject({
         properties: [
-          import_editor33.ASTFactory.createProperty({
+          import_editor34.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor33.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor33.ASTFactory.createKeyPathExpression({
+            initializer: import_editor34.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor34.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor33.ASTFactory.createProperty({
+          import_editor34.ASTFactory.createProperty({
             key: "index",
-            type: import_editor33.ASTFactory.createNumber()
+            type: import_editor34.ASTFactory.createNumber()
           })
         ]
       })
@@ -3882,13 +3936,13 @@ var provideBatchInputEffect = (0, import_editor33.createEffectFromVariableProvid
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_editor34 = require("@flowgram.ai/editor");
+var import_editor35 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor34.DataEvent.onValueInit,
+    event: import_editor35.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor34.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor35.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -3946,13 +4000,13 @@ function traverseRef(name, value, cb) {
 
 // src/effects/provide-json-schema-outputs/index.ts
 var import_json_schema11 = require("@flowgram.ai/json-schema");
-var import_editor35 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor35.createEffectFromVariableProvider)({
+var import_editor36 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor36.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor35.ASTFactory.createVariableDeclaration({
+    import_editor36.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor35.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor36.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: import_json_schema11.JsonSchemaUtils.schemaToAST(value)
@@ -3961,12 +4015,12 @@ var provideJsonSchemaOutputs = (0, import_editor35.createEffectFromVariableProvi
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor36 = require("@flowgram.ai/editor");
+var import_editor37 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor36.DataEvent.onValueChange,
+    event: import_editor37.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor36.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor37.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             ..._var.meta || {},
@@ -3981,14 +4035,14 @@ var syncVariableTitle = [
 
 // src/effects/validate-when-variable-sync/index.ts
 var import_lodash10 = require("lodash");
-var import_editor37 = require("@flowgram.ai/editor");
+var import_editor38 = require("@flowgram.ai/editor");
 var validateWhenVariableSync = ({
   scope
 } = {}) => [
   {
-    event: import_editor37.DataEvent.onValueInit,
+    event: import_editor38.DataEvent.onValueInit,
     effect: ({ context, form }) => {
-      const nodeScope = scope === "private" ? (0, import_editor37.getNodePrivateScope)(context.node) : (0, import_editor37.getNodeScope)(context.node);
+      const nodeScope = scope === "private" ? (0, import_editor38.getNodePrivateScope)(context.node) : (0, import_editor38.getNodeScope)(context.node);
       const disposable = nodeScope.available.onListOrAnyVarChange(() => {
         if (!(0, import_lodash10.isEmpty)(form.state.errors)) {
           form.validate();
@@ -4000,16 +4054,16 @@ var validateWhenVariableSync = ({
 ];
 
 // src/effects/listen-ref-value-change/index.ts
-var import_editor38 = require("@flowgram.ai/editor");
+var import_editor39 = require("@flowgram.ai/editor");
 var listenRefValueChange = (cb) => [
   {
-    event: import_editor38.DataEvent.onValueInitOrChange,
+    event: import_editor39.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor38.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor39.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (v) => {
           cb({ ...params, variable: v });
@@ -4024,16 +4078,16 @@ var listenRefValueChange = (cb) => [
 
 // src/effects/listen-ref-schema-change/index.ts
 var import_json_schema12 = require("@flowgram.ai/json-schema");
-var import_editor39 = require("@flowgram.ai/editor");
+var import_editor40 = require("@flowgram.ai/editor");
 var listenRefSchemaChange = (cb) => [
   {
-    event: import_editor39.DataEvent.onValueInitOrChange,
+    event: import_editor40.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor39.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor40.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (_type) => {
           cb({ ...params, schema: import_json_schema12.JsonSchemaUtils.astToSchema(_type) });
@@ -4050,21 +4104,21 @@ var listenRefSchemaChange = (cb) => [
 ];
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor40 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor40.createEffectFromVariableProvider)({
+var import_editor41 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor41.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor40.ASTFactory.createVariableDeclaration({
+    import_editor41.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor40.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor41.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor40.ASTFactory.createObject({
+      type: import_editor41.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor40.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor41.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor40.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor40.ASTFactory.createKeyPathExpression({
+            initializer: import_editor41.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor41.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -4074,7 +4128,7 @@ var provideBatchOutputsEffect = (0, import_editor40.createEffectFromVariableProv
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor40.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor41.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -4082,7 +4136,7 @@ var createBatchOutputsFormPlugin = (0, import_editor40.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor40.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor41.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -4092,21 +4146,21 @@ var createBatchOutputsFormPlugin = (0, import_editor40.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor40.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor41.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor40.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor41.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor40.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor40.getNodeScope)(_childBlock))
+            (0, import_editor41.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor41.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -4117,8 +4171,8 @@ var createBatchOutputsFormPlugin = (0, import_editor40.defineFormPluginCreator)(
 
 // src/form-plugins/infer-inputs-plugin/index.ts
 var import_lodash11 = require("lodash");
-var import_editor41 = require("@flowgram.ai/editor");
-var createInferInputsPlugin = (0, import_editor41.defineFormPluginCreator)({
+var import_editor42 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor42.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
       return;
@@ -4129,7 +4183,7 @@ var createInferInputsPlugin = (0, import_editor41.defineFormPluginCreator)({
         targetKey,
         FlowValueUtils.inferJsonSchema(
           (0, import_lodash11.get)(formData, sourceKey),
-          scope === "private" ? (0, import_editor41.getNodePrivateScope)(ctx.node) : (0, import_editor41.getNodeScope)(ctx.node)
+          scope === "private" ? (0, import_editor42.getNodePrivateScope)(ctx.node) : (0, import_editor42.getNodeScope)(ctx.node)
         )
       );
       return formData;
@@ -4140,32 +4194,32 @@ var createInferInputsPlugin = (0, import_editor41.defineFormPluginCreator)({
 // src/form-plugins/infer-assign-plugin/index.ts
 var import_lodash12 = require("lodash");
 var import_json_schema13 = require("@flowgram.ai/json-schema");
-var import_editor42 = require("@flowgram.ai/editor");
-var createInferAssignPlugin = (0, import_editor42.defineFormPluginCreator)({
+var import_editor43 = require("@flowgram.ai/editor");
+var createInferAssignPlugin = (0, import_editor43.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
     if (!assignKey || !outputKey) {
       return;
     }
     mergeEffect({
-      [assignKey]: (0, import_editor42.createEffectFromVariableProvider)({
+      [assignKey]: (0, import_editor43.createEffectFromVariableProvider)({
         parse: (value, ctx) => {
           const declareRows = (0, import_lodash12.uniqBy)(
             value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
             "left"
           );
           return [
-            import_editor42.ASTFactory.createVariableDeclaration({
+            import_editor43.ASTFactory.createVariableDeclaration({
               key: `${ctx.node.id}`,
               meta: {
-                title: (0, import_editor42.getNodeForm)(ctx.node)?.getValueIn("title"),
+                title: (0, import_editor43.getNodeForm)(ctx.node)?.getValueIn("title"),
                 icon: ctx.node.getNodeRegistry().info?.icon
               },
-              type: import_editor42.ASTFactory.createObject({
+              type: import_editor43.ASTFactory.createObject({
                 properties: declareRows.map(
-                  (_v) => import_editor42.ASTFactory.createProperty({
+                  (_v) => import_editor43.ASTFactory.createProperty({
                     key: _v.left,
                     type: _v.right?.type === "constant" ? import_json_schema13.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
-                    initializer: _v.right?.type === "ref" ? import_editor42.ASTFactory.createKeyPathExpression({
+                    initializer: _v.right?.type === "ref" ? import_editor43.ASTFactory.createKeyPathExpression({
                       keyPath: _v.right?.content || []
                     }) : {}
                   })
@@ -4180,7 +4234,7 @@ var createInferAssignPlugin = (0, import_editor42.defineFormPluginCreator)({
       (0, import_lodash12.set)(
         formData,
         outputKey,
-        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor42.getNodeScope)(ctx.node).output.variables?.[0]?.type)
+        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor43.getNodeScope)(ctx.node).output.variables?.[0]?.type)
       );
       return formData;
     });
@@ -4189,7 +4243,7 @@ var createInferAssignPlugin = (0, import_editor42.defineFormPluginCreator)({
 
 // src/validate/validate-flow-value/index.tsx
 var import_lodash13 = require("lodash");
-var import_editor43 = require("@flowgram.ai/editor");
+var import_editor44 = require("@flowgram.ai/editor");
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
   const {
@@ -4198,15 +4252,15 @@ function validateFlowValue(value, ctx) {
   } = errorMessages || {};
   if (required && ((0, import_lodash13.isNil)(value) || (0, import_lodash13.isNil)(value?.content) || value?.content === "")) {
     return {
-      level: import_editor43.FeedbackLevel.Error,
+      level: import_editor44.FeedbackLevel.Error,
       message: requiredMessage
     };
   }
   if (value?.type === "ref") {
-    const variable = (0, import_editor43.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+    const variable = (0, import_editor44.getNodeScope)(node).available.getByKeyPath(value?.content || []);
     if (!variable) {
       return {
-        level: import_editor43.FeedbackLevel.Error,
+        level: import_editor44.FeedbackLevel.Error,
         message: unknownVariableMessage
       };
     }
@@ -4214,10 +4268,10 @@ function validateFlowValue(value, ctx) {
   if (value?.type === "template") {
     const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
     for (const ref of allRefs) {
-      const variable = (0, import_editor43.getNodeScope)(node).available.getByKeyPath(ref);
+      const variable = (0, import_editor44.getNodeScope)(node).available.getByKeyPath(ref);
       if (!variable) {
         return {
-          level: import_editor43.FeedbackLevel.Error,
+          level: import_editor44.FeedbackLevel.Error,
           message: unknownVariableMessage
         };
       }
@@ -4275,10 +4329,12 @@ function validateFlowValue(value, ctx) {
   listenRefSchemaChange,
   listenRefValueChange,
   parseTypeSelectValue,
+  polyfillCreateRoot,
   provideBatchInputEffect,
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  unstableSetCreateRoot,
   useObjectList,
   useTypeManager,
   useVariableTree,