@flowgram.ai/form-materials 0.5.4 → 0.5.6

package/{src/components/variable-selector/styles.tsx → dist/esm/components/variable-selector/styles.css}

@@ -1,54 +1,45 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import styled, { css } from 'styled-components';
-import { Tag, TreeSelect } from '@douyinfe/semi-ui';
-
-export const UIRootTitle = styled.div`
-  margin-right: 4px;
-  min-width: 20px;
-  overflow: hidden;
+.gedit-m-variable-selector-root-title {
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 20px;
   color: var(--semi-color-text-2);
-`;
-
-export const UIVarName = styled.div<{ $inSelector?: boolean }>`
+  margin-right: 4px;
   overflow: hidden;
+}
+
+.gedit-m-variable-selector-var-name {
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 
-  ${({ $inSelector }) =>
-    $inSelector &&
-    css`
-      min-width: 50%;
-    `}
-`;
+  &.in-selector {
+    min-width: 50%;
+  }
+}
 
-export const UITag = styled(Tag)`
+.gedit-m-variable-selector-tag {
+  justify-content: flex-start;
+  align-items: center;
   width: 100%;
+  height: 22px;
+  margin: 0;
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
 
   & .semi-tag-content-center {
     justify-content: flex-start;
   }
+}
 
-  &.semi-tag {
-    margin: 0;
-    height: 22px;
-  }
-`;
+.gedit-m-variable-selector-tree-select {
+  outline: none;
 
-export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
-  outline: ${({ $error }) => ($error ? '1px solid red' : 'none')};
+  &.error {
+    outline: 1px solid red;
+  }
 
   & .semi-tree-select-selection {
-    padding: 0px;
     height: 22px;
+    padding: 0;
   }
 
   & .semi-tree-select-selection-content {
@@ -58,12 +49,18 @@ export const UITreeSelect = styled(TreeSelect)<{ $error?: boolean }>`
   & .semi-tree-select-selection-placeholder {
     padding-left: 10px;
   }
-`;
+}
 
-export const UIPopoverContent = styled.div`
+.gedit-m-variable-selector-tag-pop {
+  white-space: nowrap;
+  justify-content: flex-start;
+  align-items: center;
   padding: 10px;
   display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  white-space: nowrap;
-`;
+}
+
+.gedit-m-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}
+

package/dist/esm/components/variable-selector/use-variable-tree.mjs

@@ -3,8 +3,10 @@ import { useCallback } from "react";
 import { JsonSchemaUtils, useTypeManager } from "@flowgram.ai/json-schema";
 import { ASTMatch, useAvailableVariables } from "@flowgram.ai/editor";
 import { Icon } from "@douyinfe/semi-ui";
