@flowgram.ai/form-materials 0.4.4 → 0.4.5

package/dist/esm/index.js

@@ -245,6 +245,23 @@ var FlowValueUtils;
   FlowValueUtils2.inferJsonSchema = inferJsonSchema;
 })(FlowValueUtils || (FlowValueUtils = {}));
 
+// src/shared/polyfill-create-root/index.tsx
+import * as ReactDOM from "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
 import React11, { useCallback } from "react";
 import { JsonSchemaUtils as JsonSchemaUtils3 } from "@flowgram.ai/json-schema";
@@ -365,54 +382,55 @@ import { themes } from "@coze-editor/editor/preset-code";
 // src/components/code-editor/theme/light.ts
 import { createTheme, tags as t } from "@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 = 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: [
@@ -425,6 +443,10 @@ var lightTheme = createTheme({
       tag: [t.propertyName],
       color: colors.key
     },
+    {
+      tag: [t.variableName],
+      color: colors.variable
+    },
     {
       tag: [t.string],
       color: colors.string
@@ -448,27 +470,44 @@ var lightTheme = createTheme({
     // markdown
     {
       tag: [t.heading],
-      color: "#3e76ef"
+      color: "#2563EB"
     },
     {
       tag: [t.processingInstruction],
-      color: "#3e76ef"
+      color: "#2563EB"
+    },
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: "#9333EA"
+    },
+    {
+      tag: [t.modifier],
+      color: "#9333EA"
+    },
+    {
+      tag: [t.controlKeyword],
+      color: "#9333EA"
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: "#9333EA"
     },
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: "#00804A"
+      color: "#059669"
     },
     // -X
     {
       tag: [t.attributeName],
-      color: "#C74200"
+      color: "#EA580C"
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: "#2B57D9"
+      color: "#2563EB"
     }
   ]
 });
@@ -476,54 +515,55 @@ var lightTheme = createTheme({
 // src/components/code-editor/theme/dark.ts
 import { createTheme as createTheme2, tags as t2 } from "@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 = createTheme2({
   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: [
@@ -556,30 +596,47 @@ var darkTheme = createTheme2({
       tag: [t2.separator],
       color: colors2.separator
     },
+    // js
+    {
+      tag: [t2.definitionKeyword],
+      color: "#C084FC"
+    },
+    {
+      tag: [t2.modifier],
+      color: "#C084FC"
+    },
+    {
+      tag: [t2.controlKeyword],
+      color: "#C084FC"
+    },
+    {
+      tag: [t2.operatorKeyword],
+      color: "#C084FC"
+    },
     // markdown
     {
       tag: [t2.heading],
-      color: "#6b6bff"
+      color: "#7DD3FC"
     },
     {
       tag: [t2.processingInstruction],
-      color: "#6b6bff"
+      color: "#7DD3FC"
     },
     // shell
     // curl
     {
       tag: [t2.standard(t2.variableName)],
-      color: "#3BEB84"
+      color: "#34D399"
     },
     // -X
     {
       tag: [t2.attributeName],
-      color: "#FF9933"
+      color: "#FBBF24"
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t2.special(t2.string)],
-      color: "#78B0FF"
+      color: "#7DD3FC"
     }
   ]
 });
@@ -2438,7 +2495,6 @@ function VariableTree() {
 }
 
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
-import ReactDOM from "react-dom";
 import React26, { useLayoutEffect as useLayoutEffect4 } from "react";
 import { isEqual, last } from "lodash";
 import {
@@ -2508,36 +2564,32 @@ var VariableTagWidget = class extends WidgetType {
     this.keyPath = keyPath;
     this.scope = scope;
   }
-  renderReact(jsx) {
-    ReactDOM.render(jsx, this.rootDOM);
-  }
   renderVariable(v) {
     if (!v) {
-      this.renderReact(
+      this.root.render(
         /* @__PURE__ */ React26.createElement(UITag2, { prefixIcon: /* @__PURE__ */ React26.createElement(IconIssueStroked2, null), color: "amber" }, "Unknown")
       );
       return;
     }
-    const rootField = last(v.parentFields) || v;
-    const isRoot = v.parentFields.length === 0;
-    const rootTitle = /* @__PURE__ */ React26.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
+    const rootField = last(v.parentFields);
+    const rootTitle = /* @__PURE__ */ React26.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
-    this.renderReact(
+    this.root.render(
       /* @__PURE__ */ React26.createElement(
         Popover3,
         {
           content: /* @__PURE__ */ React26.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React26.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ React26.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ React26.createElement(UIVarName2, null, v?.key))
+        /* @__PURE__ */ React26.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React26.createElement(UIVarName2, null, v?.key))
       )
     );
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.rootDOM = dom;
+    this.root = polyfillCreateRoot(dom);
     this.toDispose.push(
       Disposable.create(() => {
-        ReactDOM.unmountComponentAtNode(this.rootDOM);
+        this.root.unmount();
       })
     );
     this.toDispose.push(
@@ -2827,7 +2879,6 @@ function VariableTree2() {
 
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
 import React32, { useLayoutEffect as useLayoutEffect5 } from "react";
-import { createRoot } from "react-dom/client";
 import { isEqual as isEqual2, last as last3 } from "lodash";
 import {
   Disposable as Disposable2,
@@ -2918,7 +2969,7 @@ var VariableTagWidget2 = class extends WidgetType2 {
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.root = createRoot(dom);
+    this.root = polyfillCreateRoot(dom);
     this.toDispose.push(
       Disposable2.create(() => {
         this.root.unmount();
@@ -4285,10 +4336,12 @@ export {
   listenRefSchemaChange,
   listenRefValueChange,
   parseTypeSelectValue,
+  polyfillCreateRoot,
   provideBatchInputEffect,
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  unstableSetCreateRoot,
   useObjectList,
   useTypeManager,
   useVariableTree,