docs(materials): refract material documentations (#914)

* docs(materials): init form material docs

* docs(materials): update demos

* docs: type selector

* fix: guide

* fix: guide

* fix: materials ssg error

* feat: init component docs

* feat: update docs

* feat: update docs

* feat: remove useless images

* feat: translate component en

apps/demo-materials/src/components/free-editor/hooks/use-editor-props.tsx

@@ -67,8 +67,10 @@ export const useEditorProps = ({ registries, initialData, plugins, onSave }: Edi
         renderDefaultNode: (props: WorkflowNodeProps) => {
           const { form } = useNodeRender();
           return (
-            <WorkflowNodeRenderer className="demo-free-node" node={props.node}>
-              <div className="demo-free-node-wrapper">{form?.render()}</div>
+            <WorkflowNodeRenderer className="demo-free-material-node" node={props.node}>
+              <div className="demo-free-material-node-wrapper" style={{ padding: 12 }}>
+                {form?.render()}
+              </div>
             </WorkflowNodeRenderer>
           );
         },
@@ -97,14 +99,12 @@ export const useEditorProps = ({ registries, initialData, plugins, onSave }: Edi
        * Playground init
        */
       onInit: (ctx) => {},
-      onReady(ctx) {
-        const autoLayoutTool = ctx.get(WorkflowAutoLayoutTool);
-        autoLayoutTool.handle();
-      },
       /**
        * Playground render
        */
       onAllLayersRendered(ctx) {
+        const autoLayoutTool = ctx.get(WorkflowAutoLayoutTool);
+        autoLayoutTool.handle();
         //  Fitview
         ctx.document.fitView(false);
       },

apps/demo-materials/src/components/free-editor/index.css

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-.demo-free-node {
+.demo-free-material-node {
   display: flex;
   min-width: 300px;
   min-height: 100px;
@@ -19,112 +19,8 @@
   position: relative;
 }
 
-.demo-free-node-wrapper {
+.demo-free-material-node-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-
-.demo-node-content {
-  flex-grow: 1;
-  width: 100%;
-}
-
-.demo-node-title {
-  font-weight: 500;
-  font-size: 16px;
-  width: 100%;
-  margin: 4px 0px 12px 0px;
-  text-align: center;
-}
-.demo-free-node-content {
-  padding: 4px 12px;
-  flex-grow: 1;
-  width: 100%;
-}
-.demo-free-node::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-  background-color: white;
-  border-radius: 7px;
-}
-
-.demo-free-node:hover:before {
-  -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3))
-    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
-  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3))
-    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
-}
-
-.demo-free-node.activated:before,
-.demo-free-node.selected:before {
-  outline: 2px solid var(--light-usage-primary-color-primary, #4d53e8);
-  -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3))
-    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
-  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3))
-    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
-}
-
-.demo-free-sidebar {
-  height: 100%;
-  overflow-y: auto;
-  padding: 12px 16px 0;
-  box-sizing: border-box;
-  background: #f7f7fa;
-  border-right: 1px solid rgba(29, 28, 35, 0.08);
-}
-
-.demo-free-right-top-panel {
-  position: fixed;
-  right: 10px;
-  top: 70px;
-  width: 300px;
-  z-index: 999;
-}
-
-.demo-free-card {
-  width: 140px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 6px 8px 0 rgba(28, 31, 35, 0.03);
-  cursor: -webkit-grab;
-  cursor: grab;
-  line-height: 16px;
-  margin-bottom: 12px;
-  overflow: hidden;
-  padding: 16px;
-  position: relative;
-  color: black;
-}
-
-.demo-free-layout {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-}
-
-.demo-free-editor {
-  flex-grow: 1;
-  position: relative;
-  height: 100%;
-}
-
-.demo-free-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-}

apps/demo-materials/src/components/free-editor/plugins/debug-panel-plugin/components/debug-panel.tsx

@@ -43,7 +43,7 @@ const PanelContainer = styled.div`
 
   .semi-tabs-content {
     padding: 20px;
-    height: 700px;
+    height: 80vh;
     overflow: auto;
   }
 `;

apps/demo-materials/src/components/free-form-meta-story-builder/index.tsx

