@flowgram.ai/form-materials 0.4.3 → 0.4.5

package/bin/index.ts

@@ -72,17 +72,6 @@ program
     let { packagesToInstall } = copyMaterial(material, projectInfo);
 
     // 4. Install the dependencies
-    packagesToInstall = packagesToInstall.map((_pkg) => {
-      if (
-        _pkg.startsWith(`@flowgram.ai/`) &&
-        projectInfo.flowgramVersion !== 'workspace:*' &&
-        !_pkg.endsWith(`@${projectInfo.flowgramVersion}`)
-      ) {
-        return `${_pkg}@${projectInfo.flowgramVersion}`;
-      }
-      return _pkg;
-    });
-
     console.log(chalk.bold('These npm dependencies will be added to your project'));
     console.log(packagesToInstall);
     installDependencies(packagesToInstall, projectInfo);

package/bin/materials.ts

@@ -61,12 +61,21 @@ export function listAllMaterials(): Material[] {
   return _materials;
 }
 
+export const getFormMaterialDependencies = (): Record<string, string> => {
+  const packageJsonPath: string = path.join(__dirname, '..', 'package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+  return packageJson.dependencies;
+};
+
 export const copyMaterial = (
   material: Material,
   projectInfo: ProjectInfo
 ): {
   packagesToInstall: string[];
 } => {
+  const formMaterialDependencies = getFormMaterialDependencies();
+
   const sourceDir: string = material.path;
   const materialRoot: string = path.join(
     projectInfo.projectPath,
@@ -92,10 +101,28 @@ export const copyMaterial = (
               { ...importDeclaration, source: '@flowgram.ai/form-materials' },
             ])
           );
+          if (projectInfo.flowgramVersion !== 'workspace:*') {
+            packagesToInstall.add(`@flowgram.ai/form-materials@${projectInfo.flowgramVersion}`);
+            continue;
+          }
           packagesToInstall.add('@flowgram.ai/form-materials');
         } else if (!source.startsWith('.') && !source.startsWith('react')) {
-          // check if is third party npm packages
-          packagesToInstall.add(source);
+          // check if is in form material dependencies
+          const [dep, version] =
+            Object.entries(formMaterialDependencies).find(([_key]) => source.startsWith(_key)) ||
+            [];
+          if (!dep) {
+            continue;
+          }
+          if (version === 'workspace:*') {
+            if (projectInfo.flowgramVersion !== 'workspace:*') {
+              packagesToInstall.add(`${dep}@${projectInfo.flowgramVersion}`);
+            } else {
+              packagesToInstall.add(dep);
+            }
+          } else {
+            packagesToInstall.add(`${dep}@${version}`);
+          }
         }
       }
     }

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"
     }
   ]
 });
@@ -1448,7 +1505,7 @@ function PropertyEdit(props) {
     BlurInput,
     {
       disabled: readonly,
-      placeholder: config?.placeholder ?? "Input Variable Name",
+      placeholder: config?.placeholder ?? I18n9.t("Input Variable Name"),
       size: "small",
       value: name,
       onChange: (value2) => onChange("name", value2)
@@ -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();
@@ -2985,6 +3036,7 @@ function VariableTagInject2() {
 }
 
 // src/components/json-editor-with-variables/index.tsx
+import { I18n as I18n13 } from "@flowgram.ai/editor";
 function findAllMatches(inputString, regex) {
   const globalRegex = new RegExp(
     regex,
@@ -3018,7 +3070,7 @@ function JsonEditorWithVariables(props) {
     CodeEditor,
     {
       languageId: "json",
-      activeLinePlaceholder: "Press '@' to Select variable",
+      activeLinePlaceholder: I18n13.t("Press '@' to Select variable"),
       ...props,
       options: {
         transformer,
@@ -3032,7 +3084,7 @@ function JsonEditorWithVariables(props) {
 
 // src/components/inputs-values/index.tsx
 import React34 from "react";
-import { I18n as I18n13 } from "@flowgram.ai/editor";
+import { I18n as I18n14 } from "@flowgram.ai/editor";
 import { Button as Button4, IconButton as IconButton4 } from "@douyinfe/semi-ui";
 import { IconDelete as IconDelete2, IconPlus as IconPlus3 } from "@douyinfe/semi-icons";
 
@@ -3073,7 +3125,7 @@ function InputsValues({
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: I18n13.t("Input Key")
+      placeholder: I18n14.t("Input Key")
     }
   ), /* @__PURE__ */ React34.createElement(
     InjectDynamicValueInput,
@@ -3110,7 +3162,7 @@ function InputsValues({
         schema: { type: "string" }
       })
     },
-    I18n13.t("Add")
+    I18n14.t("Add")
   ));
 }
 
@@ -3509,7 +3561,7 @@ function AssignRows(props) {
 
 // src/components/inputs-values-tree/index.tsx
 import React45 from "react";
-import { I18n as I18n15 } from "@flowgram.ai/editor";
+import { I18n as I18n16 } from "@flowgram.ai/editor";
 import { Button as Button6 } from "@douyinfe/semi-ui";
 import { IconPlus as IconPlus5 } from "@douyinfe/semi-icons";
 
@@ -3619,7 +3671,7 @@ var IconAddChildren2 = () => /* @__PURE__ */ React43.createElement(Icon4, { size
 
 // src/components/inputs-values-tree/row.tsx
 import React44, { useMemo as useMemo13, useState as useState10 } from "react";
-import { I18n as I18n14 } from "@flowgram.ai/editor";
+import { I18n as I18n15 } from "@flowgram.ai/editor";
 import { IconButton as IconButton6, Input as Input7 } from "@douyinfe/semi-ui";
 import { IconChevronDown as IconChevronDown2, IconChevronRight as IconChevronRight2, IconDelete as IconDelete3 } from "@douyinfe/semi-icons";
 
@@ -3676,7 +3728,7 @@ var AddObjectChildStrategy = {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: I18n14.t("Configure via child fields")
+      value: I18n15.t("Configure via child fields")
     }
   )
 };
@@ -3717,7 +3769,7 @@ function InputValueRow(props) {
       size: "small",
       value: keyName,
       onChange: (v) => onUpdateKey?.(v),
-      placeholder: I18n14.t("Input Key")
+      placeholder: I18n15.t("Input Key")
     }
   ), /* @__PURE__ */ React44.createElement(
     InjectDynamicValueInput,
@@ -3817,7 +3869,7 @@ function InputsValuesTree(props) {
         });
       }
     },
-    I18n15.t("Add")
+    I18n16.t("Add")
   ));
 }
 
@@ -4284,10 +4336,12 @@ export {
   listenRefSchemaChange,
   listenRefValueChange,
   parseTypeSelectValue,
+  polyfillCreateRoot,
   provideBatchInputEffect,
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  unstableSetCreateRoot,
   useObjectList,
   useTypeManager,
   useVariableTree,