fix(materials): json schema title & variable selector long text style (#438)

* fix: json schema title

* fix: variable selector style

* feat: add missing license header

* feat: add doc build in gitignore

.gitignore

@@ -1,5 +1,6 @@
 # e2e results
 test-results/
+doc_build/
 
 # Logs
 *.log

apps/create-app/.eslintrc.cjs

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 module.exports = {
   parser: "@typescript-eslint/parser",
   parserOptions: {

apps/create-app/src/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import path from 'path';
 
 import { execSync } from 'child_process';

apps/demo-fixed-layout-simple/.eslintrc.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 const { defineConfig } = require('@flowgram.ai/eslint-config');
 
 module.exports = defineConfig({

apps/demo-fixed-layout-simple/rsbuild.config.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rsbuild/core';
 

apps/demo-fixed-layout-simple/src/app.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { createRoot } from 'react-dom/client';
 
 import { Editor } from './editor';

apps/demo-fixed-layout-simple/src/components/base-node.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowNodeEntity, useNodeRender, useClientContext } from '@flowgram.ai/fixed-layout-editor';
 import { IconDeleteStroked } from '@douyinfe/semi-icons';
 

apps/demo-fixed-layout-simple/src/components/branch-adder.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { nanoid } from 'nanoid';
 import { type FlowNodeEntity, useClientContext } from '@flowgram.ai/fixed-layout-editor';
 import { IconPlus } from '@douyinfe/semi-icons';

apps/demo-fixed-layout-simple/src/components/flow-select.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useEffect, useState } from 'react';
 
 import { useClientContext, FlowLayoutDefault } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout-simple/src/components/minimap.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
 import { useService } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-fixed-layout-simple/src/components/node-adder.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import {
   FlowNodeEntity,
   FlowOperationService,

apps/demo-fixed-layout-simple/src/components/tools.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useEffect, useState, useCallback } from 'react';
 
 import { usePlaygroundTools, useClientContext, useRefresh } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout-simple/src/data/condition.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const condition: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/data/dynamicSplit.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const dynamicSplit: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/data/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON, FlowLayoutDefault } from '@flowgram.ai/fixed-layout-editor';
 
 import { tryCatch } from './tryCatch';

apps/demo-fixed-layout-simple/src/data/loop.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const loop: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/data/mindmap.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const mindmap: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/data/multiInputs.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const multiInputs: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/data/multiOutputs.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const multiOutputs: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/data/slots.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+

apps/demo-fixed-layout-simple/src/data/tryCatch.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 export const tryCatch: FlowDocumentJSON = {

apps/demo-fixed-layout-simple/src/editor.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FixedLayoutEditorProvider, EditorRenderer } from '@flowgram.ai/fixed-layout-editor';
 
 import '@flowgram.ai/fixed-layout-editor/index.css';

apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useMemo } from 'react';
 
 import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';

apps/demo-fixed-layout-simple/src/index.css

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 .demo-fixed-node {
   align-items: flex-start;
   background-color: #fff;

apps/demo-fixed-layout-simple/src/index.ts

@@ -1 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { Editor as DemoFixedLayout } from './editor';

apps/demo-fixed-layout-simple/src/initial-data.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from '@flowgram.ai/fixed-layout-editor';
 
 import { condition as conditionDemo } from './data/condition';

apps/demo-fixed-layout-simple/src/node-registries.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { nanoid } from 'nanoid';
 import { FlowNodeRegistry } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-fixed-layout/.eslintrc.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 const { defineConfig } = require('@flowgram.ai/eslint-config');
 
 module.exports = defineConfig({

apps/demo-fixed-layout/package.json

@@ -46,6 +46,7 @@
     "@flowgram.ai/eslint-config": "workspace:*",
     "@rsbuild/core": "^1.2.16",
     "@rsbuild/plugin-react": "^1.1.1",
+    "@rsbuild/plugin-less": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",

apps/demo-fixed-layout/rsbuild.config.ts

@@ -1,8 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginLess } from '@rsbuild/plugin-less';
 import { defineConfig } from '@rsbuild/core';
 
 export default defineConfig({
-  plugins: [pluginReact()],
+  plugins: [pluginReact(), pluginLess()],
   source: {
     entry: {
       index: './src/app.tsx',

apps/demo-fixed-layout/src/app.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { createRoot } from 'react-dom/client';
 
 import { Editor } from './editor';

apps/demo-fixed-layout/src/assets/icon-mouse.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export function MouseIcon() {
   return (
     <svg width="34" height="52" viewBox="0 0 34 52" fill="none" xmlns="http://www.w3.org/2000/svg">

apps/demo-fixed-layout/src/assets/icon-pad.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export function PadIcon() {
   return (
     <svg width="48" height="38" viewBox="0 0 48 38" fill="none" xmlns="http://www.w3.org/2000/svg">

apps/demo-fixed-layout/src/components/base-node/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useCallback, useContext } from 'react';
 
 import { FlowNodeEntity, useNodeRender } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/components/base-node/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 

apps/demo-fixed-layout/src/components/branch-adder/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { type FlowNodeEntity, useClientContext } from '@flowgram.ai/fixed-layout-editor';
 import { IconPlus } from '@douyinfe/semi-icons';
 

apps/demo-fixed-layout/src/components/branch-adder/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const Container = styled.div<{ activated?: boolean; isVertical: boolean }>`

apps/demo-fixed-layout/src/components/drag-node/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import type { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeRegistries } from '../../nodes';

apps/demo-fixed-layout/src/components/drag-node/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 const primary = 'hsl(252 62% 54.9%)';

apps/demo-fixed-layout/src/components/index.ts

@@ -1,2 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { DemoTools } from './tools';
 export { DragNode } from './drag-node';

apps/demo-fixed-layout/src/components/node-adder/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useCallback, useMemo, useState } from 'react';
 
 import { useClientContext } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/components/node-adder/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const PasteIcon = styled.div`

apps/demo-fixed-layout/src/components/node-adder/utils.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { nanoid } from 'nanoid';
 import { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-fixed-layout/src/components/node-list.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 import {
   FlowNodeEntity,

apps/demo-fixed-layout/src/components/selector-box-popover/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FunctionComponent, useMemo } from 'react';
 
 import {

apps/demo-fixed-layout/src/components/sidebar/index.tsx

@@ -1,2 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { SidebarProvider } from './sidebar-provider';
 export { SidebarRenderer } from './sidebar-renderer';

apps/demo-fixed-layout/src/components/sidebar/sidebar-node-renderer.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useNodeRender, FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
 
 import { NodeRenderContext } from '../../context';

apps/demo-fixed-layout/src/components/sidebar/sidebar-provider.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState } from 'react';
 
 import { SidebarContext } from '../../context';

apps/demo-fixed-layout/src/components/sidebar/sidebar-renderer.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 
 import {

apps/demo-fixed-layout/src/components/tools/fit-view.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { IconButton, Tooltip } from '@douyinfe/semi-ui';
 import { IconExpand } from '@douyinfe/semi-icons';
 

apps/demo-fixed-layout/src/components/tools/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState, useEffect } from 'react';
 
 import { usePlayground, usePlaygroundTools, useRefresh } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/components/tools/minimap-switch.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { Tooltip, IconButton } from '@douyinfe/semi-ui';
 import { IconGridRectangle } from '@douyinfe/semi-icons';
 

apps/demo-fixed-layout/src/components/tools/minimap.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
 import { useService } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-fixed-layout/src/components/tools/readonly.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useCallback } from 'react';
 
 import { usePlayground } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/components/tools/run.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState } from 'react';
 
 import {

apps/demo-fixed-layout/src/components/tools/save.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState, useEffect, useCallback } from 'react';
 
 import { useClientContext, getNodeForm, FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/components/tools/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const ToolContainer = styled.div`

apps/demo-fixed-layout/src/components/tools/switch-vertical.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';
 import { Button, Tooltip } from '@douyinfe/semi-ui';
 import { IconServer } from '@douyinfe/semi-icons';

apps/demo-fixed-layout/src/components/tools/zoom-select.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useState } from 'react';
 
 import { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/context/index.ts

@@ -1,2 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { NodeRenderContext } from './node-render-context';
 export { SidebarContext, IsSidebarContext } from './sidebar-context';

apps/demo-fixed-layout/src/context/node-render-context.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React from 'react';
 
 import { type NodeRenderReturnType } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/context/sidebar-context.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React from 'react';
 
 export const SidebarContext = React.createContext<{

apps/demo-fixed-layout/src/editor.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { EditorRenderer, FixedLayoutEditorProvider } from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeRegistries } from './nodes';

apps/demo-fixed-layout/src/form-components/feedback.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 import { FieldError, FieldState, FieldWarning } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-fixed-layout/src/form-components/form-content/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React from 'react';
 
 import { FlowNodeRegistry } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/form-components/form-content/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const FormWrapper = styled.div`

apps/demo-fixed-layout/src/form-components/form-header/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useContext, useCallback, useMemo, useState } from 'react';
 
 import { useClientContext } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/form-components/form-header/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const Header = styled.div`

apps/demo-fixed-layout/src/form-components/form-header/title-input.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useRef, useEffect } from 'react';
 
 import { Field, FieldRenderProps } from '@flowgram.ai/fixed-layout-editor';

apps/demo-fixed-layout/src/form-components/form-header/utils.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { type FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeRegistry } from '../../typings';

apps/demo-fixed-layout/src/form-components/form-inputs/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { DynamicValueInput } from '@flowgram.ai/form-materials';
 import { Field } from '@flowgram.ai/fixed-layout-editor';
 

apps/demo-fixed-layout/src/form-components/form-inputs/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 // import styled from 'styled-components';
 
 // TODO

apps/demo-fixed-layout/src/form-components/form-item/index.css

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 .form-item-type-tag {
   color: inherit;
   padding: 0 2px;

apps/demo-fixed-layout/src/form-components/form-item/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useCallback } from 'react';
 
 import { Typography, Tooltip } from '@douyinfe/semi-ui';

apps/demo-fixed-layout/src/form-components/form-outputs/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { Field } from '@flowgram.ai/fixed-layout-editor';
 
 import { TypeTag } from '../type-tag';

apps/demo-fixed-layout/src/form-components/form-outputs/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const FormOutputsContainer = styled.div`

apps/demo-fixed-layout/src/form-components/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export * from './feedback';
 export * from './form-content';
 export * from './form-outputs';

apps/demo-fixed-layout/src/form-components/properties-edit/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useContext, useState } from 'react';
 
 import { Button } from '@douyinfe/semi-ui';

apps/demo-fixed-layout/src/form-components/properties-edit/property-edit.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useState, useLayoutEffect } from 'react';
 
 import { VariableSelector, TypeSelector, DynamicValueInput } from '@flowgram.ai/form-materials';

apps/demo-fixed-layout/src/form-components/properties-edit/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const Row = styled.div`

apps/demo-fixed-layout/src/form-components/type-tag.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 import { VariableTypeIcons, ArrayIcons } from '@flowgram.ai/form-materials';
 import { Tag, Tooltip } from '@douyinfe/semi-ui';

apps/demo-fixed-layout/src/form-components/value-display/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 // import { TypeTag } from '../type-tag'
 import { ValueDisplayStyle } from './styles';
 

apps/demo-fixed-layout/src/form-components/value-display/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const ValueDisplayStyle = styled.div`

apps/demo-fixed-layout/src/hooks/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { useEditorProps } from './use-editor-props';
 export { useNodeRenderContext } from './use-node-render-context';
 export { useIsSidebar } from './use-is-sidebar';

apps/demo-fixed-layout/src/hooks/use-editor-props.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useMemo } from 'react';
 
 import { debounce } from 'lodash-es';
@@ -17,7 +22,7 @@ import { type FlowNodeRegistry } from '../typings';
 import { shortcutGetter } from '../shortcuts';
 import { CustomService } from '../services';
 import { GroupBoxHeader, GroupNode } from '../plugins/group-plugin';
-import { createClipboardPlugin } from '../plugins';
+import { createClipboardPlugin, createVariablePanelPlugin } from '../plugins';
 import { SelectorBoxPopover } from '../components/selector-box-popover';
 import NodeAdder from '../components/node-adder';
 import BranchAdder from '../components/branch-adder';
@@ -260,6 +265,12 @@ export function useEditorProps(
          * 剪切板插件
          */
         createClipboardPlugin(),
+
+        /**
+         * Variable panel plugin
+         * 变量面板插件
+         */
+        createVariablePanelPlugin({}),
       ],
     }),
     []

apps/demo-fixed-layout/src/hooks/use-is-sidebar.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useContext } from 'react';
 
 import { IsSidebarContext } from '../context';

apps/demo-fixed-layout/src/hooks/use-node-render-context.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useContext } from 'react';
 
 import { NodeRenderContext } from '../context';

apps/demo-fixed-layout/src/index.ts

@@ -1 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export { Editor as DemoFixedLayout } from './editor';

apps/demo-fixed-layout/src/initial-data.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowDocumentJSON } from './typings';
 
 export const initialData: FlowDocumentJSON = {

apps/demo-fixed-layout/src/nodes/break-loop/form-meta.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FormMeta } from '@flowgram.ai/fixed-layout-editor';
 
 import { FormHeader } from '../../form-components';

apps/demo-fixed-layout/src/nodes/break-loop/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { nanoid } from 'nanoid';
 
 import { FlowNodeRegistry } from '../../typings';

apps/demo-fixed-layout/src/nodes/case-default/form-meta.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeJSON } from '../../typings';

apps/demo-fixed-layout/src/nodes/case-default/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FlowNodeRegistry } from '../../typings';
 import iconCase from '../../assets/icon-case.png';
 import { formMeta } from './form-meta';

apps/demo-fixed-layout/src/nodes/case/form-meta.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeJSON } from '../../typings';

apps/demo-fixed-layout/src/nodes/case/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { nanoid } from 'nanoid';
 
 import { FlowNodeRegistry } from '../../typings';

apps/demo-fixed-layout/src/nodes/catch-block/form-meta.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeJSON } from '../../typings';

apps/demo-fixed-layout/src/nodes/catch-block/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { nanoid } from 'nanoid';
 
 import { FlowNodeRegistry } from '../../typings';

apps/demo-fixed-layout/src/nodes/default-form-meta.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import {
   autoRenameRefEffect,
   provideJsonSchemaOutputs,

apps/demo-fixed-layout/src/nodes/end/form-meta.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { mapValues } from 'lodash-es';
 import { IFlowValue } from '@flowgram.ai/form-materials';
 import { Field, FieldRenderProps, FormMeta } from '@flowgram.ai/fixed-layout-editor';