@flowgram.ai/form-materials 0.4.4 → 0.4.5

package/dist/index.d.mts

@@ -814,6 +814,17 @@ declare namespace FlowValueUtils {
     function inferJsonSchema(values: any, scope: Scope): IJsonSchema | undefined;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+interface IPolyfillRoot {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+declare function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot;
+declare function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot): void;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -888,4 +899,4 @@ declare function useObjectList<ValueType>({ value, onChange, sortIndexKey, }: {
     remove: (itemId: string) => void;
 };
 
-export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };
+export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, type IPolyfillRoot, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };

package/dist/index.d.ts

@@ -814,6 +814,17 @@ declare namespace FlowValueUtils {
     function inferJsonSchema(values: any, scope: Scope): IJsonSchema | undefined;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+interface IPolyfillRoot {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+declare function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot;
+declare function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot): void;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -888,4 +899,4 @@ declare function useObjectList<ValueType>({ value, onChange, sortIndexKey, }: {
     remove: (itemId: string) => void;
 };
 
-export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };
+export { AssignRow, AssignRows, type AssignValueType, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, type CodeEditorPropsType, ConditionRow, type ConditionRowValueType, ConstantInput, type Strategy as ConstantInputStrategy, type ConstantRendererProps, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, type FlowValueType, FlowValueUtils, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, type IPolyfillRoot, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, type JsonSchemaTypeRegistry, PromptEditor, type PromptEditorPropsType, PromptEditorWithInputs, PromptEditorWithVariables, TypeSelector, type TypeSelectorProps, VariableSelector, type VariableSelectorProps, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync };

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"
     }
   ]
 });
@@ -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();
@@ -4276,10 +4329,12 @@ function validateFlowValue(value, ctx) {
   listenRefSchemaChange,
   listenRefValueChange,
   parseTypeSelectValue,
+  polyfillCreateRoot,
   provideBatchInputEffect,
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  unstableSetCreateRoot,
   useObjectList,
   useTypeManager,
   useVariableTree,