@@ -14,10 +14,17 @@ import { CUSTOM_REGISTRY, DEFAULT_FORM_META, END_REGISTRY, START_REGISTRY } from
 interface PropsType {
   formMeta?: FormMeta;
   initialData?: WorkflowJSON;
+  filterEndNode?: boolean;
+  filterStartNode?: boolean;
 }
 
 export function FreeFormMetaStoryBuilder(props: PropsType) {
-  const { formMeta = DEFAULT_FORM_META, initialData } = props;
+  const {
+    formMeta = DEFAULT_FORM_META,
+    initialData,
+    filterEndNode = false,
+    filterStartNode = false,
+  } = props;
 
   const registries = useMemo(
     () => [
@@ -33,18 +40,33 @@ export function FreeFormMetaStoryBuilder(props: PropsType) {
     [formMeta]
   );
 
-  const initialDataWithDefault = useMemo(
-    () => ({
-      nodes: [
-        ...(initialData?.nodes || []),
-        ...INITIAL_DATA.nodes.filter(
-          (node) => !initialData?.nodes?.find((item) => item.id === node.id)
-        ),
-      ],
-      edges: [...(initialData?.edges || []), ...INITIAL_DATA.edges],
-    }),
-    [initialData]
-  );
+  const initialDataWithDefault = useMemo(() => {
+    const nodes = [
+      ...(initialData?.nodes || []),
+      ...INITIAL_DATA.nodes
+        .filter((node) => !initialData?.nodes?.find((item) => item.id === node.id))
+        .filter((node) => {
+          if (node.type === 'start') {
+            return !filterStartNode;
+          }
+          if (node.type === 'end') {
+            return !filterEndNode;
+          }
+          return true;
+        }),
+    ];
+
+    const edges = [...(initialData?.edges || []), ...INITIAL_DATA.edges].filter(
+      (edge) =>
+        nodes.find((node) => node.id === edge.sourceNodeID) ||
+        nodes.find((node) => node.id === edge.targetNodeID)
+    );
+
+    return {
+      nodes,
+      edges,
+    };
+  }, [initialData, filterEndNode, filterStartNode]);
 
   return (
     <div>

apps/demo-materials/src/components/free-form-meta-story-builder/initial-data.tsx

@@ -23,16 +23,13 @@ export const INITIAL_DATA: WorkflowJSON = {
           type: 'object',
           properties: {
             str: { type: 'string' },
-            num: { type: 'number' },
-            bool: { type: 'boolean' },
-            int: { type: 'integer' },
             obj: {
               type: 'object',
               properties: {
                 obj2: {
                   type: 'object',
                   properties: {
-                    str: { type: 'string' },
+                    num: { type: 'number' },
                   },
                 },
               },

apps/demo-materials/src/index.tsx

@@ -4,3 +4,4 @@
  */
 
 export { FreeFormMetaStoryBuilder } from './components/free-form-meta-story-builder';
+export { FormHeader } from './components/form-header';

apps/docs/components/form-materials/components/code-editor.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const CodeEditor = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.CodeEditor,
+  }))
+);
+
+const defaultTsCode = `// Here, you can retrieve input variables from the node using 'params' and output results using 'ret'.
+// 'params' has been correctly injected into the environment.
+// Here's an example of getting the value of the parameter named 'input' from the node input:
+// const input = params.input;
+// Here's an example of outputting a 'ret' object containing multiple data types:
+// const ret = { "name": 'Xiaoming', "hobbies": ["Reading", "Traveling"] };
+
+async function main({ params }) {
+  // Build the output object
+  const ret = {
+    key0: params.input + params.input, // Concatenate the input parameter 'input' twice
+    key1: ["hello", "world"], // Output an array
+    key2: { // Output an Object
+      key21: "hi"
+    },
+  };
+
+  return ret;
+}`;
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterStartNode
+    filterEndNode
+    height={600}
+    formMeta={{
+      render: () => (
+        <div style={{ maxWidth: 500 }}>
+          <FormHeader />
+          <Field<string | undefined> name="code_editor" defaultValue={defaultTsCode}>
+            {({ field }) => (
+              <CodeEditor
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+                languageId="typescript"
+              />
+            )}
+          </Field>
+        </div>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/condition-row.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const ConditionRow = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.ConditionRow,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<any | undefined> name="condition_row">
+            {({ field }) => (
+              <ConditionRow value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/dynamic-value-input.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const DynamicValueInput = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.DynamicValueInput,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<any> name="dynamic_value_input">
+            {({ field }) => (
+              <DynamicValueInput value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);
+
+export const WithSchemaStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<any> name="dynamic_value_input">
+            {({ field }) => (
+              <DynamicValueInput
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+                schema={{ type: 'string' }}
+              />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/inputs-values.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const InputsValues = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.InputsValues,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<Record<string, any> | undefined>
+            name="inputs_values"
+            defaultValue={{
+              a: {
+                type: 'ref',
+                content: ['start_0', 'str'],
+              },
+            }}
+          >
+            {({ field }) => (
+              <InputsValues value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);
+
+export const WithSchemaStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<Record<string, any> | undefined>
+            name="inputs_values"
+            defaultValue={{
+              a: {
+                type: 'ref',
+                content: ['start_0', 'str'],
+              },
+            }}
+          >
+            {({ field }) => (
+              <InputsValues
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+                schema={{
+                  type: 'string',
+                }}
+              />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/json-editor-with-variables.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const JsonEditorWithVariables = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.JsonEditorWithVariables,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<any> name="json_editor_with_variables" defaultValue={`{ "a": {{start_0.str}}}`}>
+            {({ field }) => (
+              <JsonEditorWithVariables
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+              />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/json-schema-editor.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/form-materials';
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const JsonSchemaEditor = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.JsonSchemaEditor,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterStartNode
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<IJsonSchema | undefined>
+            name="json_schema_editor"
+            defaultValue={{
+              type: 'object',
+              properties: {
+                name: { type: 'string' },
+                age: { type: 'number' },
+              },
+            }}
+          >
+            {({ field }) => (
+              <JsonSchemaEditor value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/prompt-editor-with-inputs.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IFlowTemplateValue, IInputsValues, InputsValuesTree } from '@flowgram.ai/form-materials';
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const PromptEditorWithInputs = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.PromptEditorWithInputs,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<IInputsValues | undefined>
+            name="inputsValues"
+            defaultValue={{
+              a: { type: 'constant', content: '123' },
+              b: { type: 'ref', content: ['start_0', 'obj'] },
+            }}
+          >
+            {({ field }) => (
+              <InputsValuesTree value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+          <br />
+          <Field<IInputsValues | undefined> name="inputsValues">
+            {({ field: inputsField }) => (
+              <Field<IFlowTemplateValue | undefined>
+                name="prompt_editor_with_inputs"
+                defaultValue={{
+                  type: 'template',
+                  content: '# Query \n {{b.obj2.num}}',
+                }}
+              >
+                {({ field }) => (
+                  <PromptEditorWithInputs
+                    value={field.value}
+                    onChange={(value) => field.onChange(value)}
+                    inputsValues={inputsField.value || {}}
+                  />
+                )}
+              </Field>
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/prompt-editor-with-variables.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const PromptEditorWithVariables = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.PromptEditorWithVariables,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<any | undefined>
+            name="prompt_editor"
+            defaultValue={{
+              type: 'template',
+              content: `# Role
+You are a helpful assistant
+
+# Query
+{{start_0.str}}`,
+            }}
+          >
+            {({ field }) => (
+              <PromptEditorWithVariables
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+              />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/type-selector.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/form-materials';
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const TypeSelector = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.TypeSelector,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterStartNode
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<Partial<IJsonSchema> | undefined>
+            name="type_selector"
+            defaultValue={{ type: 'string' }}
+          >
+            {({ field }) => (
+              <TypeSelector value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);

apps/docs/components/form-materials/components/variable-selector.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Field } from '@flowgram.ai/fixed-layout-editor';
+
+import { FreeFormMetaStoryBuilder, FormHeader } from '../../free-form-meta-story-builder';
+
+const VariableSelector = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.VariableSelector,
+  }))
+);
+
+const VariableSelectorProvider = React.lazy(() =>
+  import('@flowgram.ai/form-materials').then((module) => ({
+    default: module.VariableSelectorProvider,
+  }))
+);
+
+export const BasicStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<string[] | undefined> name="variable_selector">
+            {({ field }) => (
+              <VariableSelector value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);
+
+export const FilterSchemaStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <>
+          <FormHeader />
+          <Field<string[] | undefined> name="variable_selector">
+            {({ field }) => (
+              <VariableSelector
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+                includeSchema={{ type: 'string' }}
+              />
+            )}
+          </Field>
+        </>
+      ),
+    }}
+  />
+);
+
+export const CustomFilterStory = () => (
+  <FreeFormMetaStoryBuilder
+    filterEndNode
+    formMeta={{
+      render: () => (
+        <VariableSelectorProvider skipVariable={(variable) => variable?.key === 'str'}>
+          <FormHeader />
+          <Field<string[] | undefined> name="variable_selector">
+            {({ field }) => (
+              <VariableSelector value={field.value} onChange={(value) => field.onChange(value)} />
+            )}
+          </Field>
+        </VariableSelectorProvider>
+      ),
+    }}
+  />
+);

apps/docs/components/free-form-meta-story-builder/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+const OriginFreeFormMetaStoryBuilder = React.lazy(() =>
+  import('@flowgram.ai/demo-materials').then((module) => ({
+    default: module.FreeFormMetaStoryBuilder,
+  }))
+);
+
+const FormHeader = React.lazy(() =>
+  import('@flowgram.ai/demo-materials').then((module) => ({
+    default: module.FormHeader,
+  }))
+);
+
+const FreeFormMetaStoryBuilder = (
+  props: React.ComponentPropsWithoutRef<typeof OriginFreeFormMetaStoryBuilder> & {
+    height?: number | string;
+  }
+) => (
+  <div style={{ position: 'relative', height: props.height || 400 }}>
+    <OriginFreeFormMetaStoryBuilder {...props} />
+  </div>
+);
+
+export { FreeFormMetaStoryBuilder, FormHeader };

apps/docs/package.json

@@ -20,11 +20,13 @@
     "@flowgram.ai/demo-free-layout-simple": "workspace:*",
     "@flowgram.ai/demo-fixed-layout-simple": "workspace:*",
     "@flowgram.ai/demo-node-form": "workspace:*",
+    "@flowgram.ai/demo-materials": "workspace:*",
     "@flowgram.ai/demo-playground": "workspace:*",
     "@flowgram.ai/fixed-layout-editor": "workspace:*",
     "@flowgram.ai/fixed-semi-materials": "workspace:*",
     "@flowgram.ai/free-layout-editor": "workspace:*",
     "@flowgram.ai/group-plugin": "workspace:*",
+    "@flowgram.ai/form-materials": "workspace:*",
     "@flowgram.ai/form-core": "workspace:*",
     "@flowgram.ai/free-auto-layout-plugin": "workspace:*",
     "@flowgram.ai/minimap-plugin": "workspace:*",
@@ -59,7 +61,8 @@
     "dotenv": "~16.5.0",
     "tsx": "~4.19.4",
     "shx": "0.4.0",
-    "cross-env": "~7.0.3"
+    "cross-env": "~7.0.3",
+    "rspress-plugin-mermaid": "~0.3.0"
   },
   "homepage": "https://github.com/bytedance/flowgram.ai/"
 }

apps/docs/rspress.config.ts

@@ -5,9 +5,10 @@
 
 import * as path from 'node:path';
 
+import mermaid from 'rspress-plugin-mermaid';
 import { pluginLlms } from '@rspress/plugin-llms';
 import { transformerCompatibleMetaHighlight } from '@rspress/core/shiki-transformers';
-import { defineConfig } from '@rspress/core';
+import { defineConfig, RspressPlugin } from '@rspress/core';
 import { pluginLess } from '@rsbuild/plugin-less';
 
 export default defineConfig({
@@ -42,6 +43,10 @@ export default defineConfig({
               },
             ],
           },
+          /**
+           * ignore warnings from @coze-editor/editor/language-typescript
+           */
+          ignoreWarnings: [/Critical dependency: the request of a dependency is an expression/],
         });
       },
     },
@@ -64,7 +69,8 @@ export default defineConfig({
       '/en/examples/free-layout/free-layout-simple',
       '/en/examples/fixed-layout/fixed-feature-overview',
       '/en/examples/free-layout/free-feature-overview',
-
+      /\/en\/guide\/materials\/.*\/.*/,
+      /\/guide\/materials\/.*\/.*/,
       '/examples/node-form/basic',
       '/examples/node-form/array',
       '/examples/node-form/dynamic',
@@ -129,6 +135,7 @@ export default defineConfig({
         include: ({ page }) => page.lang === 'en',
       },
     ]),
+    mermaid() as RspressPlugin,
   ],
   themeConfig: {
     localeRedirect: 'auto',

apps/docs/src/en/guide/_meta.json

@@ -9,37 +9,50 @@
   {
     "type": "dir",
     "name": "free-layout",
-    "label": "Free Layout"
+    "label": "Free Layout",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "fixed-layout",
-    "label": "Fixed Layout"
+    "label": "Fixed Layout",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "form",
-    "label": "Form"
+    "label": "Form",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "variable",
-    "label": "Variable"
+    "label": "Variable",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "materials",
+    "label": "Official Materials (WIP)",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "plugin",
-    "label": "Plugin"
+    "label": "Plugin",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "advanced",
-    "label": "Advanced"
+    "label": "Advanced",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "concepts",
-    "label": "Concepts"
+    "label": "Concepts",
+    "collapsed": true
   },
   {
     "type": "dir",

apps/docs/src/en/guide/form/form-materials.mdx

@@ -5,182 +5,12 @@ import { MaterialDisplay } from '../../../../components/materials';
 
 ## How to Use?
 
-### Via Package Reference
+See: [Material Quickstart](/guide/materials/introduction.html)
 
-Official form materials can be used directly via package reference:
-
-<PackageManagerTabs command="install @flowgram.ai/form-materials" />
-
-```tsx
-import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
-```
-
-
-### Adding Material Source Code via CLI
-
-If customization of components is required (e.g., changing text, styles, or business logic), it is recommended to **add the material source code to the project for customization via CLI**:
-
-```bash
-npx @flowgram.ai/form-materials@latest
-```
-
-After running, the CLI will prompt the user to select the material to add to the project:
-
-```console
-? Select one material to add: (Use arrow keys)
-❯ components/json-schema-editor
-  components/type-selector
-  components/variable-selector
-```
-
-Users can also directly add the source code of a specified material via CLI:
-
-```bash
-npx @flowgram.ai/form-materials@latest components/json-schema-editor
-```
-
-After the CLI runs successfully, the relevant materials will be automatically added to the `src/form-materials` directory in the current project.
-
-:::warning Notes
-
-1. Official materials are currently implemented based on [Semi Design](https://semi.design/). If there is a need for a different underlying component library, the source code can be copied via CLI for replacement.
-2. Some materials may depend on third-party npm libraries, which will be automatically installed during CLI execution.
-3. Some materials may depend on other official materials. The source code of these dependent materials will also be added to the project during CLI execution.
-
-:::
 
 ## Currently Supported Component Materials
 
-### TypeSelector
-
-<MaterialDisplay
-  imgs={['/materials/type-selector.png']}
-  filePath="components/type-selector/index.tsx"
-  exportName="TypeSelector"
->
-  TypeSelector is used for variable type selection.
-</MaterialDisplay>
-
-
-### VariableSelector
-
-<MaterialDisplay
-  imgs={['/materials/variable-selector.png']}
-  filePath="components/variable-selector/index.tsx"
-  exportName="VariableSelector"
->
-  VariableSelector is used to display a variable tree and select a single variable from it.
-</MaterialDisplay>
-
-
-### JsonSchemaEditor
-
-<MaterialDisplay
-  imgs={['/materials/json-schema-editor.png']}
-  filePath="components/json-schema-editor/index.tsx"
-  exportName="JsonSchemaEditor"
->
-  JsonSchemaEditor is used for visually editing [JsonSchema](https://json-schema.org/).
-
-  Commonly used for visually configuring the output variables of nodes.
-</MaterialDisplay>
-
-
-### DynamicValueInput
-
-<MaterialDisplay
-  imgs={['/materials/dynamic-value-input.png']}
-  filePath="components/dynamic-value-input/index.tsx"
-  exportName="DynamicValueInput"
->
-  DynamicValueInput is used for configuring values (constant values + variable values).
-</MaterialDisplay>
-
-### JsonEditorWithVariables
-
-<MaterialDisplay
-  imgs={['/materials/json-editor-with-variables.png']}
-  filePath="components/json-editor-with-variables/index.tsx"
-  exportName="JsonEditorWithVariables"
->
-  A JSON editor that supports variables.
-</MaterialDisplay>
-
-### CodeEditor
-
-<MaterialDisplay
-  imgs={['/materials/code-editor.png']}
-  filePath="components/code-editor/index.tsx"
-  exportName="CodeEditor"
->
-  A code editor, currently only supports TypeScript (JavaScript).
-</MaterialDisplay>
-
-### ConditionRow
-
-<MaterialDisplay
-  imgs={[{ src: '/materials/condition-row.png', caption: 'The first condition checks if the query variable contains Hello Flow, the second condition checks if the enable variable is true.' }]}
-  filePath="components/condition-row/index.tsx"
-  exportName="ConditionRow"
->
-  ConditionRow is used for configuring a **single row** of condition judgment.
-</MaterialDisplay>
-
-### PromptEditorWithVariables
-
-<MaterialDisplay
-  imgs={[{ src: '/materials/prompt-editor-with-variables.png', caption: 'LLM_3 and LLM_4 use variables from batch item of Loop' }]}
-  filePath="components/prompt-editor-with-variables/index.tsx"
-  exportName="PromptEditorWithVariables"
->
-  PromptEditorWithVariables is a Prompt editor that supports variable configuration.
-
-  Below is a configuration example for the Prompt editor, where the `query` variable is of string type and the `enable` variable is of boolean type:
-  ```typescript
-  {
-    type: "template",
-    content: "#User Input:\nquery:{{start_0.query}}\nenable:{{start_0.enable}}"
-  }
-  ```
-</MaterialDisplay>
-
-### PromptEditorWithInputs
-
-<MaterialDisplay
-  imgs={['/materials/prompt-editor-with-inputs.png']}
-  filePath="components/prompt-editor-with-inputs/index.tsx"
-  exportName="PromptEditorWithInputs"
->
-  A Prompt editor with input variables. You need to pass the value of inputsValues when using it:
-```typescript
-<PromptEditorWithInputs
-  inputsValues={{
-    a: { type: 'constant', content: "test" },
-    b: { type: 'ref', content: ["a", "b", "c"] }
-  }}
-/>
-```
-</MaterialDisplay>
-
-### InputsValues
-
-<MaterialDisplay
-  imgs={['/materials/inputs-values.png']}
-  filePath="components/inputs-values/index.tsx"
-  exportName="InputsValues"
->
-  Key-value pair input, you can configure the `infer-inputs-plugin` material to implement inputs type inference.
-</MaterialDisplay>
-
-### BatchOutputs
-
-<MaterialDisplay
-  imgs={['/materials/batch-outputs.png']}
-  filePath="components/batch-outputs/index.tsx"
-  exportName="BatchOutputs"
->
-  Loop output, you need to configure the `batch-outputs-plugin` material to implement loop output scope limitation + output variable automatic linkage derivation.
-</MaterialDisplay>
+Documents are transferred to [Components](/guide/materials/components/type-selector.html)
 
 ## Currently Supported Effect Materials
 

apps/docs/src/en/guide/materials/_meta.json

@@ -0,0 +1,10 @@
+[
+  "introduction",
+  "cli",
+  {
+    "type": "dir",
+    "name": "components",
+    "label": "Components",
+    "collapsed": true
+  }
+]

apps/docs/src/en/guide/materials/cli.mdx

@@ -0,0 +1,130 @@
+# Material Management CLI
+
+Flowgram provides a dedicated CLI command-line tool to help you manage official materials in your project.
+
+## Installation
+
+You can run it directly with npx:
+
+```bash
+npx @flowgram.ai/cli@latest [command]
+```
+
+## Sync Materials to Project
+
+Use the `materials` command to add the source code of official materials to your project for customization:
+
+```bash
+# Interactive material selection
+npx @flowgram.ai/cli@latest materials
+
+# Directly specify material
+npx @flowgram.ai/cli@latest materials components/json-schema-editor
+
+# Specify multiple materials (comma-separated)
+npx @flowgram.ai/cli@latest materials components/variable-selector,effect/provideJsonSchemaOutputs
+
+# Select multiple materials (interactive multi-select)
+npx @flowgram.ai/cli@latest materials --select-multiple
+```
+
+After running, the CLI will prompt you to select materials to add to your project:
+
+```console
+🚀 Welcome to @flowgram.ai form-materials CLI!
+📁 Project: /path/to/your/project
+🎯 Flowgram Version: 1.0.0
+  - Target material root: /path/to/your/project/src/form-materials
+
+🚀 The following materials will be added to your project
+📦 components/json-schema-editor
+📦 components/variable-selector
+📦 effect/provideJsonSchemaOutputs
+
+✅ These npm dependencies is added to your package.json
+- @semi-design/icons
+- lodash-es
+- classnames
+
+➡️ Please run npm install to install dependencies
+```
+
+### Advanced Options
+
+The `materials` command supports the following options:
+
+| Option | Description | Example |
+|------|------|------|
+| `--refresh-project-imports` | Refresh project imports for copied materials | `npx @flowgram.ai/cli@latest materials components/json-schema-editor --refresh-project-imports` |
+| `--target-material-root-dir <dir>` | Specify target directory for material copying | `npx @flowgram.ai/cli@latest materials --target-material-root-dir src/custom-materials` |
+| `--select-multiple` | Enable interactive multi-select mode | `npx @flowgram.ai/cli@latest materials --select-multiple` |
+
+## Find Used Materials
+
+Use the `find-used-materials` command to analyze project code and find all used official materials:
+
+```bash
+npx @flowgram.ai/cli@latest find-used-materials
+```
+
+Output example:
+
+```console
+🚀 Welcome to @flowgram.ai form-materials CLI!
+📁 Project: /path/to/your/project
+🎯 Flowgram Version: 1.0.0
+
+👀 The exports of components/json-schema-editor is JsonSchemaEditor,JsonSchemaEditorProps
+👀 The exports of components/variable-selector is VariableSelector,VariableSelectorProps
+
+👀 Searching src/components/MyForm.tsx
+🔍 import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
+import components/json-schema-editor by JsonSchemaEditor
+
+👀 Searching src/pages/Settings.tsx
+🔍 import { VariableSelector } from '@flowgram.ai/form-materials'
+import components/variable-selector by VariableSelector
+
+📦 All used materials:
+components/json-schema-editor,components/variable-selector
+```
+
+This command will:
+- Scan all TypeScript files in the project
+- Analyze import statements from `@flowgram.ai/form-materials`
+- Identify specific materials being used
+- Output detailed usage location information
+
+## Case Run Down
+
+### Sync all used official materials in the project to the src/custom-materials directory
+
+1. Use the `find-used-materials` command to see the official materials used in the project.
+
+```bash
+npx @flowgram.ai/cli@latest find-used-materials
+```
+
+After the command runs, it will output a list of official materials used in the project.
+
+```console
+📦 All used materials:
+components/json-schema-editor,components/variable-selector
+```
+
+2. Use the `materials` command to add the source code of these materials to the project's src/custom-materials directory.
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-schema-editor,components/variable-selector \
+  --target-material-root-dir src/custom-materials \
+  --refresh-project-imports
+```
+
+- The `--refresh-project-imports` option will refresh the import paths for copied materials in the project, ensuring the latest customized versions are used.
+- The `--target-material-root-dir src/custom-materials` option specifies the target directory for material copying as src/custom-materials.
+
+
+## FAQ
+
+### Q: Can't find the newly added dependencies after CLI adds them?
+A: Please check if you have run `npm install` to install the newly added dependencies.

apps/docs/src/en/guide/materials/components/_meta.json

@@ -0,0 +1,12 @@
+[
+  "type-selector",
+  "json-schema-editor",
+  "variable-selector",
+  "dynamic-value-input",
+  "condition-row",
+  "inputs-values",
+  "code-editor",
+  "json-editor-with-variables",
+  "prompt-editor-with-variables",
+  "prompt-editor-with-inputs"
+]

apps/docs/src/en/guide/materials/components/code-editor.mdx

@@ -0,0 +1,177 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/code-editor';
+
+# CodeEditor
+
+CodeEditor is a powerful code editor component built on CodeMirror 6, supporting syntax highlighting and intelligent suggestions for multiple programming languages. It provides dedicated editor versions for TypeScript, Python, SQL, Shell, JSON, and more.
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { CodeEditor } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string | undefined> name="code_editor">
+        {({ field }) => (
+          <CodeEditor
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            languageId="typescript"
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Dedicated Language Editors
+
+:::warning Note
+Importing dedicated language editors separately can reduce the dependencies required for bundling
+:::
+
+```tsx
+// TypeScript Editor
+import { TypeScriptCodeEditor } from '@flowgram.ai/form-materials';
+
+// Python Editor
+import { PythonCodeEditor } from '@flowgram.ai/form-materials';
+
+// SQL Editor
+import { SQLCodeEditor } from '@flowgram.ai/form-materials';
+
+// Shell Editor
+import { ShellCodeEditor } from '@flowgram.ai/form-materials';
+
+// JSON Editor
+import { JsonCodeEditor } from '@flowgram.ai/form-materials';
+```
+
+## API Reference
+
+### CodeEditor Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | - | Editor content |
+| `onChange` | `(value: string) => void` | - | Callback function when content changes |
+| `languageId` | `'python' \| 'typescript' \| 'shell' \| 'json' \| 'sql'` | - | Code language type |
+| `theme` | `'dark' \| 'light'` | `'light'` | Editor theme |
+| `placeholder` | `string` | - | Placeholder text |
+| `activeLinePlaceholder` | `string` | - | Current line placeholder hint |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `mini` | `boolean` | `false` | Whether it's mini mode |
+| `options` | `Options` | - | CodeMirror configuration options |
+
+### Language Support
+
+CodeEditor supports the following languages:
+
+- **typescript**: TypeScript/JavaScript
+- **python**: Python
+- **sql**: SQL
+- **shell**: Shell scripts
+- **json**: JSON
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/code-editor"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/code-editor
+```
+
+### Directory Structure Explanation
+
+```
+code-editor/
+├── index.tsx           # Unified export file
+├── editor.tsx          # Base editor component BaseCodeEditor
+├── editor-all.tsx      # Full-featured editor (deprecated)
+├── editor-ts.tsx       # TypeScript editor
+├── editor-python.tsx   # Python editor
+├── editor-sql.tsx      # SQL editor
+├── editor-shell.tsx    # Shell editor
+├── editor-json.tsx     # JSON editor
+├── factory.tsx         # Editor factory function
+├── theme/              # Theme configuration
+│   ├── dark.ts         # Dark theme
+│   ├── light.ts        # Light theme
+│   └── index.ts        # Theme export
+├── utils.ts            # Utility functions
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### BaseCodeEditor
+
+The base editor component, a simple wrapper around coze-editor, provides basic syntax highlighting, theme switching, mini mode, read-only mode, and other features.
+
+:::warning Note
+BaseCodeEditor does not include any language logic loading; language logic is implemented in dedicated editors.
+:::
+
+#### Dedicated Editors
+Each language has a corresponding dedicated editor, implemented through dynamic import:
+
+```typescript
+export const loadTypescriptLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-typescript').then((module) => {
+    // TypeScript language loading logic
+  });
+
+export const TypeScriptCodeEditor = CodeEditorFactory<true>(
+  loadTypescriptLanguage,
+  {
+    displayName: 'TypeScriptCodeEditor',
+    fixLanguageId: 'typescript',
+  }
+);
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/coze-editor
+
+@flowgram.ai/coze-editor is a code editor component built on CodeMirror 6. See source code: [coze-dev/rush-dev](https://github.com/coze-dev/rush-arch/tree/main/packages/text-editor)
+
+- `createRenderer`: Create editor
+- `preset-code`: Code editor preset configuration
+- `EditorProvider`: Editor context provider
+- `ActiveLinePlaceholder`: Current line placeholder component
+
+#### @codemirror/view
+- `EditorView`: CodeMirror editor view
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[CodeEditor Component] --> B[Select languageId
+ or dedicated editor]
+    B --React.lazy--> C[Load dependencies
+ needed for languageId]
+    C --> D[BaseCodeEditor]
+    D --> E[CozeEditor]
+    E --> F[Syntax highlighting]
+    E --> G[Theme application]
+    E --> H[Event handling]
+```
+
+### Performance Optimization
+
+- **Lazy Loading**: Each language is loaded on demand
+- **Dedicated Editors**: It is recommended to use XXXCodeEditor instead of the generic CodeEditor to optimize bundling speed

apps/docs/src/en/guide/materials/components/condition-row.mdx

@@ -0,0 +1,182 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/condition-row';
+
+# ConditionRow
+
+ConditionRow is a conditional expression component used to build variable comparison logic. It supports selecting variables, choosing comparison operators, and inputting comparison values. It can automatically adapt available operators and value types based on the variable type.
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/condition-row.png" alt="Condition Row Component" style={{ width: '50%' }} />
+  *The first condition is the query variable containing Hello Flow, the second condition is the enable variable being true*
+</div>
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { ConditionRow } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any | undefined> name="condition_row">
+        {({ field }) => (
+          <ConditionRow value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Condition Row with Initial Value
+
+```tsx
+<ConditionRow
+  value={{
+    left: { type: 'ref', content: 'user.age' },
+    operator: 'gt',
+    right: { type: 'constant', content: 18, schema: { type: 'number' } }
+  }}
+  onChange={(value) => console.log('Condition changed:', value)}
+/>
+```
+
+## API Reference
+
+### ConditionRow Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `ConditionRowValueType` | - | Conditional expression value |
+| `onChange` | `(value?: ConditionRowValueType) => void` | - | Callback function when condition changes |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `ruleConfig` | `{ ops?: ConditionOpConfigs; rules?: Record<string, IConditionRule> }` | - | Operator and rule configuration |
+| `style` | `React.CSSProperties` | - | Custom styles |
+
+### ConditionRowValueType
+
+```typescript
+interface ConditionRowValueType {
+  left?: IFlowRefValue;           // Left variable reference
+  operator?: string;            // Operator
+  right?: IFlowConstantRefValue; // Right constant value
+}
+
+interface IFlowRefValue {
+  type: 'ref';
+  content: string; // Variable path, e.g., "user.name"
+}
+
+interface IFlowConstantRefValue {
+  type: 'constant';
+  content: any;           // Constant value
+  schema: IJsonSchema;  // Value type definition
+}
+```
+
+### Supported Comparison Operators
+
+Based on the type of the left variable, ConditionRow will automatically provide corresponding comparison operators:
+
+- **String type**: equals, not_equals, contains, not_contains, starts_with, ends_with
+- **Number type**: equals, not_equals, gt, gte, lt, lte
+- **Boolean type**: equals, not_equals
+- **Array type**: contains, not_contains, empty, not_empty
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/condition-row"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/condition-row
+```
+
+### Directory Structure Explanation
+
+```
+condition-row/
+├── index.tsx           # Main component implementation, containing ConditionRow core logic
+├── types.ts            # Type definitions
+├── styles.tsx          # Style definitions using styled-components
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### Variable Type Inference
+The component automatically infers the JSON Schema type based on the selected left variable:
+
+```typescript
+const leftSchema = useMemo(() => {
+  if (!variable) return undefined;
+  return JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+}, [variable?.type?.hash]);
+```
+
+#### Dynamic Operator Adaptation
+Available operators are obtained based on the left variable type through the `useCondition` Hook:
+
+```typescript
+const { rule, opConfig, opOptionList, targetSchema } = useCondition({
+  leftSchema,
+  operator,
+});
+```
+
+#### Right Value Type Auto-Matching
+The type of the right input field is automatically matched based on the operator and left variable type:
+
+```typescript
+targetSchema ? (
+  <InjectDynamicValueInput
+    schema={targetSchema}
+    // ... other properties
+  />
+) : (
+  // Placeholder input
+)
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/json-schema
+- `JsonSchemaUtils.astToSchema()`: Convert AST type to JSON Schema
+- `IJsonSchema`: JSON Schema type definition
+
+#### @flowgram.ai/variable-core
+- `useScopeAvailable()`: Get available variables in current scope
+
+#### @flowgram.ai/i18n
+- `I18n`: Internationalization support
+
+#### Internal Components
+- [`InjectVariableSelector`](./variable-selector): Variable selector
+- [`InjectDynamicValueInput`](./dynamic-value-input): Dynamic value input component
+- `useCondition`: Conditional logic Hook
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[ConditionRow Component] --> B[Select Left Variable]
+    B --> C[Infer Variable Type]
+    C --> D[Get Available Operators]
+    D --> E[Select Comparison Operator]
+    E --> F[Determine Right Value Type]
+    F --> G[Input Comparison Value]
+    G --> H[onChange Callback]
+
+    J[Variable Selector] --> B
+    K[Dynamic Value Input] --> G
+    L[Condition Context] --> D
+```

apps/docs/src/en/guide/materials/components/dynamic-value-input.mdx

@@ -0,0 +1,217 @@
+import { SourceCode } from '@theme';
+import { BasicStory, WithSchemaStory } from 'components/form-materials/components/dynamic-value-input';
+
+# DynamicValueInput
+
+DynamicValueInput is a dynamic value input component that supports both constant and variable input modes. It can automatically select the appropriate input type based on the provided schema and offers variable selection functionality. The component can intelligently switch between constant input and variable selection.
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/dynamic-value-input.png" alt="DynamicValueInput Component" style={{ width: '50%' }} />
+</div>
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { DynamicValueInput } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="dynamic_value_input">
+        {({ field }) => (
+          <DynamicValueInput value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### With Schema Constraints
+
+<WithSchemaStory />
+
+```tsx pure title="form-meta.tsx"
+import { DynamicValueInput } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="dynamic_value_input">
+        {({ field }) => (
+          <DynamicValueInput
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            schema={{ type: 'string' }}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Constant Mode
+
+```tsx
+<DynamicValueInput
+  value={{
+    type: 'constant',
+    content: 'Hello World',
+    schema: { type: 'string' }
+  }}
+  onChange={handleChange}
+/>
+```
+
+### Variable Mode
+
+```tsx
+<DynamicValueInput
+  value={{
+    type: 'ref',
+    content: ['start_0', 'query']
+  }}
+  onChange={handleChange}
+/>
+```
+
+## API Reference
+
+### DynamicValueInput Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `IFlowConstantRefValue` | - | Input value, supports constant or variable reference |
+| `onChange` | `(value?: IFlowConstantRefValue) => void` | - | Callback function when value changes |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `hasError` | `boolean` | `false` | Whether to display error state |
+| `style` | `React.CSSProperties` | - | Custom styles |
+| `schema` | `IJsonSchema` | - | JSON Schema to constrain input type |
+| `constantProps` | `ConstantInputProps` | - | Additional properties passed to constant input component |
+
+### IFlowConstantRefValue
+
+```typescript
+type IFlowConstantRefValue =
+  | IFlowConstantValue  // Constant value
+  | IFlowRefValue;     // Variable reference
+
+interface IFlowConstantValue {
+  type: 'constant';
+  content: any;           // Constant value
+  schema: IJsonSchema;  // Value type definition
+}
+
+interface IFlowRefValue {
+  type: 'ref';
+  content: string; // Variable path, e.g., "user.name"
+}
+```
+
+### Mode Switching
+
+The component supports intelligent switching between two input modes:
+
+1. **Constant Mode**: Direct value input
+2. **Variable Mode**: Select variables within scope
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/dynamic-value-input"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/dynamic-value-input
+```
+
+### Directory Structure Explanation
+
+```
+dynamic-value-input/
+├── index.tsx           # Main component implementation, containing DynamicValueInput core logic
+├── hooks.ts            # Custom Hooks for handling variable references and schema selection
+├── styles.tsx          # Style definitions using styled-components
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### Variable Reference Handling
+Get variable reference information through the `useRefVariable` Hook:
+
+```typescript
+const refVariable = useRefVariable(value);
+```
+
+#### Schema Selection Management
+Manage type selection through the `useSelectSchema` Hook:
+
+```typescript
+const [selectSchema, setSelectSchema] = useSelectSchema(
+  schemaFromProps,
+  constantProps,
+  value
+);
+```
+
+#### Mode Switching Logic
+The component determines whether to render constant input or variable selector by judging `value.type`:
+
+```typescript
+if (value?.type === 'ref') {
+  // Render variable selector
+  return <InjectVariableSelector />;
+} else {
+  // Render constant input
+  return <ConstantInput />;
+}
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/json-schema
+- `JsonSchemaUtils`: JSON Schema utility class
+- `IJsonSchema`: JSON Schema type definition
+- `useTypeManager`: Type manager Hook
+
+#### @flowgram.ai/variable-core
+- `useScopeAvailable`: Get available variables in current scope
+
+#### Internal Components
+- [`InjectVariableSelector`](./variable-selector): Variable selector
+- [`TypeSelector`](./type-selector): Type selector
+- `ConstantInput`: Constant input component
+- `createInjectMaterial`: Create injectable material components
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[DynamicValueInput Component] --> B{Determine Input Mode}
+    B -->|Constant Mode| C[Render Constant Input]
+    B -->|Variable Mode| D[Render Variable Selector]
+
+    C --> E[Select Input Type Based on Schema]
+    D --> F[Display Available Variable List]
+
+    E --> G[User Input Value]
+    F --> H[User Select Variable]
+
+    G --> I[Generate Constant Value]
+    H --> J[Generate Variable Reference]
+
+    I --> K[onChange Callback]
+    J --> K
+
+```

apps/docs/src/en/guide/materials/components/inputs-values.mdx

@@ -0,0 +1,200 @@
+import { SourceCode } from '@theme';
+import { BasicStory, WithSchemaStory } from 'components/form-materials/components/inputs-values';
+
+# InputsValues
+
+InputsValues is a key-value pair input list component used to collect and manage a set of input parameters. Each key-value pair supports both constant and variable input modes, implemented through the DynamicValueInput component for flexible input methods.
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { InputsValues } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Record<string, any> | undefined> name="inputs_values">
+        {({ field }) => (
+          <InputsValues value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### With Schema Constraints
+
+<WithSchemaStory />
+
+```tsx pure title="form-meta.tsx"
+import { InputsValues } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Record<string, any> | undefined> name="inputs_values">
+        {({ field }) => (
+          <InputsValues
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            schema={{
+              type: 'string',
+            }}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Custom Constant Input Strategy
+You can customize the input behavior of each value through `constantProps`:
+
+```typescript
+const customStrategies = [
+  {
+    type: 'string',
+    render: (props) => <CustomStringInput {...props} />
+  },
+  {
+    type: 'number',
+    render: (props) => <CustomNumberInput {...props} />
+  }
+];
+
+<InputsValues
+  constantProps={{
+    strategies: customStrategies
+  }}
+/>
+```
+
+## API Reference
+
+### InputsValues Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `Record<string, IFlowValue \| undefined>` | - | Key-value pair data |
+| `onChange` | `(value?: Record<string, IFlowValue \| undefined>) => void` | - | Callback function when data changes |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `hasError` | `boolean` | `false` | Whether to display error state |
+| `style` | `React.CSSProperties` | - | Custom styles |
+| `schema` | `IJsonSchema` | - | JSON Schema to constrain all value types |
+| `constantProps` | `ConstantInputProps` | - | Additional properties passed to DynamicValueInput |
+
+### Data Structure
+
+```typescript
+interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  onChange: (value?: Record<string, IFlowValue | undefined>) => void;
+  // ... other properties
+}
+
+type IFlowValue =
+  | IFlowConstantValue  // Constant value
+  | IFlowRefValue;     // Variable reference
+
+interface IFlowConstantValue {
+  type: 'constant';
+  content: any;           // Constant value
+  schema: IJsonSchema;  // Value type definition
+}
+
+interface IFlowRefValue {
+  type: 'ref';
+  content: string; // Variable path, e.g., "user.name"
+}
+```
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/inputs-values"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/inputs-values
+```
+
+### Directory Structure Explanation
+
+```
+inputs-values/
+├── index.tsx           # Main component implementation, containing InputsValues core logic
+├── types.ts            # Type definitions
+├── styles.tsx          # Style definitions using styled-components
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### Key-Value Pair Management
+Use the `useObjectList` Hook to manage the key-value pair list:
+
+```typescript
+const { list, updateKey, updateValue, remove, add } = useObjectList<IFlowValue | undefined>({
+  value,
+  onChange,
+  sortIndexKey: 'extra.index',
+});
+```
+
+#### Dynamic Value Input Integration
+Each value uses the `InjectDynamicValueInput` component for input:
+
+```typescript
+<InjectDynamicValueInput
+  value={item.value as IFlowConstantRefValue}
+  onChange={(v) => updateValue(item.id, v)}
+  schema={schema}
+  constantProps={constantProps}
+/>
+```
+
+#### Key Name Input
+Use the `BlurInput` component to implement key name input and validation:
+
+```typescript
+<BlurInput
+  value={item.key}
+  onChange={(v) => updateKey(item.id, v)}
+  placeholder={I18n.t('Input Key')}
+/>
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/i18n
+- `I18n`: Internationalization support
+
+#### Internal Components
+- `InjectDynamicValueInput`: Dynamic value input component
+- `BlurInput`: Blur input component
+- `useObjectList`: Object list management Hook
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[InputsValues Component] --> B[Render Key-Value Pair List]
+    B --> C[Each Key-Value Pair]
+    C --> D[Key Name Input Box]
+    C --> E[Value Input Component]
+    C --> F[Delete Button]
+
+    D --> G[User Input Key Name]
+    E --> H[User Input Value]
+    F --> I[User Delete Key-Value Pair]
+```

apps/docs/src/en/guide/materials/components/json-editor-with-variables.mdx

@@ -0,0 +1,175 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/json-editor-with-variables';
+
+# JsonEditorWithVariables
+
+JsonEditorWithVariables is an enhanced JSON editor that supports inserting variable references into JSON. Built on JsonCodeEditor, it integrates variable selectors and variable tag injection functionality, allowing users to reference variables in JSON strings using the `{{variable}}` syntax.
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { JsonEditorWithVariables } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="json_editor_with_variables" defaultValue={`{ "a": {{start_0.str}} }`}>
+        {({ field }) => (
+          <JsonEditorWithVariables
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### JSON with Variables Example
+
+```json
+{
+  "user_info": {
+    "name": "{{start_0.name}}",
+    "email": "{{start_0.email}}",
+  }
+}
+```
+
+### Variable Insertion
+
+Enter the `@` character in the editor to trigger the variable selector.
+
+After entering `@`, a list of available variables will be displayed. Selecting a variable will automatically insert it in the `{{variable.name}}` format.
+
+## API Reference
+
+### JsonEditorWithVariables Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | - | JSON string content |
+| `onChange` | `(value: string) => void` | - | Callback function when content changes |
+| `theme` | `'dark' \| 'light'` | `'light'` | Editor theme |
+| `placeholder` | `string` | - | Placeholder text |
+| `activeLinePlaceholder` | `string` | `'Press @ to select variable'` | Current line placeholder hint |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `options` | `Options` | - | CodeMirror configuration options |
+
+### Variable Syntax
+
+Use double curly brace syntax to reference variables in JSON strings:
+
+```json
+{
+  "key": "{{variable.path}}"
+}
+```
+
+Supported variable formats:
+- `{{start_0.name}}` - Simple variable
+- `{{start_0.address.city}}` - Nested property
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-editor-with-variables"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-editor-with-variables
+```
+
+### Directory Structure Explanation
+
+```
+json-editor-with-variables/
+├── index.tsx           # Lazy loading export file
+├── editor.tsx          # Main component implementation
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### Variable Syntax Parsing
+Parse variable references in JSON through regular expressions:
+
+```typescript
+const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+```
+
+#### Variable Selector Integration
+Integrate `EditorVariableTree` and `EditorVariableTagInject` extensions:
+
+```typescript
+<EditorVariableTree triggerCharacters={TRIGGER_CHARACTERS} />
+<EditorVariableTagInject />
+```
+
+#### Trigger Character
+Use `@` as the trigger character for variable selection:
+
+```typescript
+const TRIGGER_CHARACTERS = ['@'];
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/coze-editor
+- `JsonCodeEditor`: JSON code editor
+- `transformerCreator`: Syntax transformer creator
+- `EditorVariableTree`: Variable tree selector
+- `EditorVariableTagInject`: Variable tag injector
+- `Text`: Text processing tool
+
+#### @flowgram.ai/i18n
+- `I18n`: Internationalization support
+
+#### coze-editor-extensions Material
+- `EditorVariableTree`: Variable tree selection trigger
+- `EditorVariableTagInject`: Variable tag display
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[JsonEditorWithVariables Component] --> B[Render JsonCodeEditor]
+    B --> C[Load JSON Syntax Highlighting]
+    B --> D[Integrate Variable Extensions]
+
+    D --> E[EditorVariableTree]
+    D --> F[EditorVariableTagInject]
+
+    E --> G[Listen for @ Trigger]
+    F --> H[Process Variable Tags]
+
+    G --> I[Display Variable List]
+    I --> J[Select and Insert Variable]
+
+    H --> L[Render Variable Tag Styles]
+
+    J --> M[Update Editor Content]
+```
+
+#### Custom Trigger Characters
+Can extend support for more trigger characters:
+
+```typescript
+const CUSTOM_TRIGGERS = ['@', '#', '$'];
+
+<JsonCodeEditor
+  options={{
+    transformer: customTransformer,
+  }}
+>
+  <EditorVariableTree triggerCharacters={CUSTOM_TRIGGERS} />
+</JsonCodeEditor>
+```

apps/docs/src/en/guide/materials/components/json-schema-editor.mdx

@@ -0,0 +1,218 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/json-schema-editor';
+
+# JsonSchemaEditor
+
+JsonSchemaEditor is a visual JSON Schema editor that supports creating and editing complex JSON Schema structures. It provides a tree-structured interface to intuitively define properties of various types such as objects, arrays, strings, and numbers, supporting nested structures and required field marking.
+
+You can learn about the JsonSchema protocol through the following documentation:
+
+- [Json Schema Official Site](https://json-schema.org/learn)
+- [Json Schema Specification](https://json-schema.org/specification)
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { JsonSchemaEditor } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<IJsonSchema> name="json_schema" defaultValue={{ type: 'object' }}>
+        {({ field }) => (
+          <JsonSchemaEditor
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API Reference
+
+### JsonSchemaEditor Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `IJsonSchema` | `{ type: 'object' }` | JSON Schema object |
+| `onChange` | `(value: IJsonSchema) => void` | - | Callback function when schema changes |
+| `config` | `ConfigType` | `{}` | Editor configuration options |
+| `className` | `string` | - | Custom style class name |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+
+### ConfigType
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `placeholder` | `string` | `'Enter variable name'` | Property name placeholder |
+| `descTitle` | `string` | `'Description'` | Description field title |
+| `descPlaceholder` | `string` | `'Help LLM understand this property'` | Description field placeholder |
+| `defaultValueTitle` | `string` | `'Default Value'` | Default value field title |
+| `defaultValuePlaceholder` | `string` | `'Default value'` | Default value placeholder |
+| `addButtonText` | `string` | `'Add'` | Add button text |
+
+### Supported Types
+
+| Type | Description | Example |
+|------|-------------|---------|
+| `string` | String type | `"hello"` |
+| `number` | Number type | `42` |
+| `boolean` | Boolean type | `true` |
+| `object` | Object type | `{}` |
+| `array` | Array type | `[]` |
+| `null` | Null type | `null` |
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-schema-editor"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-schema-editor
+```
+
+### Directory Structure Explanation
+
+```
+json-schema-editor/
+├── index.tsx           # Main component implementation
+├── types.ts            # Type definitions
+├── hooks.ts            # State management hooks
+├── styles.ts           # Style components
+├── default-value.tsx   # Default value editor
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### Tree Structure Management
+The component uses recursive `PropertyEdit` components to render nested Schema structures:
+
+```typescript
+function PropertyEdit(props: {
+  value?: PropertyValueType;
+  config?: ConfigType;
+  onChange?: (value: PropertyValueType) => void;
+  onRemove?: () => void;
+  readonly?: boolean;
+  $level?: number;
+  $isLast?: boolean;
+})
+```
+
+#### Property Edit State Management
+Use the `usePropertiesEdit` hook to manage Schema CRUD operations:
+
+```typescript
+const {
+  propertyList,
+  onAddProperty,
+  onRemoveProperty,
+  onEditProperty
+} = usePropertiesEdit(value, onChangeProps);
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/json-schema
+- `IJsonSchema`: JSON Schema type definition
+
+#### @flowgram.ai/i18n
+- `I18n`: Internationalization support
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[JsonSchemaEditor] --> B[Render Root Property]
+    B --> C[PropertyEdit Component]
+    C --> D[Property Name Input]
+    C --> E[Type Selection]
+    C --> F[Required Mark]
+    C --> G[Action Buttons]
+
+    G --> H[Expand/Collapse Details]
+    G --> I[Add Child Property]
+    G --> J[Delete Property]
+
+    H --> K[Description Input]
+    H --> L[Default Value Setting]
+
+    I --> M[Recursively Render Child Properties]
+    M --> C
+```
+
+### Advanced Features
+
+#### Nested Structure Support
+Supports unlimited levels of nested objects and arrays:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "level1": {
+      "type": "object",
+      "properties": {
+        "level2": {
+          "type": "object",
+          "properties": {
+            "level3": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+#### Array Element Definition
+Supports defining Schema for array elements:
+
+```json
+{
+  "type": "array",
+  "items": {
+    "type": "object",
+    "properties": {
+      "id": { "type": "number" },
+      "name": { "type": "string" }
+    }
+  }
+}
+```
+
+#### Required Field Management
+Supports marking fields as required and automatically updating the `required` array:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "name": { "type": "string" },
+    "email": { "type": "string" }
+  },
+  "required": ["email"]
+}
+```
+
+### Use Cases
+
+- **API Documentation Generation**: Create request/response Schema for REST APIs
+- **Form Validation**: Define validation rules for form fields
+- **Data Modeling**: Create data structure models
+- **Configuration Management**: Define configuration file structures
+- **Code Generation**: Provide Schema input for code generators

apps/docs/src/en/guide/materials/components/prompt-editor-with-inputs.mdx

@@ -0,0 +1,191 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/prompt-editor-with-inputs';
+
+# PromptEditorWithInputs
+
+PromptEditorWithInputs is an enhanced prompt editor that integrates input variable management functionality. Built on PromptEditor, it additionally provides a tree-structured variable selector for inputs, enabling users to conveniently reference and manage input variables in prompt templates.
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { PromptEditorWithInputs } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <Field<IInputsValues | undefined>
+        name="inputsValues"
+        defaultValue={{
+          a: { type: 'constant', content: '123' },
+          b: { type: 'ref', content: ['start_0', 'obj'] },
+        }}
+      >
+        {({ field }) => (
+          <InputsValuesTree value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+      <br />
+      <Field<IInputsValues | undefined> name="inputsValues">
+        {({ field: inputsField }) => (
+          <Field<IFlowTemplateValue | undefined>
+            name="prompt_editor_with_inputs"
+            defaultValue={{
+              type: 'template',
+              content: '# Query \n {{b.obj2.num}}',
+            }}
+          >
+            {({ field }) => (
+              <PromptEditorWithInputs
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+                inputsValues={inputsField.value || {}}
+              />
+            )}
+          </Field>
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Inputs Insertion
+
+Enter the `@`, `{` characters in the editor to trigger the Inputs selector.
+
+After entering `@`, `{`, a list of available variables will be displayed. Selecting a variable will automatically insert it in the `{{inputs.path}}` format.
+
+## API Reference
+
+### PromptEditorWithInputs Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `{ type: 'template', content: string }` | - | Prompt template content |
+| `inputsValues` | `IInputsValues` | `{}` | Input variable key-value pairs |
+| `onChange` | `(value: { type: 'template', content: string }) => void` | - | Callback function when content changes |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `placeholder` | `string` | - | Placeholder text |
+| `activeLinePlaceholder` | `string` | - | Current line placeholder hint |
+| `hasError` | `boolean` | `false` | Whether to display error state |
+| `disableMarkdownHighlight` | `boolean` | `false` | Whether to disable Markdown highlighting |
+| `options` | `Options` | - | CodeMirror configuration options |
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor-with-inputs"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/prompt-editor-with-inputs
+```
+
+### Directory Structure Explanation
+
+```
+prompt-editor-with-inputs/
+├── index.tsx           # Lazy loading export file
+├── editor.tsx          # Main component implementation
+└── README.md          # Component documentation
+
+prompt-editor/
+├── index.tsx           # Basic prompt editor export
+├── editor.tsx          # Basic prompt editor implementation
+├── types.ts            # Type definitions
+├── styles.ts           # Style components
+└── extensions/         # Editor extensions
+    ├── markdown.tsx    # Markdown highlighting
+    ├── language-support.tsx # Language support
+    └── jinja.tsx       # Jinja template highlighting
+```
+
+### Core Implementation Explanation
+
+#### Input Variable Integration
+PromptEditorWithInputs extends the basic PromptEditor, adding an input variable selector:
+
+```typescript
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <EditorInputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}
+```
+
+#### Basic Prompt Editor
+The basic PromptEditor provides complete template editing functionality:
+
+```typescript
+<PromptEditor
+  value={field.value}
+  onChange={(value) => field.onChange(value)}
+  placeholder="Enter prompt template..."
+  activeLinePlaceholder="Press @ to insert variable"
+/>
+```
+
+#### Editor Extensions
+The basic editor integrates multiple extensions:
+
+- **MarkdownHighlight**: Provides Markdown syntax highlighting
+- **LanguageSupport**: Supports multiple programming languages
+- **JinjaHighlight**: Jinja2 template syntax highlighting
+
+#### Variable Selector
+The `EditorInputsTree` component provides a tree-structured variable selector:
+
+```typescript
+<EditorInputsTree inputsValues={inputsValues} />
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/coze-editor/react
+- `Renderer`: Editor renderer
+- `EditorProvider`: Editor provider
+- `ActiveLinePlaceholder`: Active line placeholder
+- `InferValues`: Type inference tool
+
+#### @flowgram.ai/coze-editor/preset-prompt
+- `preset`: Prompt editor preset configuration
+- `EditorAPI`: Editor API interface
+
+#### @flowgram.ai/shared
+- `IInputsValues`: Input variable type definition
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[PromptEditorWithInputs] --> B[Pass inputsValues]
+    A --> C[Render PromptEditor]
+    C --> D[Load preset configuration]
+    D --> E[Integrate extension plugins]
+
+    E --> F[MarkdownHighlight]
+    E --> G[LanguageSupport]
+    E --> H[JinjaHighlight]
+
+    F --> I[Syntax highlighting]
+    G --> J[Language support]
+    H --> K[Template syntax]
+
+    B --> L[EditorInputsTree]
+    L --> M[Input tree parsing + display]
+    M --> N[Variable selection]
+    N --> O[Insert variable]
+
+    O --> P[Update template content]
+```

apps/docs/src/en/guide/materials/components/prompt-editor-with-variables.mdx

@@ -0,0 +1,165 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/prompt-editor-with-variables';
+
+# PromptEditorWithVariables
+
+PromptEditorWithVariables is an enhanced prompt editor that integrates variable management functionality. Built on PromptEditor, it provides a variable tree selector and variable tag injection, enabling users to conveniently reference and manage variables in prompt templates.
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/prompt-editor-with-variables.png" alt="Component" style={{ width: '50%' }} />
+  *Prompts in LLM_3 and LLM_4 reference loop batch processing variables*
+</div>
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { PromptEditorWithVariables } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <Field<any> name="prompt_template" defaultValue="Hello {{user.name}}, your balance is {{user.balance}}">
+        {({ field }) => (
+          <PromptEditorWithVariables
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Variable Insertion
+
+Enter the `@`, `{` characters in the editor to trigger the variable selector.
+
+After entering `@`, `{`, a list of available variables will be displayed. Selecting a variable will automatically insert it in the `{{variable.path}}` format.
+
+## API Reference
+
+### PromptEditorWithVariables Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `{ type: 'template', content: string }` | - | Prompt template content |
+| `onChange` | `(value: { type: 'template', content: string }) => void` | - | Callback function when content changes |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `placeholder` | `string` | - | Placeholder text |
+| `activeLinePlaceholder` | `string` | - | Current line placeholder hint |
+| `hasError` | `boolean` | `false` | Whether to display error state |
+| `disableMarkdownHighlight` | `boolean` | `false` | Whether to disable Markdown highlighting |
+| `options` | `Options` | - | CodeMirror configuration options |
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor-with-variables"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/prompt-editor-with-variables
+```
+
+### Directory Structure Explanation
+
+```
+prompt-editor-with-variables/
+├── index.tsx           # Lazy loading export file
+├── editor.tsx          # Main component implementation
+└── README.md          # Component documentation
+
+prompt-editor/
+├── index.tsx           # Basic prompt editor export
+├── editor.tsx          # Basic prompt editor implementation
+├── types.ts            # Type definitions
+├── styles.ts           # Style components
+└── extensions/         # Editor extensions
+    ├── markdown.tsx    # Markdown highlighting
+    ├── language-support.tsx # Language support
+    └── jinja.tsx       # Jinja template highlighting
+```
+
+### Core Implementation Explanation
+
+#### Variable Selector Integration
+PromptEditorWithVariables extends the basic PromptEditor, adding variable management functionality:
+
+```typescript
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </PromptEditor>
+  );
+}
+```
+
+#### Variable Tree Selector
+The `EditorVariableTree` component provides a tree-structured variable selector:
+
+- Supports triggering variable selection with `@`
+- Supports tree display of nested variables
+- Supports searching and filtering variables
+- Supports variable type icon display
+
+#### Variable Tag Injection
+The `EditorVariableTagInject` component is responsible for variable tag rendering and management:
+
+- Variable tag style rendering
+- Variable tag interaction handling
+- Variable tag validation and error prompts
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/coze-editor/react
+- `Renderer`: Editor renderer
+- `EditorProvider`: Editor provider
+- `ActiveLinePlaceholder`: Active line placeholder
+- `InferValues`: Type inference tool
+
+#### @flowgram.ai/coze-editor/preset-prompt
+- `preset`: Prompt editor preset configuration
+- `EditorAPI`: Editor API interface
+
+#### coze-editor-extensions materials
+- `EditorVariableTree`: Variable tree selection trigger
+- `EditorVariableTagInject`: Variable tag display
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[PromptEditorWithVariables] --> B[Render PromptEditor]
+    B --> C[Load preset configuration]
+    C --> D[Integrate extension plugins]
+
+    D --> E[MarkdownHighlight]
+    D --> F[LanguageSupport]
+    D --> G[JinjaHighlight]
+
+    E --> H[Syntax highlighting]
+    F --> I[Language support]
+    G --> J[Template syntax]
+
+    A --> K[Integrate variable extensions]
+    K --> L[EditorVariableTree]
+    K --> M[EditorVariableTagInject]
+
+    L --> N[Variable selector]
+    M --> O[Variable tag rendering]
+
+    N --> P[Variable selection]
+    P --> Q[Insert variable]
+
+    Q --> R[Update template content]
+```

apps/docs/src/en/guide/materials/components/type-selector.mdx

@@ -0,0 +1,112 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/type-selector';
+
+# TypeSelector
+
+TypeSelector is a type selector component used for selecting JSON Schema types in forms. It supports both basic types and composite types (such as array types).
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/type-selector.png" alt="TypeSelector Component" style={{ width: '50%' }} />
+</div>
+
+## Demo
+
+### Basic Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { TypeSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Partial<IJsonSchema> | undefined> name="type_selector" defaultValue={{ type: 'string' }}>
+        {({ field }) => (
+          <TypeSelector value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API Reference
+
+### TypeSelector Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `Partial<IJsonSchema>` | - | Selected type value, conforms to JSON Schema format |
+| `onChange` | `(value?: Partial<IJsonSchema>) => void` | - | Callback function when type selection changes |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `disabled` | `boolean` | `false` | Whether it's disabled (deprecated, use readonly instead) |
+| `style` | `React.CSSProperties` | - | Custom styles |
+
+### Type Format Description
+
+TypeSelector supports the following JSON Schema type formats:
+
+- **Basic types**: `{ type: 'string' }`, `{ type: 'number' }`, `{ type: 'boolean' }`, etc.
+- **Array types**: `{ type: 'array', items: { type: 'string' } }`
+- **Nested arrays**: `{ type: 'array', items: { type: 'array', items: { type: 'string' } } }`
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/type-selector"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/type-selector
+```
+
+### Directory Structure Explanation
+
+```
+type-selector/
+├── index.tsx           # Main component implementation, contains TypeSelector core logic
+└── README.md          # Component documentation
+```
+
+### Core Implementation Explanation
+
+#### getTypeSelectValue
+Converts JSON Schema object to array format required by Cascader component:
+
+```typescript
+// Input: { type: 'array', items: { type: 'string' } }
+// Output: ['array', 'string']
+```
+
+#### parseTypeSelectValue
+Converts Cascader component's array value back to JSON Schema object:
+
+```typescript
+// Input: ['array', 'string']
+// Output: { type: 'array', items: { type: 'string' } }
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/json-schema
+- `useTypeManager()`: Get type manager for handling JSON Schema type display and validation
+- `IJsonSchema`: JSON Schema type definition
+- `JsonSchemaTypeManager`: Type manager class, provides type registration, icon display, and other features
+
+### Overall Process
+
+```mermaid
+graph LR
+    A[TypeSelector Component] --> B[useTypeManager Hook]
+    B --> C[Get type registry]
+    C --> D[Generate Cascader options]
+    D --> E[Render cascader selector]
+    E --> F[User selects type]
+    F --> G[onChange callback]
+    G --> H[Update JSON Schema value]
+```

apps/docs/src/en/guide/materials/components/variable-selector.mdx

@@ -0,0 +1,165 @@
+import { SourceCode } from '@theme';
+import { BasicStory, FilterSchemaStory, CustomFilterStory } from 'components/form-materials/components/variable-selector';
+
+# VariableSelector
+
+VariableSelector is a component for selecting variables in the current scope, with filtering capabilities based on variable types.
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/variable-selector.png" alt="VariableSelector Component" style={{ width: '50%' }} />
+</div>
+
+## Demo
+
+### Direct Usage
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string[] | undefined> name="variable_selector">
+        {({ field }) => (
+          <VariableSelector value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Filter Variable Types
+
+<FilterSchemaStory />
+
+```tsx pure title="form-meta.tsx"
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string[] | undefined> name="variable_selector">
+        {({ field }) => (
+          <VariableSelector
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            includeSchema={{ type: 'string' }}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Custom Filter Logic
+
+<CustomFilterStory />
+
+```tsx pure title="form-meta.tsx"
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <VariableSelectorProvider skipVariable={(variable) => variable?.key === 'str'}>
+      <FormHeader />
+      <Field<string[] | undefined> name="variable_selector">
+        {({ field }) => (
+          <VariableSelector
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </VariableSelectorProvider>
+  ),
+}
+```
+
+## API Reference
+
+### VariableSelector Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string[]` | - | Selected variable path array |
+| `onChange` | `(value?: string[]) => void` | - | Callback function when variable selection changes |
+| `config` | `VariableSelectorConfig` | `{}` | Configuration object |
+| `includeSchema` | `IJsonSchema \| IJsonSchema[]` | - | Variable type inclusion filter conditions |
+| `excludeSchema` | `IJsonSchema \| IJsonSchema[]` | - | Variable type exclusion filter conditions |
+| `readonly` | `boolean` | `false` | Whether it's read-only mode |
+| `hasError` | `boolean` | `false` | Whether to display error state |
+| `style` | `React.CSSProperties` | - | Custom styles |
+| `triggerRender` | `(props: TriggerRenderProps) => React.ReactNode` | - | Custom trigger renderer |
+
+### VariableSelectorConfig
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `placeholder` | `string` | `'Select variable'` | Placeholder text |
+| `notFoundContent` | `string` | `'Not defined'` | Content displayed when variable is not found |
+
+### VariableSelectorProvider Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `skipVariable` | `(variable?: BaseVariableField) => boolean` | - | Custom variable filter function |
+| `children` | `React.ReactNode` | - | Child components |
+
+## Source Code Guide
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector"
+/>
+
+Use CLI command to copy source code locally:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/variable-selector
+```
+
+### Directory Structure Explanation
+
+```
+variable-selector/
+├── index.tsx           # Main component implementation, contains VariableSelector core logic
+├── context.tsx         # Provides `VariableSelectorContext` for global variable filtering configuration
+├── use-variable-tree.tsx # Custom Hook for processing variable tree data transformation and filtering
+├── styles.tsx          # Style definitions using styled-components
+└── README.md          # Component documentation
+```
+
+### Overall Process
+
+```mermaid
+graph TD
+    A[VariableSelector Component] ---> useVariableTree
+
+    K[VariableSelectorProvider] --> L[Global filter configuration]
+    subgraph useVariableTree
+      C[useAvailableVariables] --> D[Get all available variables]
+      D --> F[Apply filter conditions]
+      F --> G[Generate tree structure]
+      M[includeSchema/excludeSchema] --> F
+    end
+
+    G --> H[Render TreeSelect]
+    L --> F
+```
+
+### Flowgram APIs Used
+
+#### @flowgram.ai/variable-core
+- `useAvailableVariables()`: Get all available variables in the current scope
+- `BaseVariableField`: Basic variable field type, includes variable key, type, metadata, etc.
+
+#### @flowgram.ai/json-schema
+- `useTypeManager()`: Get type manager for handling variable type display and validation
+- `IJsonSchema`: JSON Schema type definition for variable type validation
+- `JsonSchemaUtils`: JSON Schema utility class, provides type matching and conversion functions

apps/docs/src/en/guide/materials/introduction.mdx

@@ -0,0 +1,50 @@
+import { PackageManagerTabs } from '@theme';
+
+# Getting Started
+
+## How to Use?
+
+### Use via Package Import
+
+Official form materials can be used directly through package import:
+
+<PackageManagerTabs command="install @flowgram.ai/form-materials" />
+
+```tsx
+import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
+```
+
+
+### Add Material Source Code via CLI
+
+
+If your business has customization requirements for components (e.g., changing text, styles, business logic), it is recommended to **add material source code to the project via CLI for customization**:
+
+```bash
+npx @flowgram.ai/cli@latest materials
+```
+
+After running, the CLI will prompt the user to select materials to add to the project:
+
+```console
+? Select one material to add: (Use arrow keys)
+❯ components/json-schema-editor
+  components/type-selector
+  components/variable-selector
+```
+
+Users can also directly add source code for specified materials via CLI:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-schema-editor
+```
+
+After the CLI runs successfully, the relevant materials will be automatically added to the `src/form-materials` directory under the current project.
+
+:::warning Notes
+
+1. Official materials are currently implemented based on [Semi Design](https://semi.design/). If your business has underlying component library requirements, you can replace them by copying the source code via CLI
+2. Some materials depend on third-party npm libraries, which will be automatically installed when the CLI runs
+3. Some materials depend on other official materials, and the source code of these dependent materials will be added to the project together when the CLI runs
+
+:::

apps/docs/src/zh/guide/_meta.json

@@ -9,37 +9,50 @@
   {
     "type": "dir",
     "name": "free-layout",
-    "label": "自由布局"
+    "label": "自由布局",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "fixed-layout",
-    "label": "固定布局"
+    "label": "固定布局",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "form",
-    "label": "表单"
+    "label": "表单",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "variable",
-    "label": "变量"
+    "label": "变量",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "materials",
+    "label": "官方物料库 (WIP)",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "plugin",
-    "label": "插件"
+    "label": "插件",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "advanced",
-    "label": "进阶"
+    "label": "进阶",
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "concepts",
-    "label": "概念"
+    "label": "概念",
+    "collapsed": true
   },
   {
     "type": "dir",

apps/docs/src/zh/guide/form/form-materials.mdx

@@ -5,187 +5,11 @@ import { MaterialDisplay } from '../../../../components/materials';
 
 ## 如何使用？
 
-### 通过包引用使用
-
-官方表单物料可以直接通过包引用使用：
-
-<PackageManagerTabs command="install @flowgram.ai/form-materials" />
-
-```tsx
-import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
-```
-
-
-### 通过 CLI 添加物料源代码使用
-
-
-如果业务对组件有定制诉求（如：更改文案、样式、业务逻辑），推荐 **通过 CLI 将物料源代码添加到项目中进行定制**：
-
-```bash
-npx @flowgram.ai/form-materials@latest
-```
-
-运行后 CLI 会提示用户选择要添加到项目中的物料:
-
-```console
-? Select one material to add: (Use arrow keys)
-❯ components/json-schema-editor
-  components/type-selector
-  components/variable-selector
-```
-
-使用者也可以直接在 CLI 中添加指定物料的源代码:
-
-```bash
-npx @flowgram.ai/form-materials@latest components/json-schema-editor
-```
-
-CLI 运行成功后，相关物料会自动添加到当前项目下的 `src/form-materials` 目录下
-
-:::warning 注意事项
-
-1. 官方物料目前底层基于 [Semi Design](https://semi.design/) 实现，业务如果有底层组件库的诉求，可以通过 CLI 复制源码进行替换
-2. 一些物料会依赖一些第三方 npm 库，这些库会在 CLI 运行时自动安装
-3. 一些物料会依赖另外一些官方物料，这些被依赖的物料源代码在 CLI 运行时会一起被添加到项目中去
-
-:::
+详见：[物料快速入门](/guide/materials/introduction.html)
 
 ## 当前支持的 Component 物料
 
-### TypeSelector
-
-<MaterialDisplay
-  imgs={['/materials/type-selector.png']}
-  filePath="components/type-selector/index.tsx"
-  exportName="TypeSelector"
->
-  TypeSelector 用于变量类型选择
-</MaterialDisplay>
-
-
-### VariableSelector
-
-<MaterialDisplay
-  imgs={['/materials/variable-selector.png']}
-  filePath="components/variable-selector/index.tsx"
-  exportName="VariableSelector"
->
-  VariableSelector 用于展示变量树，并从变量树中选择单个变量
-</MaterialDisplay>
-
-
-### JsonSchemaEditor
-
-<MaterialDisplay
-  imgs={['/materials/json-schema-editor.png']}
-  filePath="components/json-schema-editor/index.tsx"
-  exportName="JsonSchemaEditor"
->
-  JsonSchemaEditor 用于可视化编辑 [JsonSchema](https://json-schema.org/)
-
-  常用于可视化配置节点的输出变量
-</MaterialDisplay>
-
-
-### DynamicValueInput
-
-<MaterialDisplay
-  imgs={['/materials/dynamic-value-input.png']}
-  filePath="components/dynamic-value-input/index.tsx"
-  exportName="DynamicValueInput"
->
-  DynamicValueInput 用于值（常量值 + 变量值）的配置
-</MaterialDisplay>
-
-### JsonEditorWithVariables
-
-<MaterialDisplay
-  imgs={['/materials/json-editor-with-variables.png']}
-  filePath="components/json-editor-with-variables/index.tsx"
-  exportName="JsonEditorWithVariables"
->
-  一个支持变量的 JSON 编辑器
-</MaterialDisplay>
-
-### CodeEditor
-
-<MaterialDisplay
-  imgs={['/materials/code-editor.png']}
-  filePath="components/code-editor/index.tsx"
-  exportName="CodeEditor"
->
-  一个代码编辑器，目前只支持 TypeScript（JavaScript）
-</MaterialDisplay>
-
-
-
-
-### ConditionRow
-
-<MaterialDisplay
-  imgs={[{ src: '/materials/condition-row.png', caption: '第一个条件为 query 变量包含 Hello Flow，第二个条件为 enable 变量为 true' }]}
-  filePath="components/condition-row/index.tsx"
-  exportName="ConditionRow"
->
-  ConditionRow 用于 **一行** 条件判断的配置
-</MaterialDisplay>
-
-### PromptEditorWithVariables
-
-<MaterialDisplay
-  imgs={[{ src: '/materials/prompt-editor-with-variables.png', caption: 'LLM_3 和 LLM_4 的提示词中引用了循环的批处理变量' }]}
-  filePath="components/prompt-editor-with-variables/index.tsx"
-  exportName="PromptEditorWithVariables"
->
-  PromptEditorWithVariables 用于支持变量配置的 Prompt 编辑器。
-
-  下面是一个 Prompt 编辑器的配置示例，其中 `query` 变量为字符串类型，`enable` 变量为布尔类型：
-  ```typescript
-  {
-    type: "template",
-    content: "#User Input:\nquery:{{start_0.query}}\nenable:{{start_0.enable}}"
-  }
-  ```
-</MaterialDisplay>
-
-### PromptEditorWithInputs
-
-<MaterialDisplay
-  imgs={['/materials/prompt-editor-with-inputs.png']}
-  filePath="components/prompt-editor-with-inputs/index.tsx"
-  exportName="PromptEditorWithInputs"
->
-  一个带输入变量的 Prompt 编辑器，使用时需传入 inputsValues 的值：
-```typescript
-<PromptEditorWithInputs
-  inputsValues={{
-    a: { type: 'constant', content: "test" },
-    b: { type: 'ref', content: ["a", "b", "c"] }
-  }}
-/>
-```
-</MaterialDisplay>
-
-### InputsValues
-
-<MaterialDisplay
-  imgs={['/materials/inputs-values.png']}
-  filePath="components/inputs-values/index.tsx"
-  exportName="InputsValues"
->
-  键值对输入，可以配置 `infer-inputs-plugin` 物料实现 inputs 类型推导
-</MaterialDisplay>
-
-### BatchOutputs
-
-<MaterialDisplay
-  imgs={['/materials/batch-outputs.png']}
-  filePath="components/batch-outputs/index.tsx"
-  exportName="BatchOutputs"
->
-  循环输出，需要配置 `batch-outputs-plugin` 物料实现循环输出作用域限制 + 输出变量自动联动推导
-</MaterialDisplay>
-
+文档已迁移到 [组件](/guide/materials/components/type-selector.html)
 
 ## 当前支持的 Effect 物料
 

apps/docs/src/zh/guide/materials/_meta.json

@@ -0,0 +1,10 @@
+[
+  "introduction",
+  "cli",
+  {
+    "type": "dir",
+    "name": "components",
+    "label": "组件",
+    "collapsed": true
+  }
+]

apps/docs/src/zh/guide/materials/cli.mdx

@@ -0,0 +1,132 @@
+# 物料管理 CLI
+
+Flowgram 提供了专门的 CLI 命令行工具，帮助你管理项目中的官方物料。
+
+## 安装
+
+可使用 npx 直接运行：
+
+```bash
+npx @flowgram.ai/cli@latest [command]
+```
+
+## 同步物料到项目
+
+使用 `materials` 命令将官方物料的源代码添加到你的项目中进行定制：
+
+```bash
+# 交互式选择物料
+npx @flowgram.ai/cli@latest materials
+
+# 直接指定物料
+npx @flowgram.ai/cli@latest materials components/json-schema-editor
+
+# 指定多个物料（逗号分隔）
+npx @flowgram.ai/cli@latest materials components/variable-selector,effect/provideJsonSchemaOutputs
+
+# 选择多个物料（交互式多选）
+npx @flowgram.ai/cli@latest materials --select-multiple
+```
+
+运行后，CLI 会提示你选择要添加到项目中的物料：
+
+```console
+🚀 Welcome to @flowgram.ai form-materials CLI!
+📁 Project: /path/to/your/project
+🎯 Flowgram Version: 1.0.0
+  - Target material root: /path/to/your/project/src/form-materials
+
+🚀 The following materials will be added to your project
+📦 components/json-schema-editor
+📦 components/variable-selector
+📦 effect/provideJsonSchemaOutputs
+
+✅ These npm dependencies is added to your package.json
+- @semi-design/icons
+- lodash-es
+- classnames
+
+➡️ Please run npm install to install dependencies
+```
+
+### 高级选项
+
+`materials` 命令支持以下选项：
+
+| 选项 | 说明 | 示例 |
+|------|------|------|
+| `--refresh-project-imports` | 刷新项目中对复制物料的导入路径 | `npx @flowgram.ai/cli@latest materials components/json-schema-editor --refresh-project-imports` |
+| `--target-material-root-dir <dir>` | 指定物料复制的目标目录 | `npx @flowgram.ai/cli@latest materials --target-material-root-dir src/custom-materials` |
+| `--select-multiple` | 启用交互式多选模式 | `npx @flowgram.ai/cli@latest materials --select-multiple` |
+
+## 查找已使用的物料
+
+使用 `find-used-materials` 命令分析项目代码，找出所有已使用的官方物料：
+
+```bash
+npx @flowgram.ai/cli@latest find-used-materials
+```
+
+输出示例：
+
+```console
+🚀 Welcome to @flowgram.ai form-materials CLI!
+📁 Project: /path/to/your/project
+🎯 Flowgram Version: 1.0.0
+
+👀 The exports of components/json-schema-editor is JsonSchemaEditor,JsonSchemaEditorProps
+👀 The exports of components/variable-selector is VariableSelector,VariableSelectorProps
+
+👀 Searching src/components/MyForm.tsx
+🔍 import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
+import components/json-schema-editor by JsonSchemaEditor
+
+👀 Searching src/pages/Settings.tsx
+🔍 import { VariableSelector } from '@flowgram.ai/form-materials'
+import components/variable-selector by VariableSelector
+
+📦 All used materials:
+components/json-schema-editor,components/variable-selector
+```
+
+这个命令会：
+- 扫描项目中所有的 TypeScript 文件
+- 分析从 `@flowgram.ai/form-materials` 的导入语句
+- 识别出使用的具体物料
+- 输出详细的使用位置信息
+
+## Case Run Down
+
+### 将项目中所有使用到的官方物料，代码同步到项目的 src/custom-materials 目录
+
+1. 使用 `find-used-materials` 命令查看项目中使用到的官方物料。
+
+```bash
+npx @flowgram.ai/cli@latest find-used-materials
+```
+
+命令运行后，会输出项目中使用到的官方物料列表。
+
+```console
+📦 All used materials:
+components/json-schema-editor,components/variable-selector
+```
+
+2. 使用 `materials` 命令将这些物料的源代码添加到项目的 src/custom-materials 目录。
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-schema-editor,components/variable-selector \
+  --target-material-root-dir src/custom-materials \
+  --refresh-project-imports
+```
+
+- `--refresh-project-imports` 选项会刷新项目中对复制物料的导入路径，确保使用的是最新的定制版本。
+- `--target-material-root-dir src/custom-materials` 选项指定了物料复制的目标目录为 src/custom-materials。
+
+
+## 常见问题
+
+### Q: CLI 添加后找不到新增的依赖项目？
+A: 请检查是否运行了 `npm install` 安装新添加的依赖。
+
+

apps/docs/src/zh/guide/materials/components/_meta.json

@@ -0,0 +1,12 @@
+[
+  "type-selector",
+  "json-schema-editor",
+  "variable-selector",
+  "dynamic-value-input",
+  "condition-row",
+  "inputs-values",
+  "code-editor",
+  "json-editor-with-variables",
+  "prompt-editor-with-variables",
+  "prompt-editor-with-inputs"
+]

apps/docs/src/zh/guide/materials/components/code-editor.mdx

@@ -0,0 +1,178 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/code-editor';
+
+# CodeEditor
+
+CodeEditor 是一个功能强大的代码编辑器组件，基于 CodeMirror 6 构建，支持多种编程语言的语法高亮和智能提示。它提供了 TypeScript、Python、SQL、Shell、JSON 等语言的专用编辑器版本。
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { CodeEditor } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string | undefined> name="code_editor">
+        {({ field }) => (
+          <CodeEditor
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            languageId="typescript"
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 不同语言的专用编辑器
+
+:::warning 注意事项
+单独引入对应语言的专用编辑器，可以减少打包所需要的依赖
+:::
+
+```tsx
+// TypeScript 编辑器
+import { TypeScriptCodeEditor } from '@flowgram.ai/form-materials';
+
+// Python 编辑器
+import { PythonCodeEditor } from '@flowgram.ai/form-materials';
+
+// SQL 编辑器
+import { SQLCodeEditor } from '@flowgram.ai/form-materials';
+
+// Shell 编辑器
+import { ShellCodeEditor } from '@flowgram.ai/form-materials';
+
+// JSON 编辑器
+import { JsonCodeEditor } from '@flowgram.ai/form-materials';
+```
+
+
+## API 参考
+
+### CodeEditor Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `string` | - | 编辑器内容 |
+| `onChange` | `(value: string) => void` | - | 内容变化时的回调函数 |
+| `languageId` | `'python' \| 'typescript' \| 'shell' \| 'json' \| 'sql'` | - | 代码语言类型 |
+| `theme` | `'dark' \| 'light'` | `'light'` | 编辑器主题 |
+| `placeholder` | `string` | - | 占位符文本 |
+| `activeLinePlaceholder` | `string` | - | 当前行的占位提示 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `mini` | `boolean` | `false` | 是否为迷你模式 |
+| `options` | `Options` | - | CodeMirror 配置选项 |
+
+### 语言支持
+
+CodeEditor 支持以下语言：
+
+- **typescript**: TypeScript/JavaScript
+- **python**: Python
+- **sql**: SQL
+- **shell**: Shell 脚本
+- **json**: JSON
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/code-editor"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/code-editor
+```
+
+### 目录结构讲解
+
+```
+code-editor/
+├── index.tsx           # 统一导出文件
+├── editor.tsx          # 基础编辑器组件 BaseCodeEditor
+├── editor-all.tsx      # 全功能编辑器（已废弃）
+├── editor-ts.tsx       # TypeScript 编辑器
+├── editor-python.tsx   # Python 编辑器
+├── editor-sql.tsx      # SQL 编辑器
+├── editor-shell.tsx    # Shell 编辑器
+├── editor-json.tsx     # JSON 编辑器
+├── factory.tsx         # 编辑器工厂函数
+├── theme/              # 主题配置
+│   ├── dark.ts         # 暗色主题
+│   ├── light.ts        # 亮色主题
+│   └── index.ts        # 主题导出
+├── utils.ts            # 工具函数
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### BaseCodeEditor
+
+基础编辑器组件，对 coze-editor 的简单封装，提供了基础的语法高亮、主题切换、迷你模式、只读模式等功能。
+
+:::warning 注意事项
+BaseCodeEditor 不包含任何语言逻辑的加载，语言逻辑是在专用编辑器中实现的。
+:::
+
+
+#### 专用编辑器
+每种语言都有对应的专用编辑器，通过动态导入实现按需加载：
+
+```typescript
+export const loadTypescriptLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-typescript').then((module) => {
+    // TypeScript 语言加载逻辑
+  });
+
+export const TypeScriptCodeEditor = CodeEditorFactory<true>(
+  loadTypescriptLanguage,
+  {
+    displayName: 'TypeScriptCodeEditor',
+    fixLanguageId: 'typescript',
+  }
+);
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/coze-editor
+
+@flowgram.ai/coze-editor 是一个基于 CodeMirror 6 构建的代码编辑器组件。源代码见：[coze-dev/rush-dev](https://github.com/coze-dev/rush-arch/tree/main/packages/text-editor)
+
+- `createRenderer`: 创建编辑器
+- `preset-code`: 代码编辑器预设配置
+- `EditorProvider`: 编辑器上下文提供者
+- `ActiveLinePlaceholder`: 当前行占位符组件
+
+#### @codemirror/view
+- `EditorView`: CodeMirror 编辑器视图
+
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[CodeEditor 组件] --> B[选择 languageId \n 或者专用编辑器]
+    B --React.lazy--> C[根据 languageId \n 加载语言所需要的依赖]
+    C --> D[BaseCodeEditor]
+    D --> E[CozeEditor 编辑器]
+    E --> F[语法高亮]
+    E --> G[主题应用]
+    E --> H[事件处理]
+```
+
+### 性能优化
+
+- **按需加载**: 每种语言按需加载
+- **专用编辑器**: 推荐使用 XXXCodeEditor 而非通用 CodeEditor，以优化打包速度

apps/docs/src/zh/guide/materials/components/condition-row.mdx

@@ -0,0 +1,184 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/condition-row';
+
+# ConditionRow
+
+ConditionRow 是一个条件表达式组件，用于构建变量比较逻辑。它支持选择变量、选择比较操作符、输入比较值，能够根据变量类型自动适配可用的操作符和值类型。
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/condition-row.png" alt="Condition Row 组件" style={{ width: '50%' }} />
+  *第一个条件为 query 变量包含 Hello Flow，第二个条件为 enable 变量为 true*
+</div>
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { ConditionRow } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any | undefined> name="condition_row">
+        {({ field }) => (
+          <ConditionRow value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 带初始值的条件行
+
+```tsx
+<ConditionRow
+  value={{
+    left: { type: 'ref', content: 'user.age' },
+    operator: 'gt',
+    right: { type: 'constant', content: 18, schema: { type: 'number' } }
+  }}
+  onChange={(value) => console.log('条件变化:', value)}
+/>
+```
+
+
+## API 参考
+
+### ConditionRow Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `ConditionRowValueType` | - | 条件表达式值 |
+| `onChange` | `(value?: ConditionRowValueType) => void` | - | 条件变化时的回调函数 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `ruleConfig` | `{ ops?: ConditionOpConfigs; rules?: Record<string, IConditionRule> }` | - | 操作符和规则配置 |
+| `style` | `React.CSSProperties` | - | 自定义样式 |
+
+### ConditionRowValueType
+
+```typescript
+interface ConditionRowValueType {
+  left?: IFlowRefValue;           // 左侧变量引用
+  operator?: string;            // 操作符
+  right?: IFlowConstantRefValue; // 右侧常量值
+}
+
+interface IFlowRefValue {
+  type: 'ref';
+  content: string; // 变量路径，如 "user.name"
+}
+
+interface IFlowConstantRefValue {
+  type: 'constant';
+  content: any;           // 常量值
+  schema: IJsonSchema;  // 值的类型定义
+}
+```
+
+### 支持的比较操作符
+
+根据左侧变量的类型，ConditionRow 会自动提供相应的比较操作符：
+
+- **字符串类型**: equals, not_equals, contains, not_contains, starts_with, ends_with
+- **数字类型**: equals, not_equals, gt, gte, lt, lte
+- **布尔类型**: equals, not_equals
+- **数组类型**: contains, not_contains, empty, not_empty
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/condition-row"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/condition-row
+```
+
+### 目录结构讲解
+
+```
+condition-row/
+├── index.tsx           # 主组件实现，包含 ConditionRow 核心逻辑
+├── types.ts            # 类型定义
+├── styles.tsx          # 样式定义，使用 styled-components
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### 变量类型推断
+组件会根据左侧选择的变量自动推断其 JSON Schema 类型：
+
+```typescript
+const leftSchema = useMemo(() => {
+  if (!variable) return undefined;
+  return JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+}, [variable?.type?.hash]);
+```
+
+#### 操作符动态适配
+通过 `useCondition` Hook 根据左侧变量类型获取可用的操作符：
+
+```typescript
+const { rule, opConfig, opOptionList, targetSchema } = useCondition({
+  leftSchema,
+  operator,
+});
+```
+
+#### 右侧值类型自动匹配
+右侧输入框的类型会根据操作符和左侧变量类型自动匹配：
+
+```typescript
+targetSchema ? (
+  <InjectDynamicValueInput
+    schema={targetSchema}
+    // ... 其他属性
+  />
+) : (
+  // 占位输入框
+)
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/json-schema
+- `JsonSchemaUtils.astToSchema()`: 将 AST 类型转换为 JSON Schema
+- `IJsonSchema`: JSON Schema 类型定义
+
+#### @flowgram.ai/variable-core
+- `useScopeAvailable()`: 获取当前作用域的可用变量
+
+#### @flowgram.ai/i18n
+- `I18n`: 国际化支持
+
+#### 内部组件
+- [`InjectVariableSelector`](./variable-selector): 变量选择器
+- [`InjectDynamicValueInput`](./dynamic-value-input): 动态值输入组件
+- `useCondition`: 条件逻辑 Hook
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[ConditionRow 组件] --> B[选择左侧变量]
+    B --> C[推断变量类型]
+    C --> D[获取可用操作符]
+    D --> E[选择比较操作符]
+    E --> F[确定右侧值类型]
+    F --> G[输入比较值]
+    G --> H[onChange 回调]
+
+    J[变量选择器] --> B
+    K[动态值输入] --> G
+    L[条件上下文] --> D
+```
+

apps/docs/src/zh/guide/materials/components/dynamic-value-input.mdx

@@ -0,0 +1,218 @@
+import { SourceCode } from '@theme';
+import { BasicStory, WithSchemaStory } from 'components/form-materials/components/dynamic-value-input';
+
+# DynamicValueInput
+
+DynamicValueInput 是一个动态值输入组件，支持常量和变量两种输入模式。它可以根据提供的 schema 自动选择合适的输入类型，并提供变量选择功能。组件能够智能地在常量输入和变量选择之间切换。
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/dynamic-value-input.png" alt="DynamicValueInput 组件" style={{ width: '50%' }} />
+</div>
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { DynamicValueInput } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="dynamic_value_input">
+        {({ field }) => (
+          <DynamicValueInput value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 带 Schema 约束
+
+<WithSchemaStory />
+
+```tsx pure title="form-meta.tsx"
+import { DynamicValueInput } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="dynamic_value_input">
+        {({ field }) => (
+          <DynamicValueInput
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            schema={{ type: 'string' }}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 常量模式
+
+```tsx
+<DynamicValueInput
+  value={{
+    type: 'constant',
+    content: 'Hello World',
+    schema: { type: 'string' }
+  }}
+  onChange={handleChange}
+/>
+```
+
+### 变量模式
+
+```tsx
+<DynamicValueInput
+  value={{
+    type: 'ref',
+    content: ['start_0', 'query']
+  }}
+  onChange={handleChange}
+/>
+```
+
+## API 参考
+
+### DynamicValueInput Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `IFlowConstantRefValue` | - | 输入值，支持常量或变量引用 |
+| `onChange` | `(value?: IFlowConstantRefValue) => void` | - | 值变化时的回调函数 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `hasError` | `boolean` | `false` | 是否显示错误状态 |
+| `style` | `React.CSSProperties` | - | 自定义样式 |
+| `schema` | `IJsonSchema` | - | 约束输入类型的 JSON Schema |
+| `constantProps` | `ConstantInputProps` | - | 传递给常量输入组件的额外属性 |
+
+### IFlowConstantRefValue
+
+```typescript
+type IFlowConstantRefValue =
+  | IFlowConstantValue  // 常量值
+  | IFlowRefValue;     // 变量引用
+
+interface IFlowConstantValue {
+  type: 'constant';
+  content: any;           // 常量值
+  schema: IJsonSchema;  // 值的类型定义
+}
+
+interface IFlowRefValue {
+  type: 'ref';
+  content: string; // 变量路径，如 "user.name"
+}
+```
+
+### 模式切换
+
+组件支持两种输入模式的智能切换：
+
+1. **常量模式**: 直接输入值
+2. **变量模式**: 选择作用域内的变量
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/dynamic-value-input"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/dynamic-value-input
+```
+
+### 目录结构讲解
+
+```
+dynamic-value-input/
+├── index.tsx           # 主组件实现，包含 DynamicValueInput 核心逻辑
+├── hooks.ts            # 自定义 Hooks，处理变量引用和 schema 选择
+├── styles.tsx          # 样式定义，使用 styled-components
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### 变量引用处理
+通过 `useRefVariable` Hook 获取变量引用信息：
+
+```typescript
+const refVariable = useRefVariable(value);
+```
+
+#### Schema 选择管理
+通过 `useSelectSchema` Hook 管理类型选择：
+
+```typescript
+const [selectSchema, setSelectSchema] = useSelectSchema(
+  schemaFromProps,
+  constantProps,
+  value
+);
+```
+
+#### 模式切换逻辑
+组件通过判断 `value.type` 来决定渲染常量输入还是变量选择器：
+
+```typescript
+if (value?.type === 'ref') {
+  // 渲染变量选择器
+  return <InjectVariableSelector />;
+} else {
+  // 渲染常量输入
+  return <ConstantInput />;
+}
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/json-schema
+- `JsonSchemaUtils`: JSON Schema 工具类
+- `IJsonSchema`: JSON Schema 类型定义
+- `useTypeManager`: 类型管理器 Hook
+
+#### @flowgram.ai/variable-core
+- `useScopeAvailable`: 获取当前作用域的可用变量
+
+#### 内部组件
+- [`InjectVariableSelector`](./variable-selector): 变量选择器
+- [`TypeSelector`](./type-selector): 类型选择器
+- `ConstantInput`: 常量输入组件
+- `createInjectMaterial`: 创建可注入的物料组件
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[DynamicValueInput 组件] --> B{判断输入模式}
+    B -->|常量模式| C[渲染常量输入]
+    B -->|变量模式| D[渲染变量选择器]
+
+    C --> E[根据 schema 选择输入类型]
+    D --> F[显示可用变量列表]
+
+    E --> G[用户输入值]
+    F --> H[用户选择变量]
+
+    G --> I[生成常量值]
+    H --> J[生成变量引用]
+
+    I --> K[onChange 回调]
+    J --> K
+
+```
+

apps/docs/src/zh/guide/materials/components/inputs-values.mdx

@@ -0,0 +1,213 @@
+import { SourceCode } from '@theme';
+import { BasicStory, WithSchemaStory } from 'components/form-materials/components/inputs-values';
+
+# InputsValues
+
+InputsValues 是一个键值对输入列表组件，用于收集和管理一组输入参数。每个键值对都支持常量和变量两种输入模式，通过 DynamicValueInput 组件实现灵活的输入方式。
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { InputsValues } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Record<string, any> | undefined> name="inputs_values">
+        {({ field }) => (
+          <InputsValues value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 带 Schema 约束
+
+<WithSchemaStory />
+
+```tsx pure title="form-meta.tsx"
+import { InputsValues } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Record<string, any> | undefined> name="inputs_values">
+        {({ field }) => (
+          <InputsValues
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            schema={{
+              type: 'string',
+            }}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 自定义常量输入策略
+通过 `constantProps` 可以自定义每个值的输入行为：
+
+```typescript
+const customStrategies = [
+  {
+    type: 'string',
+    render: (props) => <CustomStringInput {...props} />
+  },
+  {
+    type: 'number',
+    render: (props) => <CustomNumberInput {...props} />
+  }
+];
+
+<InputsValues
+  constantProps={{
+    strategies: customStrategies
+  }}
+/>
+```
+
+
+## API 参考
+
+### InputsValues Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `Record<string, IFlowValue \| undefined>` | - | 键值对数据 |
+| `onChange` | `(value?: Record<string, IFlowValue \| undefined>) => void` | - | 数据变化时的回调函数 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `hasError` | `boolean` | `false` | 是否显示错误状态 |
+| `style` | `React.CSSProperties` | - | 自定义样式 |
+| `schema` | `IJsonSchema` | - | 约束所有值类型的 JSON Schema |
+| `constantProps` | `ConstantInputProps` | - | 传递给 DynamicValueInput 的额外属性 |
+
+### 数据结构
+
+```typescript
+interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  onChange: (value?: Record<string, IFlowValue | undefined>) => void;
+  // ... 其他属性
+}
+
+type IFlowValue =
+  | IFlowConstantValue  // 常量值
+  | IFlowRefValue;     // 变量引用
+
+interface IFlowConstantValue {
+  type: 'constant';
+  content: any;           // 常量值
+  schema: IJsonSchema;  // 值的类型定义
+}
+
+interface IFlowRefValue {
+  type: 'ref';
+  content: string; // 变量路径，如 "user.name"
+}
+```
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/inputs-values"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/inputs-values
+```
+
+### 目录结构讲解
+
+```
+inputs-values/
+├── index.tsx           # 主组件实现，包含 InputsValues 核心逻辑
+├── types.ts            # 类型定义
+├── styles.tsx          # 样式定义，使用 styled-components
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### 键值对管理
+使用 `useObjectList` Hook 管理键值对列表：
+
+```typescript
+const { list, updateKey, updateValue, remove, add } = useObjectList<IFlowValue | undefined>({
+  value,
+  onChange,
+  sortIndexKey: 'extra.index',
+});
+```
+
+#### 动态值输入集成
+每个值都使用 `InjectDynamicValueInput` 组件实现输入：
+
+```typescript
+<InjectDynamicValueInput
+  value={item.value as IFlowConstantRefValue}
+  onChange={(v) => updateValue(item.id, v)}
+  schema={schema}
+  constantProps={constantProps}
+/>
+```
+
+#### 键名输入
+使用 `BlurInput` 组件实现键名的输入和验证：
+
+```typescript
+<BlurInput
+  value={item.key}
+  onChange={(v) => updateKey(item.id, v)}
+  placeholder={I18n.t('Input Key')}
+/>
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/i18n
+- `I18n`: 国际化支持
+
+#### 内部组件
+- `InjectDynamicValueInput`: 动态值输入组件
+- `BlurInput`: 失焦输入组件
+- `useObjectList`: 对象列表管理 Hook
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[InputsValues 组件] --> B[渲染键值对列表]
+    B --> C[每个键值对]
+    C --> D[键名输入框]
+    C --> E[值输入组件]
+    C --> F[删除按钮]
+
+    D --> G[用户输入键名]
+    E --> H[用户输入值]
+    F --> I[用户删除键值对]
+
+    G --> J[updateKey 更新]
+    H --> K[updateValue 更新]
+    I --> L[remove 删除]
+
+    J --> M[触发 onChange]
+    K --> M
+    L --> M
+
+
+    O[添加按钮] --> P[add 新增]
+    P --> M
+```

apps/docs/src/zh/guide/materials/components/json-editor-with-variables.mdx

@@ -0,0 +1,178 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/json-editor-with-variables';
+
+# JsonEditorWithVariables
+
+JsonEditorWithVariables 是一个增强版的 JSON 编辑器，支持在 JSON 中插入变量引用。它基于 JsonCodeEditor 构建，集成了变量选择器和变量标签注入功能，使用户能够在 JSON 字符串中使用 `{{variable}}` 语法引用变量。
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { JsonEditorWithVariables } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="json_editor_with_variables" defaultValue={`{ "a": {{start_0.str}} }`}>
+        {({ field }) => (
+          <JsonEditorWithVariables
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 带变量的 JSON 示例
+
+```json
+{
+  "user_info": {
+    "name": "{{start_0.name}}",
+    "email": "{{start_0.email}}",
+  }
+}
+```
+
+### 变量插入
+
+在编辑器中输入 `@` 字符可以触发变量选择器。
+
+输入 `@` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.name}}` 格式。
+
+## API 参考
+
+### JsonEditorWithVariables Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `string` | - | JSON 字符串内容 |
+| `onChange` | `(value: string) => void` | - | 内容变化时的回调函数 |
+| `theme` | `'dark' \| 'light'` | `'light'` | 编辑器主题 |
+| `placeholder` | `string` | - | 占位符文本 |
+| `activeLinePlaceholder` | `string` | `'按 @ 选择变量'` | 当前行的占位提示 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `options` | `Options` | - | CodeMirror 配置选项 |
+
+### 变量语法
+
+在 JSON 字符串中使用双花括号语法引用变量：
+
+```json
+{
+  "key": "{{variable.path}}"
+}
+```
+
+支持的变量格式：
+- `{{start_0.name}}` - 简单变量
+- `{{start_0.address.city}}` - 嵌套属性
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-editor-with-variables"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-editor-with-variables
+```
+
+### 目录结构讲解
+
+```
+json-editor-with-variables/
+├── index.tsx           # 懒加载导出文件
+├── editor.tsx          # 主组件实现
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### 变量语法解析
+通过正则表达式解析 JSON 中的变量引用：
+
+```typescript
+const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+```
+
+
+#### 变量选择器集成
+集成 `EditorVariableTree` 和 `EditorVariableTagInject` 扩展：
+
+```typescript
+<EditorVariableTree triggerCharacters={TRIGGER_CHARACTERS} />
+<EditorVariableTagInject />
+```
+
+#### 触发字符
+使用 `@` 作为变量选择的触发字符：
+
+```typescript
+const TRIGGER_CHARACTERS = ['@'];
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/coze-editor
+- `JsonCodeEditor`: JSON 代码编辑器
+- `transformerCreator`: 语法转换器创建器
+- `EditorVariableTree`: 变量树选择器
+- `EditorVariableTagInject`: 变量标签注入器
+- `Text`: 文本处理工具
+
+#### @flowgram.ai/i18n
+- `I18n`: 国际化支持
+
+#### coze-editor-extensions 物料
+- `EditorVariableTree`: 变量树选择触发
+- `EditorVariableTagInject`: 变量标签展示
+
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[JsonEditorWithVariables 组件] --> B[渲染 JsonCodeEditor]
+    B --> C[加载 JSON 语法高亮]
+    B --> D[集成变量扩展]
+
+    D --> E[EditorVariableTree]
+    D --> F[EditorVariableTagInject]
+
+    E --> G[监听 @ 触发]
+    F --> H[处理变量标签]
+
+    G --> I[显示变量列表]
+    I --> J[选择并插入变量]
+
+    H --> L[渲染变量标签样式]
+
+    J --> M[更新编辑器内容]
+```
+
+#### 自定义触发字符
+可以通过扩展支持更多触发字符：
+
+```typescript
+const CUSTOM_TRIGGERS = ['@', '#', '$'];
+
+<JsonCodeEditor
+  options={{
+    transformer: customTransformer,
+  }}
+>
+  <EditorVariableTree triggerCharacters={CUSTOM_TRIGGERS} />
+</JsonCodeEditor>
+```
+

apps/docs/src/zh/guide/materials/components/json-schema-editor.mdx

@@ -0,0 +1,220 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/json-schema-editor';
+
+# JsonSchemaEditor
+
+JsonSchemaEditor 是一个可视化的 JSON Schema 编辑器，支持创建和编辑复杂的 JSON Schema 结构。它提供了树形结构的界面，可以直观地定义对象、数组、字符串、数字等各种类型的属性，支持嵌套结构和必填字段标记。
+
+JsonSchema 协议可以通过以下文档学习：
+
+- [Json Schema 官网](https://json-schema.org/learn)
+- [Json Schema 规范（中文版）](https://json-schema.apifox.cn/)
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { JsonSchemaEditor } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<IJsonSchema> name="json_schema" defaultValue={{ type: 'object' }}>
+        {({ field }) => (
+          <JsonSchemaEditor
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+## API 参考
+
+### JsonSchemaEditor Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `IJsonSchema` | `{ type: 'object' }` | JSON Schema 对象 |
+| `onChange` | `(value: IJsonSchema) => void` | - | Schema 变化时的回调函数 |
+| `config` | `ConfigType` | `{}` | 编辑器配置选项 |
+| `className` | `string` | - | 自定义样式类名 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+
+### ConfigType
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `placeholder` | `string` | `'输入变量名'` | 属性名占位符 |
+| `descTitle` | `string` | `'描述'` | 描述字段标题 |
+| `descPlaceholder` | `string` | `'帮助LLM理解该属性'` | 描述字段占位符 |
+| `defaultValueTitle` | `string` | `'默认值'` | 默认值字段标题 |
+| `defaultValuePlaceholder` | `string` | `'默认值'` | 默认值占位符 |
+| `addButtonText` | `string` | `'添加'` | 添加按钮文本 |
+
+### 支持的类型
+
+| 类型 | 描述 | 示例 |
+|------|------|------|
+| `string` | 字符串类型 | `"hello"` |
+| `number` | 数字类型 | `42` |
+| `boolean` | 布尔类型 | `true` |
+| `object` | 对象类型 | `{}` |
+| `array` | 数组类型 | `[]` |
+| `null` | 空值类型 | `null` |
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/json-schema-editor"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-schema-editor
+```
+
+### 目录结构讲解
+
+```
+json-schema-editor/
+├── index.tsx           # 主组件实现
+├── types.ts            # 类型定义
+├── hooks.ts            # 状态管理钩子
+├── styles.ts           # 样式组件
+├── default-value.tsx   # 默认值编辑器
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### 树形结构管理
+组件使用递归的 `PropertyEdit` 组件来渲染嵌套的 Schema 结构：
+
+```typescript
+function PropertyEdit(props: {
+  value?: PropertyValueType;
+  config?: ConfigType;
+  onChange?: (value: PropertyValueType) => void;
+  onRemove?: () => void;
+  readonly?: boolean;
+  $level?: number;
+  $isLast?: boolean;
+})
+```
+
+#### 属性编辑状态管理
+使用 `usePropertiesEdit` 钩子管理 Schema 的增删改查：
+
+```typescript
+const {
+  propertyList,
+  onAddProperty,
+  onRemoveProperty,
+  onEditProperty
+} = usePropertiesEdit(value, onChangeProps);
+```
+
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/json-schema
+- `IJsonSchema`: JSON Schema 类型定义
+
+#### @flowgram.ai/i18n
+- `I18n`: 国际化支持
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[JsonSchemaEditor] --> B[渲染根属性]
+    B --> C[PropertyEdit 组件]
+    C --> D[属性名输入]
+    C --> E[类型选择]
+    C --> F[必填标记]
+    C --> G[操作按钮]
+
+    G --> H[展开/收起详情]
+    G --> I[添加子属性]
+    G --> J[删除属性]
+
+    H --> K[描述输入]
+    H --> L[默认值设置]
+
+    I --> M[递归渲染子属性]
+    M --> C
+
+```
+
+### 高级功能
+
+#### 嵌套结构支持
+支持无限层级的嵌套对象和数组：
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "level1": {
+      "type": "object",
+      "properties": {
+        "level2": {
+          "type": "object",
+          "properties": {
+            "level3": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+#### 数组元素定义
+支持定义数组元素的 Schema：
+
+```json
+{
+  "type": "array",
+  "items": {
+    "type": "object",
+    "properties": {
+      "id": { "type": "number" },
+      "name": { "type": "string" }
+    }
+  }
+}
+```
+
+#### 必填字段管理
+支持标记字段为必填，并自动更新 `required` 数组：
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "name": { "type": "string" },
+    "email": { "type": "string" }
+  },
+  "required": ["email"]
+}
+```
+
+### 使用场景
+
+- **API 文档生成**: 为 REST API 创建请求/响应 Schema
+- **表单验证**: 定义表单字段的验证规则
+- **数据建模**: 创建数据结构模型
+- **配置管理**: 定义配置文件的结构
+- **代码生成**: 为代码生成器提供 Schema 输入

apps/docs/src/zh/guide/materials/components/prompt-editor-with-inputs.mdx

@@ -0,0 +1,196 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/prompt-editor-with-inputs';
+
+# PromptEditorWithInputs
+
+PromptEditorWithInputs 是一个增强版的提示编辑器，集成了输入变量管理功能。它基于 PromptEditor 构建，额外提供了输入变量的树形选择器，使用户能够在提示模板中方便地引用和管理输入变量。
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { PromptEditorWithInputs } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<IInputsValues | undefined>
+        name="inputsValues"
+        defaultValue={{
+          a: { type: 'constant', content: '123' },
+          b: { type: 'ref', content: ['start_0', 'obj'] },
+        }}
+      >
+        {({ field }) => (
+          <InputsValuesTree value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+      <br />
+      <Field<IInputsValues | undefined> name="inputsValues">
+        {({ field: inputsField }) => (
+          <Field<IFlowTemplateValue | undefined>
+            name="prompt_editor_with_inputs"
+            defaultValue={{
+              type: 'template',
+              content: '# Query \n {{b.obj2.num}}',
+            }}
+          >
+            {({ field }) => (
+              <PromptEditorWithInputs
+                value={field.value}
+                onChange={(value) => field.onChange(value)}
+                inputsValues={inputsField.value || {}}
+              />
+            )}
+          </Field>
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### Inputs 插入
+
+在编辑器中输入 `@`, `{` 字符可以触发 Inputs 选择器。
+
+输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{inputs.path}}` 格式。
+
+
+## API 参考
+
+### PromptEditorWithInputs Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `{ type: 'template', content: string }` | - | 提示模板内容 |
+| `inputsValues` | `IInputsValues` | `{}` | 输入变量键值对 |
+| `onChange` | `(value: { type: 'template', content: string }) => void` | - | 内容变化时的回调函数 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `placeholder` | `string` | - | 占位符文本 |
+| `activeLinePlaceholder` | `string` | - | 当前行的占位提示 |
+| `hasError` | `boolean` | `false` | 是否显示错误状态 |
+| `disableMarkdownHighlight` | `boolean` | `false` | 是否禁用Markdown高亮 |
+| `options` | `Options` | - | CodeMirror 配置选项 |
+
+
+
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor-with-inputs"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/prompt-editor-with-inputs
+```
+
+### 目录结构讲解
+
+```
+prompt-editor-with-inputs/
+├── index.tsx           # 懒加载导出文件
+├── editor.tsx          # 主组件实现
+└── README.md          # 组件说明文档
+
+prompt-editor/
+├── index.tsx           # 基础提示编辑器导出
+├── editor.tsx          # 基础提示编辑器实现
+├── types.ts            # 类型定义
+├── styles.ts           # 样式组件
+└── extensions/         # 编辑器扩展
+    ├── markdown.tsx    # Markdown高亮
+    ├── language-support.tsx # 语言支持
+    └── jinja.tsx       # Jinja模板高亮
+```
+
+### 核心实现说明
+
+#### 输入变量集成
+PromptEditorWithInputs 扩展了基础 PromptEditor，增加了输入变量选择器：
+
+```typescript
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <EditorInputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}
+```
+
+#### 基础提示编辑器
+基础 PromptEditor 提供了完整的模板编辑功能：
+
+```typescript
+<PromptEditor
+  value={field.value}
+  onChange={(value) => field.onChange(value)}
+  placeholder="输入提示模板..."
+  activeLinePlaceholder="按 @ 插入变量"
+/>
+```
+
+#### 编辑器扩展
+基础编辑器集成了多个扩展：
+
+- **MarkdownHighlight**: 提供Markdown语法高亮
+- **LanguageSupport**: 支持多种编程语言
+- **JinjaHighlight**: Jinja2模板语法高亮
+
+#### 变量选择器
+`EditorInputsTree` 组件提供了树形结构的变量选择器：
+
+```typescript
+<EditorInputsTree inputsValues={inputsValues} />
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/coze-editor/react
+- `Renderer`: 编辑器渲染器
+- `EditorProvider`: 编辑器提供者
+- `ActiveLinePlaceholder`: 活动行占位符
+- `InferValues`: 类型推断工具
+
+#### @flowgram.ai/coze-editor/preset-prompt
+- `preset`: 提示编辑器预设配置
+- `EditorAPI`: 编辑器API接口
+
+#### @flowgram.ai/shared
+- `IInputsValues`: 输入变量类型定义
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[PromptEditorWithInputs] --> B[传递 inputsValues]
+    A --> C[PromptEditor 渲染]
+    C --> D[加载预设配置]
+    D --> E[集成扩展插件]
+
+    E --> F[MarkdownHighlight]
+    E --> G[LanguageSupport]
+    E --> H[JinjaHighlight]
+
+    F --> I[语法高亮]
+    G --> J[语言支持]
+    H --> K[模板语法]
+
+    B --> L[EditorInputsTree]
+    L --> M[输入树解析 + 展示]
+    M --> N[变量选择]
+    N --> O[插入变量]
+
+    O --> P[更新模板内容]
+```

apps/docs/src/zh/guide/materials/components/prompt-editor-with-variables.mdx

@@ -0,0 +1,168 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/prompt-editor-with-variables';
+
+# PromptEditorWithVariables
+
+PromptEditorWithVariables 是一个增强版的提示编辑器，集成了变量管理功能。它基于 PromptEditor 构建，提供了变量树选择器和变量标签注入功能，使用户能够在提示模板中方便地引用和管理变量。
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/prompt-editor-with-variables.png" alt="组件" style={{ width: '50%' }} />
+  *LLM_3 和 LLM_4 的提示词中引用了循环的批处理变量*
+</div>
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { PromptEditorWithVariables } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<any> name="prompt_template" defaultValue="Hello {{user.name}}, your balance is {{user.balance}}">
+        {({ field }) => (
+          <PromptEditorWithVariables
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+
+### 变量插入
+
+在编辑器中输入 `@`, `{` 字符可以触发变量选择器。
+
+输入 `@`, `{` 后会显示可用的变量列表，选择变量后会自动插入为 `{{variable.path}}` 格式。
+
+## API 参考
+
+### PromptEditorWithVariables Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `{ type: 'template', content: string }` | - | 提示模板内容 |
+| `onChange` | `(value: { type: 'template', content: string }) => void` | - | 内容变化时的回调函数 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `placeholder` | `string` | - | 占位符文本 |
+| `activeLinePlaceholder` | `string` | - | 当前行的占位提示 |
+| `hasError` | `boolean` | `false` | 是否显示错误状态 |
+| `disableMarkdownHighlight` | `boolean` | `false` | 是否禁用Markdown高亮 |
+| `options` | `Options` | - | CodeMirror 配置选项 |
+
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/prompt-editor-with-variables"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/prompt-editor-with-variables
+```
+
+### 目录结构讲解
+
+```
+prompt-editor-with-variables/
+├── index.tsx           # 懒加载导出文件
+├── editor.tsx          # 主组件实现
+└── README.md          # 组件说明文档
+
+prompt-editor/
+├── index.tsx           # 基础提示编辑器导出
+├── editor.tsx          # 基础提示编辑器实现
+├── types.ts            # 类型定义
+├── styles.ts           # 样式组件
+└── extensions/         # 编辑器扩展
+    ├── markdown.tsx    # Markdown高亮
+    ├── language-support.tsx # 语言支持
+    └── jinja.tsx       # Jinja模板高亮
+```
+
+### 核心实现说明
+
+#### 变量选择器集成
+PromptEditorWithVariables 扩展了基础 PromptEditor，增加了变量管理功能：
+
+```typescript
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </PromptEditor>
+  );
+}
+```
+
+#### 变量树选择器
+`EditorVariableTree` 组件提供了树形结构的变量选择器：
+
+- 支持按 `@` 触发变量选择
+- 支持嵌套变量的树形展示
+- 支持搜索和过滤变量
+- 支持变量类型图标显示
+
+#### 变量标签注入
+`EditorVariableTagInject` 组件负责变量标签的渲染和管理：
+
+- 变量标签的样式渲染
+- 变量标签的交互处理
+- 变量标签的验证和错误提示
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/coze-editor/react
+- `Renderer`: 编辑器渲染器
+- `EditorProvider`: 编辑器提供者
+- `ActiveLinePlaceholder`: 活动行占位符
+- `InferValues`: 类型推断工具
+
+#### @flowgram.ai/coze-editor/preset-prompt
+- `preset`: 提示编辑器预设配置
+- `EditorAPI`: 编辑器API接口
+
+#### coze-editor-extensions 物料
+- `EditorVariableTree`: 变量树选择触发
+- `EditorVariableTagInject`: 变量标签展示
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[PromptEditorWithVariables] --> B[渲染 PromptEditor]
+    B --> C[加载预设配置]
+    C --> D[集成扩展插件]
+
+    D --> E[MarkdownHighlight]
+    D --> F[LanguageSupport]
+    D --> G[JinjaHighlight]
+
+    E --> H[语法高亮]
+    F --> I[语言支持]
+    G --> J[模板语法]
+
+    A --> K[集成变量扩展]
+    K --> L[EditorVariableTree]
+    K --> M[EditorVariableTagInject]
+
+    L --> N[变量选择器]
+    M --> O[变量标签渲染]
+
+    N --> P[变量选择]
+    P --> Q[插入变量]
+
+    Q --> R[更新模板内容]
+```

apps/docs/src/zh/guide/materials/components/type-selector.mdx

@@ -0,0 +1,113 @@
+import { SourceCode } from '@theme';
+import { BasicStory } from 'components/form-materials/components/type-selector';
+
+# TypeSelector
+
+TypeSelector 是一个类型选择器组件，用于在表单中选择 JSON Schema 类型。它支持基本类型和复合类型（如数组类型）的选择。
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/type-selector.png" alt="TypeSelector 组件" style={{ width: '50%' }} />
+</div>
+
+## 案例演示
+
+### 基本使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { TypeSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<Partial<IJsonSchema> | undefined> name="type_selector" defaultValue={{ type: 'string' }}>
+        {({ field }) => (
+          <TypeSelector value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+
+## API 参考
+
+### TypeSelector Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `Partial<IJsonSchema>` | - | 选中的类型值，符合 JSON Schema 格式 |
+| `onChange` | `(value?: Partial<IJsonSchema>) => void` | - | 类型选择变化时的回调函数 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `disabled` | `boolean` | `false` | 是否禁用（已废弃，请使用 readonly） |
+| `style` | `React.CSSProperties` | - | 自定义样式 |
+
+### 类型格式说明
+
+TypeSelector 支持以下 JSON Schema 类型格式：
+
+- **基本类型**: `{ type: 'string' }`, `{ type: 'number' }`, `{ type: 'boolean' }` 等
+- **数组类型**: `{ type: 'array', items: { type: 'string' } }`
+- **嵌套数组**: `{ type: 'array', items: { type: 'array', items: { type: 'string' } } }`
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/type-selector"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/type-selector
+```
+
+### 目录结构讲解
+
+```
+type-selector/
+├── index.tsx           # 主组件实现，包含 TypeSelector 核心逻辑
+└── README.md          # 组件说明文档
+```
+
+### 核心实现说明
+
+#### getTypeSelectValue
+将 JSON Schema 对象转换为 Cascader 组件所需的数组格式：
+
+```typescript
+// 输入: { type: 'array', items: { type: 'string' } }
+// 输出: ['array', 'string']
+```
+
+#### parseTypeSelectValue
+将 Cascader 组件的数组值转换回 JSON Schema 对象：
+
+```typescript
+// 输入: ['array', 'string']
+// 输出: { type: 'array', items: { type: 'string' } }
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/json-schema
+- `useTypeManager()`: 获取类型管理器，用于处理 JSON Schema 类型的显示和验证
+- `IJsonSchema`: JSON Schema 类型定义
+- `JsonSchemaTypeManager`: 类型管理器类，提供类型注册、图标显示等功能
+
+### 整体流程
+
+```mermaid
+graph LR
+    A[TypeSelector 组件] --> B[useTypeManager Hook]
+    B --> C[获取类型注册表]
+    C --> D[生成 Cascader 选项]
+    D --> E[渲染级联选择器]
+    E --> F[用户选择类型]
+    F --> G[onChange 回调]
+    G --> H[更新 JSON Schema 值]
+```

apps/docs/src/zh/guide/materials/components/variable-selector.mdx

@@ -0,0 +1,175 @@
+import { SourceCode } from '@theme';
+import { BasicStory, FilterSchemaStory, CustomFilterStory } from 'components/form-materials/components/variable-selector';
+
+# VariableSelector
+
+VariableSelector 是一个用于选择当前作用域变量的组件，它可以根据变量的类型进行过滤。
+
+<br />
+<div>
+  <img loading="lazy" src="/materials/variable-selector.png" alt="VariableSelector 组件" style={{ width: '50%' }} />
+</div>
+
+
+## 案例演示
+
+### 直接使用
+
+<BasicStory />
+
+```tsx pure title="form-meta.tsx"
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string[] | undefined> name="variable_selector">
+        {({ field }) => (
+          <VariableSelector value={field.value} onChange={(value) => field.onChange(value)} />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+
+### 过滤变量类型
+
+<FilterSchemaStory />
+
+```tsx pure title="form-meta.tsx"
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <>
+      <FormHeader />
+      <Field<string[] | undefined> name="variable_selector">
+        {({ field }) => (
+          <VariableSelector
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            includeSchema={{ type: 'string' }}
+          />
+        )}
+      </Field>
+    </>
+  ),
+}
+```
+
+### 自定义过滤逻辑
+
+<CustomFilterStory />
+
+```tsx pure title="form-meta.tsx"
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+const formMeta = {
+  render: () => (
+    <VariableSelectorProvider skipVariable={(variable) => variable?.key === 'str'}>
+      <FormHeader />
+      <Field<string[] | undefined> name="variable_selector">
+        {({ field }) => (
+          <VariableSelector
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+          />
+        )}
+      </Field>
+    </VariableSelectorProvider>
+  ),
+}
+```
+
+
+
+## API 参考
+
+### VariableSelector Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `value` | `string[]` | - | 选中的变量路径数组 |
+| `onChange` | `(value?: string[]) => void` | - | 变量选择变化时的回调函数 |
+| `config` | `VariableSelectorConfig` | `{}` | 配置对象 |
+| `includeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 包含的变量类型过滤条件 |
+| `excludeSchema` | `IJsonSchema \| IJsonSchema[]` | - | 排除的变量类型过滤条件 |
+| `readonly` | `boolean` | `false` | 是否为只读模式 |
+| `hasError` | `boolean` | `false` | 是否显示错误状态 |
+| `style` | `React.CSSProperties` | - | 自定义样式 |
+| `triggerRender` | `(props: TriggerRenderProps) => React.ReactNode` | - | 自定义触发器渲染 |
+
+### VariableSelectorConfig
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `placeholder` | `string` | `'选择变量'` | 占位符文本 |
+| `notFoundContent` | `string` | `'未定义'` | 变量未找到时的显示内容 |
+
+### VariableSelectorProvider Props
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| `skipVariable` | `(variable?: BaseVariableField) => boolean` | - | 自定义变量过滤函数 |
+| `children` | `React.ReactNode` | - | 子组件 |
+
+## 源码导读
+
+<SourceCode
+  href="https://github.com/bytedance/flowgram.ai/tree/main/packages/materials/form-materials/src/components/variable-selector"
+/>
+
+使用 CLI 命令可以复制源代码到本地：
+
+```bash
+npx @flowgram.ai/cli@latest materials components/variable-selector
+```
+
+### 目录结构讲解
+
+```
+variable-selector/
+├── index.tsx           # 主组件实现，包含 VariableSelector 核心逻辑
+├── context.tsx         # 提供 `VariableSelectorContext` 上下文，支持全局配置变量过滤逻辑
+├── use-variable-tree.tsx # 自定义 Hook，处理变量树数据的转换和过滤
+├── styles.tsx          # 样式定义，使用 styled-components
+└── README.md          # 组件说明文档
+```
+
+
+### 整体流程
+
+```mermaid
+graph TD
+    A[VariableSelector 组件] ---> useVariableTree
+
+    K[VariableSelectorProvider] --> L[全局过滤配置]
+    subgraph useVariableTree
+      C[useAvailableVariables] --> D[获取所有可用变量]
+      D --> F[应用过滤条件]
+      F --> G[生成树形结构]
+      M[includeSchema/excludeSchema] --> F
+    end
+
+    G --> H[渲染 TreeSelect]
+    L --> F
+
+
+```
+
+### 使用到的 flowgram API
+
+#### @flowgram.ai/variable-core
+- `useAvailableVariables()`: 获取当前作用域内所有可用的变量
+- `BaseVariableField`: 基础变量字段类型，包含变量键、类型、元数据等
+
+#### @flowgram.ai/json-schema
+- `useTypeManager()`: 获取类型管理器，用于处理变量类型的显示和验证
+- `IJsonSchema`: JSON Schema 类型定义，用于变量类型验证
+- `JsonSchemaUtils`: JSON Schema 工具类，提供类型匹配和转换功能
+
+
+

apps/docs/src/zh/guide/materials/introduction.mdx

@@ -0,0 +1,51 @@
+import { PackageManagerTabs } from '@theme';
+
+# 快速上手
+
+## 如何使用？
+
+### 通过包引用使用
+
+官方表单物料可以直接通过包引用使用：
+
+<PackageManagerTabs command="install @flowgram.ai/form-materials" />
+
+```tsx
+import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
+```
+
+
+### 通过 CLI 添加物料源代码使用
+
+
+如果业务对组件有定制诉求（如：更改文案、样式、业务逻辑），推荐 **通过 CLI 将物料源代码添加到项目中进行定制**：
+
+```bash
+npx @flowgram.ai/cli@latest materials
+```
+
+运行后 CLI 会提示用户选择要添加到项目中的物料:
+
+```console
+? Select one material to add: (Use arrow keys)
+❯ components/json-schema-editor
+  components/type-selector
+  components/variable-selector
+```
+
+使用者也可以直接在 CLI 中添加指定物料的源代码:
+
+```bash
+npx @flowgram.ai/cli@latest materials components/json-schema-editor
+```
+
+CLI 运行成功后，相关物料会自动添加到当前项目下的 `src/form-materials` 目录下
+
+:::warning 注意事项
+
+1. 官方物料目前底层基于 [Semi Design](https://semi.design/) 实现，业务如果有底层组件库的诉求，可以通过 CLI 复制源码进行替换
+2. 一些物料会依赖一些第三方 npm 库，这些库会在 CLI 运行时自动安装
+3. 一些物料会依赖另外一些官方物料，这些被依赖的物料源代码在 CLI 运行时会一起被添加到项目中去
+
+:::
+

packages/materials/form-materials/src/components/dynamic-value-input/styles.tsx

@@ -10,6 +10,7 @@ export const UIContainer = styled.div`
   align-items: center;
   border-radius: 4px;
   border: 1px solid var(--semi-color-border);
+  line-height: normal;
 
   overflow: hidden;