+import { useVariableSelectorContext } from "./context.mjs";
 function useVariableTree(params) {
-    const { includeSchema, excludeSchema, skipVariable } = params;
+    const context = useVariableSelectorContext();
+    const { includeSchema = context.includeSchema, excludeSchema = context.excludeSchema, skipVariable = context.skipVariable } = params;
     const typeManager = useTypeManager();
     const variables = useAvailableVariables();
     const getVariableTypeIcon = useCallback((variable)=>{

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/components/index.ts","../src/components/assign-row/index.tsx","../src/components/assign-row/types.ts","../src/components/assign-rows/index.tsx","../src/components/batch-outputs/index.tsx","../src/components/batch-outputs/styles.tsx","../src/components/batch-outputs/types.ts","../src/components/batch-variable-selector/index.tsx","../src/components/blur-input/index.tsx","../src/components/code-editor/editor-all.tsx","../src/components/code-editor/editor-json.tsx","../src/components/code-editor/editor-python.tsx","../src/components/code-editor/editor-shell.tsx","../src/components/code-editor/editor-sql.tsx","../src/components/code-editor/editor-ts.tsx","../src/components/code-editor/editor.tsx","../src/components/code-editor/factory.tsx","../src/components/code-editor/index.tsx","../src/components/code-editor/utils.ts","../src/components/code-editor/theme/dark.ts","../src/components/code-editor/theme/index.ts","../src/components/code-editor/theme/light.ts","../src/components/code-editor-mini/index.tsx","../src/components/condition-context/context.tsx","../src/components/condition-context/index.tsx","../src/components/condition-context/op.ts","../src/components/condition-context/types.ts","../src/components/condition-context/hooks/use-condition.tsx","../src/components/condition-row/index.tsx","../src/components/condition-row/styles.tsx","../src/components/condition-row/types.ts","../src/components/constant-input/index.tsx","../src/components/constant-input/types.ts","../src/components/coze-editor-extensions/index.tsx","../src/components/coze-editor-extensions/styles.tsx","../src/components/coze-editor-extensions/extensions/inputs-tree.tsx","../src/components/coze-editor-extensions/extensions/variable-tag.tsx","../src/components/coze-editor-extensions/extensions/variable-tree.tsx","../src/components/db-condition-row/index.tsx","../src/components/db-condition-row/styles.tsx","../src/components/db-condition-row/types.ts","../src/components/display-flow-value/index.tsx","../src/components/display-inputs-values/index.tsx","../src/components/display-inputs-values/styles.ts","../src/components/display-outputs/index.tsx","../src/components/display-outputs/styles.ts","../src/components/display-schema-tag/index.tsx","../src/components/display-schema-tag/styles.ts","../src/components/display-schema-tree/index.tsx","../src/components/display-schema-tree/styles.tsx","../src/components/dynamic-value-input/hooks.ts","../src/components/dynamic-value-input/index.tsx","../src/components/dynamic-value-input/styles.tsx","../src/components/inputs-values/index.tsx","../src/components/inputs-values/styles.tsx","../src/components/inputs-values/types.ts","../src/components/inputs-values-tree/index.tsx","../src/components/inputs-values-tree/row.tsx","../src/components/inputs-values-tree/styles.tsx","../src/components/inputs-values-tree/types.ts","../src/components/inputs-values-tree/hooks/use-child-list.tsx","../src/components/json-editor-with-variables/editor.tsx","../src/components/json-editor-with-variables/index.tsx","../src/components/json-schema-editor/default-value.tsx","../src/components/json-schema-editor/hooks.tsx","../src/components/json-schema-editor/index.tsx","../src/components/json-schema-editor/styles.tsx","../src/components/json-schema-editor/types.ts","../src/components/prompt-editor/editor.tsx","../src/components/prompt-editor/index.tsx","../src/components/prompt-editor/styles.tsx","../src/components/prompt-editor/types.tsx","../src/components/prompt-editor/extensions/jinja.tsx","../src/components/prompt-editor/extensions/language-support.tsx","../src/components/prompt-editor/extensions/markdown.tsx","../src/components/prompt-editor-with-inputs/editor.tsx","../src/components/prompt-editor-with-inputs/index.tsx","../src/components/prompt-editor-with-variables/editor.tsx","../src/components/prompt-editor-with-variables/index.tsx","../src/components/sql-editor-with-variables/editor.tsx","../src/components/sql-editor-with-variables/index.tsx","../src/components/type-selector/index.tsx","../src/components/variable-selector/context.tsx","../src/components/variable-selector/index.tsx","../src/components/variable-selector/styles.tsx","../src/components/variable-selector/use-variable-tree.tsx","../src/effects/index.ts","../src/effects/auto-rename-ref/index.ts","../src/effects/listen-ref-schema-change/index.ts","../src/effects/listen-ref-value-change/index.ts","../src/effects/provide-batch-input/index.ts","../src/effects/provide-json-schema-outputs/index.ts","../src/effects/sync-variable-title/index.ts","../src/effects/validate-when-variable-sync/index.ts","../src/form-plugins/index.ts","../src/form-plugins/batch-outputs-plugin/index.ts","../src/form-plugins/infer-assign-plugin/index.ts","../src/form-plugins/infer-inputs-plugin/index.ts","../src/hooks/index.ts","../src/hooks/use-object-list/index.tsx","../src/plugins/index.ts","../src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts","../src/plugins/disable-declaration-plugin/index.tsx","../src/plugins/json-schema-preset/create-type-preset-plugin.tsx","../src/plugins/json-schema-preset/index.tsx","../src/plugins/json-schema-preset/react.tsx","../src/plugins/json-schema-preset/types.ts","../src/plugins/json-schema-preset/type-definition/array.tsx","../src/plugins/json-schema-preset/type-definition/boolean.tsx","../src/plugins/json-schema-preset/type-definition/date-time.tsx","../src/plugins/json-schema-preset/type-definition/index.tsx","../src/plugins/json-schema-preset/type-definition/integer.tsx","../src/plugins/json-schema-preset/type-definition/map.tsx","../src/plugins/json-schema-preset/type-definition/number.tsx","../src/plugins/json-schema-preset/type-definition/object.tsx","../src/plugins/json-schema-preset/type-definition/string.tsx","../src/shared/index.ts","../src/shared/flow-value/index.ts","../src/shared/flow-value/schema.ts","../src/shared/flow-value/types.ts","../src/shared/flow-value/utils.ts","../src/shared/format-legacy-refs/index.ts","../src/shared/inject-material/index.tsx","../src/shared/lazy-suspense/index.tsx","../src/shared/polyfill-create-root/index.tsx","../src/validate/index.ts","../src/validate/validate-flow-value/index.tsx"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/components/index.ts","../src/components/assign-row/index.tsx","../src/components/assign-row/types.ts","../src/components/assign-rows/index.tsx","../src/components/batch-outputs/index.tsx","../src/components/batch-outputs/types.ts","../src/components/batch-variable-selector/index.tsx","../src/components/blur-input/index.tsx","../src/components/code-editor/editor-all.tsx","../src/components/code-editor/editor-json.tsx","../src/components/code-editor/editor-python.tsx","../src/components/code-editor/editor-shell.tsx","../src/components/code-editor/editor-sql.tsx","../src/components/code-editor/editor-ts.tsx","../src/components/code-editor/editor.tsx","../src/components/code-editor/factory.tsx","../src/components/code-editor/index.tsx","../src/components/code-editor/utils.ts","../src/components/code-editor/theme/dark.ts","../src/components/code-editor/theme/index.ts","../src/components/code-editor/theme/light.ts","../src/components/code-editor-mini/index.tsx","../src/components/condition-context/context.tsx","../src/components/condition-context/index.tsx","../src/components/condition-context/op.ts","../src/components/condition-context/types.ts","../src/components/condition-context/hooks/use-condition.tsx","../src/components/condition-row/index.tsx","../src/components/condition-row/types.ts","../src/components/constant-input/index.tsx","../src/components/constant-input/types.ts","../src/components/coze-editor-extensions/index.tsx","../src/components/coze-editor-extensions/extensions/inputs-tree.tsx","../src/components/coze-editor-extensions/extensions/variable-tag.tsx","../src/components/coze-editor-extensions/extensions/variable-tree.tsx","../src/components/db-condition-row/index.tsx","../src/components/db-condition-row/types.ts","../src/components/display-flow-value/index.tsx","../src/components/display-inputs-values/index.tsx","../src/components/display-outputs/index.tsx","../src/components/display-schema-tag/index.tsx","../src/components/display-schema-tree/index.tsx","../src/components/dynamic-value-input/hooks.ts","../src/components/dynamic-value-input/index.tsx","../src/components/inputs-values/index.tsx","../src/components/inputs-values/types.ts","../src/components/inputs-values-tree/icon.tsx","../src/components/inputs-values-tree/index.tsx","../src/components/inputs-values-tree/row.tsx","../src/components/inputs-values-tree/types.ts","../src/components/inputs-values-tree/hooks/use-child-list.tsx","../src/components/json-editor-with-variables/editor.tsx","../src/components/json-editor-with-variables/index.tsx","../src/components/json-schema-editor/default-value.tsx","../src/components/json-schema-editor/hooks.tsx","../src/components/json-schema-editor/icon.tsx","../src/components/json-schema-editor/index.tsx","../src/components/json-schema-editor/types.ts","../src/components/prompt-editor/editor.tsx","../src/components/prompt-editor/index.tsx","../src/components/prompt-editor/types.tsx","../src/components/prompt-editor/extensions/jinja.tsx","../src/components/prompt-editor/extensions/language-support.tsx","../src/components/prompt-editor/extensions/markdown.tsx","../src/components/prompt-editor-with-inputs/index.tsx","../src/components/prompt-editor-with-variables/index.tsx","../src/components/sql-editor-with-variables/editor.tsx","../src/components/sql-editor-with-variables/index.tsx","../src/components/type-selector/index.tsx","../src/components/variable-selector/context.tsx","../src/components/variable-selector/index.tsx","../src/components/variable-selector/use-variable-tree.tsx","../src/effects/index.ts","../src/effects/auto-rename-ref/index.ts","../src/effects/listen-ref-schema-change/index.ts","../src/effects/listen-ref-value-change/index.ts","../src/effects/provide-batch-input/index.ts","../src/effects/provide-json-schema-outputs/index.ts","../src/effects/sync-variable-title/index.ts","../src/effects/validate-when-variable-sync/index.ts","../src/form-plugins/index.ts","../src/form-plugins/batch-outputs-plugin/index.ts","../src/form-plugins/infer-assign-plugin/index.ts","../src/form-plugins/infer-inputs-plugin/index.ts","../src/hooks/index.ts","../src/hooks/use-object-list/index.tsx","../src/plugins/index.ts","../src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts","../src/plugins/disable-declaration-plugin/index.tsx","../src/plugins/json-schema-preset/create-type-preset-plugin.tsx","../src/plugins/json-schema-preset/index.tsx","../src/plugins/json-schema-preset/react.tsx","../src/plugins/json-schema-preset/types.ts","../src/plugins/json-schema-preset/type-definition/array.tsx","../src/plugins/json-schema-preset/type-definition/boolean.tsx","../src/plugins/json-schema-preset/type-definition/date-time.tsx","../src/plugins/json-schema-preset/type-definition/index.tsx","../src/plugins/json-schema-preset/type-definition/integer.tsx","../src/plugins/json-schema-preset/type-definition/map.tsx","../src/plugins/json-schema-preset/type-definition/number.tsx","../src/plugins/json-schema-preset/type-definition/object.tsx","../src/plugins/json-schema-preset/type-definition/string.tsx","../src/shared/index.ts","../src/shared/flow-value/index.ts","../src/shared/flow-value/schema.ts","../src/shared/flow-value/types.ts","../src/shared/flow-value/utils.ts","../src/shared/format-legacy-refs/index.ts","../src/shared/inject-material/index.tsx","../src/shared/lazy-suspense/index.tsx","../src/shared/polyfill-create-root/index.tsx","../src/validate/index.ts","../src/validate/validate-flow-value/index.tsx"],"version":"5.9.2"}

package/dist/types/components/batch-outputs/index.d.ts

@@ -4,4 +4,5 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function BatchOutputs(props: PropsType): React.JSX.Element;

package/dist/types/components/code-editor/editor.d.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 import { InferValues } from '@flowgram.ai/coze-editor/react';
 import preset from '@flowgram.ai/coze-editor/preset-code';
+import './styles.css';
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
 export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {

package/dist/types/components/condition-row/index.d.ts

@@ -5,15 +5,19 @@
 import React from 'react';
 import { IConditionRule, ConditionOpConfigs } from '../condition-context';
 import { ConditionRowValueType } from './types';
+import './styles.css';
 interface PropTypes {
     value?: ConditionRowValueType;
     onChange: (value?: ConditionRowValueType) => void;
     style?: React.CSSProperties;
     readonly?: boolean;
+    /**
+     * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+     */
     ruleConfig?: {
         ops?: ConditionOpConfigs;
         rules?: Record<string, IConditionRule>;
     };
 }
-export declare function ConditionRow({ style, value, onChange, readonly, ruleConfig, }: PropTypes): React.JSX.Element;
+export declare function ConditionRow({ style, value, onChange, readonly, ruleConfig }: PropTypes): React.JSX.Element;
 export { type ConditionRowValueType };

package/dist/types/components/coze-editor-extensions/extensions/variable-tag.d.ts

@@ -2,4 +2,5 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
+import '../styles.css';
 export declare function VariableTagInject(): null;

package/dist/types/components/db-condition-row/index.d.ts

@@ -5,12 +5,16 @@
 import React from 'react';
 import { type ConditionOpConfigs, type IConditionRule } from '../condition-context';
 import { DBConditionOptionType, DBConditionRowValueType } from './types';
+import './styles.css';
 interface PropTypes {
     value?: DBConditionRowValueType;
     onChange: (value?: DBConditionRowValueType) => void;
     style?: React.CSSProperties;
     options?: DBConditionOptionType[];
     readonly?: boolean;
+    /**
+     * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+     */
     ruleConfig?: {
         ops?: ConditionOpConfigs;
         rules?: Record<string, IConditionRule>;

package/dist/types/components/db-condition-row/types.d.ts

@@ -6,7 +6,6 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IFlowConstantRefValue } from '../../shared';
 export interface DBConditionRowValueType {
     left?: string;
-    schema?: IJsonSchema;
     operator?: string;
     right?: IFlowConstantRefValue;
 }

package/dist/types/components/display-inputs-values/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { IInputsValues } from '../../shared/flow-value';
+import './styles.css';
 interface PropsType {
     value?: IInputsValues;
     showIconInTree?: boolean;

package/dist/types/components/display-outputs/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+import './styles.css';
 interface PropsType {
     value?: IJsonSchema;
     showIconInTree?: boolean;

package/dist/types/components/display-schema-tag/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
+import './styles.css';
 interface PropsType {
     title?: JSX.Element | string;
     value?: IJsonSchema;

package/dist/types/components/display-schema-tree/index.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { type IJsonSchema, type JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
+import './styles.css';
 interface PropsType {
     value?: IJsonSchema;
     parentKey?: string;

package/dist/types/components/dynamic-value-input/index.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { IFlowConstantRefValue } from '../../shared';
 import { ConstantInputStrategy } from '../constant-input';
+import './styles.css';
 interface PropsType {
     value?: IFlowConstantRefValue;
     onChange: (value?: IFlowConstantRefValue) => void;

package/dist/types/components/inputs-values/index.d.ts

@@ -4,4 +4,5 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function InputsValues({ value, onChange, style, readonly, constantProps, schema, hasError, }: PropsType): React.JSX.Element;

package/dist/types/components/inputs-values-tree/icon.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+export declare const IconAddChildren: () => React.JSX.Element;

package/dist/types/components/inputs-values-tree/index.d.ts

@@ -4,4 +4,5 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function InputsValuesTree(props: PropsType): React.JSX.Element;

package/dist/types/components/inputs-values-tree/row.d.ts

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import { PropsType } from './types';
+import './styles.css';
 export declare function InputValueRow(props: {
     keyName?: string;
     value?: any;

package/dist/types/components/json-schema-editor/icon.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+export declare const IconAddChildren: () => React.JSX.Element;

package/dist/types/components/json-schema-editor/index.d.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { ConfigType } from './types';
+import './styles.css';
 export declare function JsonSchemaEditor(props: {
     value?: IJsonSchema;
     onChange?: (value: IJsonSchema) => void;

package/dist/types/components/prompt-editor/editor.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { InferValues } from '@flowgram.ai/coze-editor/react';
 import preset from '@flowgram.ai/coze-editor/preset-prompt';
 import { PropsType } from './types';
+import './styles.css';
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
 export interface PromptEditorPropsType extends PropsType {

package/dist/types/components/prompt-editor-with-inputs/index.d.ts

@@ -2,5 +2,10 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export declare const PromptEditorWithInputs: import("react").LazyExoticComponent<typeof import("./editor").PromptEditorWithInputs>;
-export type { PromptEditorWithInputsProps } from './editor';
+import React from 'react';
+import type { IInputsValues } from '../../shared/flow-value';
+import { PromptEditorPropsType } from '../prompt-editor';
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+    inputsValues: IInputsValues;
+}
+export declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PromptEditorWithInputsProps): React.JSX.Element;

package/dist/types/components/prompt-editor-with-variables/index.d.ts

@@ -2,5 +2,8 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export declare const PromptEditorWithVariables: import("react").LazyExoticComponent<typeof import("./editor").PromptEditorWithVariables>;
-export type { PromptEditorWithVariablesProps } from './editor';
+import React from 'react';
+import { PromptEditorPropsType } from '../prompt-editor';
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {
+}
+export declare function PromptEditorWithVariables(props: PromptEditorWithVariablesProps): React.JSX.Element;

package/dist/types/components/variable-selector/context.d.ts

@@ -3,14 +3,27 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { BaseVariableField } from '@flowgram.ai/editor';
+type VariableField = BaseVariableField<{
+    icon?: string | JSX.Element;
+    title?: string;
+    disabled?: boolean;
+}>;
 export declare const VariableSelectorContext: React.Context<{
-    skipVariable?: (variable?: BaseVariableField) => boolean;
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
+    skipVariable?: (variable: VariableField) => boolean;
 }>;
 export declare const useVariableSelectorContext: () => {
-    skipVariable?: (variable?: BaseVariableField) => boolean;
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
+    skipVariable?: (variable: VariableField) => boolean;
 };
-export declare const VariableSelectorProvider: ({ children, skipVariable, }: {
+export declare const VariableSelectorProvider: ({ children, skipVariable, includeSchema, excludeSchema, }: {
     skipVariable?: (variable?: BaseVariableField) => boolean;
+    includeSchema?: IJsonSchema | IJsonSchema[];
+    excludeSchema?: IJsonSchema | IJsonSchema[];
     children: React.ReactNode;
 }) => React.JSX.Element;
+export {};

package/dist/types/components/variable-selector/index.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { useVariableTree } from './use-variable-tree';
+import './styles.css';
 export interface VariableSelectorProps {
     value?: string[];
     config?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.5.4",
-    "@flowgram.ai/json-schema": "0.5.4",
-    "@flowgram.ai/coze-editor": "0.5.4"
+    "@flowgram.ai/editor": "0.5.6",
+    "@flowgram.ai/json-schema": "0.5.6",
+    "@flowgram.ai/coze-editor": "0.5.6"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -77,24 +77,21 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/inquirer": "^9.0.9",
-    "@types/styled-components": "^5",
     "eslint": "^8.54.0",
     "react": "^18",
     "react-dom": "^18",
-    "styled-components": "^5",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
     "@rslib/core": "~0.12.4",
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "0.5.4",
-    "@flowgram.ai/ts-config": "0.5.4"
+    "@flowgram.ai/eslint-config": "0.5.6",
+    "@flowgram.ai/ts-config": "0.5.6"
   },
   "peerDependencies": {
     "react": ">=16.8",
-    "react-dom": ">=16.8",
-    "styled-components": ">=5"
+    "react-dom": ">=16.8"
   },
   "publishConfig": {
     "access": "public",

package/src/components/batch-outputs/index.tsx

@@ -13,7 +13,7 @@ import { useObjectList } from '@/hooks';
 import { InjectVariableSelector } from '@/components/variable-selector';
 
 import { PropsType } from './types';
-import { UIRow, UIRows } from './styles';
+import './styles.css';
 
 export function BatchOutputs(props: PropsType) {
   const { readonly, style } = props;
@@ -22,9 +22,9 @@ export function BatchOutputs(props: PropsType) {
 
   return (
     <div>
-      <UIRows style={style}>
+      <div className="gedit-m-batch-outputs-rows" style={style}>
         {list.map((item) => (
-          <UIRow key={item.id}>
+          <div className="gedit-m-batch-outputs-row" key={item.id}>
             <Input
               style={{ width: 100 }}
               disabled={readonly}
@@ -44,9 +44,9 @@ export function BatchOutputs(props: PropsType) {
               size="small"
               onClick={() => remove(item.id)}
             />
-          </UIRow>
+          </div>
         ))}
-      </UIRows>
+      </div>
       <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
         {I18n.t('Add')}
       </Button>

package/src/components/batch-outputs/{styles.tsx → styles.css}

@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIRows = styled.div`
+.gedit-m-batch-outputs-rows {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 10px;
-`;
+}
 
-export const UIRow = styled.div`
+.gedit-m-batch-outputs-row {
   display: flex;
   align-items: center;
   gap: 5px;
-`;
+}

package/src/components/code-editor/editor.tsx

@@ -5,7 +5,6 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import styled, { css } from 'styled-components';
 import {
   ActiveLinePlaceholder,
   createRenderer,
@@ -17,6 +16,8 @@ import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
 
+import './styles.css';
+
 const OriginCodeEditor = createRenderer(preset, [
   EditorView.theme({
     '&.cm-focused': {
@@ -25,13 +26,7 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
-const UIContainer = styled.div<{ $mini?: boolean }>`
-  ${({ $mini }) =>
-    $mini &&
-    css`
-      height: 24px;
-    `}
-`;
+// CSS styles are in styles.css
 
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
@@ -62,18 +57,28 @@ export function BaseCodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value) {
-      editorRef.current?.setValue(String(value || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
-    <UIContainer $mini={mini}>
+    <div className={`gedit-m-code-editor-container ${mini ? 'mini' : ''}`}>
       <EditorProvider>
         <OriginCodeEditor
-          defaultValue={String(value || '')}
+          defaultValue={editorValue}
           options={{
             uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
             languageId,
@@ -101,6 +106,6 @@ export function BaseCodeEditor({
           {children}
         </OriginCodeEditor>
       </EditorProvider>
-    </UIContainer>
+    </div>
   );
 }

package/src/components/code-editor/styles.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-code-editor-container {
+}
+
+.gedit-m-code-editor-container.mini {
+  height: 24px;
+}

package/src/components/code-editor-mini/index.tsx

@@ -5,21 +5,14 @@
 
 import React from 'react';
 
-import styled from 'styled-components';
-
 import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
-const UIMini = styled.div`
-  .ͼ1 .cm-content {
-  }
-`;
-
 /**
  * @deprecated use mini in CodeEditorPropsType instead
  */
 export function CodeEditorMini(props: CodeEditorPropsType) {
   return (
-    <UIMini>
+    <div className="gedit-m-code-editor-mini">
       <CodeEditor
         {...props}
         options={{
@@ -29,6 +22,6 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
           ...(props.options || {}),
         }}
       />
-    </UIMini>
+    </div>
   );
 }