@flowgram.ai/type-editor 0.1.0-alpha.12

package/dist/esm/index.js

@@ -0,0 +1,5021 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/types/type-editor.ts
+var TypeEditorColumnType = /* @__PURE__ */ ((TypeEditorColumnType2) => {
+  TypeEditorColumnType2["Key"] = "key";
+  TypeEditorColumnType2["Type"] = "type";
+  TypeEditorColumnType2["Required"] = "required";
+  TypeEditorColumnType2["Description"] = "description";
+  TypeEditorColumnType2["Default"] = "default";
+  TypeEditorColumnType2["Operate"] = "operate";
+  TypeEditorColumnType2["Value"] = "value";
+  TypeEditorColumnType2["Private"] = "private";
+  return TypeEditorColumnType2;
+})(TypeEditorColumnType || {});
+
+// src/contexts/index.tsx
+import React8, { createContext, useContext, useEffect as useEffect2, useMemo } from "react";
+import { Container } from "inversify";
+
+// src/utils/registry-adapter.tsx
+import React from "react";
+import { Space, Typography } from "@douyinfe/semi-ui";
+var registryFormatter = (registry, manager) => {
+  const res = {
+    ...registry
+  };
+  const apiMap = {
+    getItemTypes: "getSupportedItemTypes",
+    getIJsonSchemaByStringValue: "getTypeSchemaByStringValue",
+    getStringValue: "getStringValueByTypeSchema",
+    getIJsonSchemaProperties: "getTypeSchemaProperties",
+    getIJsonSchemaPropertiesParent: "getPropertiesParent",
+    getChildrenExtraJsonPaths: "getJsonPaths",
+    getDefaultIJsonSchema: "getDefaultSchema"
+  };
+  Object.keys(apiMap).forEach((api) => {
+    if (res[api]) {
+      res[apiMap[api]] = res[api];
+    }
+    if (res[apiMap[api]]) {
+      res[api] = res[apiMap[api]];
+    }
+  });
+  return {
+    ...res,
+    getDisplayLabel: (type) => /* @__PURE__ */ React.createElement(Space, { style: { width: "100%" } }, manager?.getDisplayIcon(type), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, width: 0, display: "flex" } }, /* @__PURE__ */ React.createElement(Typography.Text, { size: "small", ellipsis: { showTooltip: true } }, manager.getComplexText(type)))),
+    getIJsonSchemaDeepField: (type) => manager.getTypeSchemaDeepChildField(type)
+  };
+};
+var getTypeDefinitionAdapter = (manager) => {
+  const typeDefinitionManager = {
+    getDefinitionByIJsonSchema: (typeSchema) => typeSchema ? manager.getTypeBySchema(typeSchema) : void 0,
+    getAllTypeDefinitions: () => manager.getTypeRegistriesWithParentType(),
+    getDefinitionByType: (type) => manager.getTypeByName(type),
+    getUndefinedIJsonSchema: () => manager.getTypeByName("unknown").getDefaultSchema()
+  };
+  return {
+    typeDefinitionManager,
+    utils: {
+      getComposedLabel: (type) => manager.getComplexText(type)
+    }
+  };
+};
+
+// src/type-registry/string.tsx
+import React2 from "react";
+import { Input } from "@douyinfe/semi-ui";
+var stringRegistryCreator = () => ({
+  type: "string",
+  getInputNode: ({ value, onChange, onSubmit }) => /* @__PURE__ */ React2.createElement(
+    Input,
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center"
+      },
+      autoFocus: true,
+      value,
+      onChange,
+      onBlur: onSubmit
+    }
+  )
+});
+
+// src/type-registry/object.tsx
+import React3 from "react";
+import { Typography as Typography2 } from "@douyinfe/semi-ui";
+var objectRegistryCreator = () => ({
+  type: "object",
+  getInputNode: () => /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        padding: "0 8px"
+      }
+    },
+    /* @__PURE__ */ React3.createElement(Typography2.Text, null, "Not Supported")
+  )
+});
+
+// src/type-registry/number.tsx
+import React4 from "react";
+import { InputNumber } from "@douyinfe/semi-ui";
+var numberRegistryCreator = () => ({
+  type: "number",
+  getInputNode({ value, onChange, onSubmit }) {
+    return /* @__PURE__ */ React4.createElement(
+      InputNumber,
+      {
+        autoFocus: true,
+        value,
+        style: { width: "100%", height: "100%" },
+        onChange,
+        onBlur: onSubmit
+      }
+    );
+  }
+});
+
+// src/type-registry/integer.tsx
+import React5 from "react";
+import { InputNumber as InputNumber2 } from "@douyinfe/semi-ui";
+var integerRegistryCreator = () => ({
+  type: "integer",
+  getInputNode({ value, onChange, onSubmit }) {
+    return /* @__PURE__ */ React5.createElement(
+      InputNumber2,
+      {
+        autoFocus: true,
+        value,
+        style: { width: "100%", height: "100%" },
+        onChange,
+        onBlur: onSubmit
+      }
+    );
+  }
+});
+
+// src/type-registry/boolean.tsx
+import React6 from "react";
+import { Select } from "@douyinfe/semi-ui";
+var booleanRegistryCreator = () => ({
+  type: "boolean",
+  getInputNode({ value, onChange, onSubmit }) {
+    return /* @__PURE__ */ React6.createElement(
+      Select,
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          background: "var(--semi-color-bg-0)"
+        },
+        optionList: [
+          {
+            value: 1,
+            label: "True"
+          },
+          {
+            value: 0,
+            label: "False"
+          }
+        ],
+        className: "flow-type-select",
+        value: Number(value),
+        onSelect: (v) => {
+          onChange(Boolean(v));
+          onSubmit();
+        }
+      }
+    );
+  }
+});
+
+// src/type-registry/array.tsx
+import React7 from "react";
+import { Space as Space2, Typography as Typography3 } from "@douyinfe/semi-ui";
+var arrayRegistryCreator = ({ typeManager }) => ({
+  type: "array",
+  getDisplayLabel: (type) => {
+    const config = typeManager.getTypeBySchema(type);
+    return /* @__PURE__ */ React7.createElement(Space2, { style: { width: "100%" } }, config?.getDisplayIcon(type) || config?.icon, /* @__PURE__ */ React7.createElement("div", { style: { flex: 1, width: 0, display: "flex" } }, /* @__PURE__ */ React7.createElement(Typography3.Text, { size: "small", ellipsis: { showTooltip: true } }, typeManager.getComplexText(type))));
+  }
+});
+
+// src/type-registry/index.ts
+var defaultTypeRegistryCreators = [
+  stringRegistryCreator,
+  numberRegistryCreator,
+  integerRegistryCreator,
+  booleanRegistryCreator,
+  objectRegistryCreator,
+  arrayRegistryCreator
+];
+
+// src/services/type-registry-manager.ts
+import { JsonSchemaTypeManager } from "@flowgram.ai/json-schema";
+var TypeEditorRegistryManager = class extends JsonSchemaTypeManager {
+};
+
+// src/services/index.tsx
+import "reflect-metadata";
+
+// src/services/type-editor-service.ts
+import { inject, injectable as injectable2 } from "inversify";
+import { Emitter as Emitter3 } from "@flowgram.ai/utils";
+
+// src/utils/monitor-data/monitor-data.ts
+import { Emitter } from "@flowgram.ai/utils";
+var MonitorData = class {
+  constructor(initialValue) {
+    this.onDataChangeEmitter = new Emitter();
+    this.onDataChange = this.onDataChangeEmitter.event;
+    if (initialValue !== void 0) {
+      this._data = initialValue;
+    }
+  }
+  get data() {
+    return this._data;
+  }
+  update(data) {
+    const prev = this._data;
+    this._data = data;
+    this.onDataChangeEmitter.fire({
+      prev,
+      next: data
+    });
+  }
+};
+
+// src/utils/monitor-data/use-monitor-data.ts
+import { useEffect, useState } from "react";
+var useMonitorData = (monitorData) => {
+  const [data, setData] = useState(monitorData?.data);
+  useEffect(() => {
+    const dispose = monitorData?.onDataChange(({ prev, next }) => {
+      setData(next);
+    });
+    return () => {
+      dispose?.dispose();
+    };
+  }, [monitorData]);
+  return {
+    data
+  };
+};
+
+// src/components/type-editor/common.ts
+var SUFFIX = "___empty___";
+var HEADER_HIGHT = 36;
+var CELL_HIGHT = 36 + 1;
+var CELL_PADDING = 8;
+var INDENT_WIDTH = 16;
+var TAB_BRA_HIGHT = 0;
+var COMPONENT_ID_PREFIX = "type-editor-component-id";
+var ROOT_FIELD_ID = "root";
+
+// src/services/clipboard-service.ts
+import { injectable } from "inversify";
+import { Emitter as Emitter2 } from "@flowgram.ai/utils";
+var ClipboardService = class {
+  constructor() {
+    this.onClipboardChangedEmitter = new Emitter2();
+    this.onClipboardChanged = this.onClipboardChangedEmitter.event;
+  }
+  /**
+   * 读取浏览器数据
+   */
+  get data() {
+    return navigator.clipboard.readText();
+  }
+  async saveReadData() {
+    try {
+      const data = await this.data;
+      return {
+        data
+      };
+    } catch (error) {
+      return {
+        error
+      };
+    }
+  }
+  /**
+   * 设置剪切板数据
+   */
+  async writeData(newStrData) {
+    const oldSaveData = await this.saveReadData();
+    if (oldSaveData.error || oldSaveData.data !== newStrData) {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(newStrData);
+        const event = document.createEvent("Event");
+        event.initEvent("onchange");
+        event.value = newStrData;
+        navigator.clipboard.dispatchEvent(event);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = newStrData;
+        textarea.style.display = "absolute";
+        textarea.style.left = "-99999999px";
+        document.body.prepend(textarea);
+        textarea.select();
+        try {
+          document.execCommand("copy");
+        } catch (err) {
+          console.log(err);
+        } finally {
+          textarea.remove();
+        }
+      }
+      this.onClipboardChangedEmitter.fire(newStrData);
+    }
+  }
+  /**
+   * 获取剪切板数据
+   */
+  async readData() {
+    const res = await this.saveReadData();
+    if (res.error) {
+      throw Error(res.error);
+    }
+    return res.data || "";
+  }
+  clearData() {
+    this.writeData("");
+  }
+};
+ClipboardService = __decorateClass([
+  injectable()
+], ClipboardService);
+
+// src/services/type-editor-service.ts
+var TypeEditorService = class {
+  constructor() {
+    this._configs = /* @__PURE__ */ new Map();
+    this._activePos = { x: -1, y: -1 };
+    // -1 为 header
+    this._dropInfo = {
+      rowDataId: "",
+      indent: -1,
+      index: -2
+    };
+    this.errorMsgs = new MonitorData([]);
+    this.dataSource = [];
+    this.dataSourceMap = {};
+    this.dataSourceTouchedMap = {};
+    this.blink = new MonitorData(false);
+    this.columnViewConfig = [];
+    this.onActivePosChange = new Emitter3();
+    this.onDropInfoChange = new Emitter3();
+    this.setErrorMsg = (pos, msg) => {
+      const newMsgs = [...this.errorMsgs.data];
+      const item = newMsgs.find((v) => v.pos.x === pos.x && v.pos.y === pos.y);
+      if (item) {
+        item.msg = msg;
+      } else {
+        newMsgs.push({ pos, msg });
+      }
+      this.errorMsgs.update(newMsgs);
+    };
+    this.refreshErrorMsgAfterRemove = (index) => {
+      const newMsgs = this.errorMsgs.data.filter((msg) => msg.pos.y !== index);
+      newMsgs.forEach((msg) => {
+        if (msg.pos.y > index) {
+          msg.pos.y = msg.pos.y - 1;
+        }
+      });
+      this.errorMsgs.update(newMsgs);
+    };
+    this.checkActivePosError = () => {
+      const pos = this.activePos;
+      return !!this.errorMsgs.data.find((v) => v.pos.x === pos.x && v.pos.y === pos.y && v.msg);
+    };
+    this.setEditValue = (val) => {
+      this.editValue = val;
+    };
+    this.getConfigs = () => Array.from(this._configs.values());
+    this.checkRowDataColumnCanEdit = (rowData, column) => !(rowData.disableEditColumn || []).map((v) => v.column).includes(column) && this.getConfigByType(column)?.focusable !== false;
+    /**
+     * 获取下一个可编辑的
+     */
+    this.getNextEditItem = (pos) => {
+      const newPos = { ...pos };
+      if (newPos.x === this.columnViewConfig.length - 1) {
+        newPos.y = (1 + newPos.y) % this.dataSource.length;
+        newPos.x = 0;
+      } else {
+        newPos.x = newPos.x + 1;
+      }
+      if (this.checkRowDataColumnCanEdit(
+        this.dataSource[newPos.y],
+        this.columnViewConfig[newPos.x].type
+      )) {
+        return newPos;
+      }
+      return this.getNextEditItem(newPos);
+    };
+  }
+  registerConfigs(config) {
+    const configs = Array.isArray(config) ? config : [config];
+    configs.map((c) => {
+      this._configs.set(c.type, c);
+    });
+  }
+  addConfigProps(type, config) {
+    const configByType = this.getConfigByType(type);
+    if (!configByType) {
+      return;
+    }
+    const newConfig = {
+      ...configByType,
+      ...config
+    };
+    this._configs.set(type, newConfig);
+  }
+  getConfigByType(type) {
+    return this._configs.get(type);
+  }
+  triggerShortcutEvent(event) {
+    const column = this.columnViewConfig[this.activePos.x];
+    const columnConfig = this.getConfigByType(column?.type);
+    if (!columnConfig) {
+      return;
+    }
+    const ctx = {
+      value: this.editValue,
+      rowData: this.dataSource[this.activePos.y],
+      onRemoveEmptyLine: this.onRemoveEmptyLine,
+      onChange: this.onChange,
+      typeEditor: this,
+      typeDefinitionService: this.typeDefinition
+    };
+    switch (event) {
+      case "enter": {
+        columnConfig.shortcuts?.onEnter?.(ctx);
+        return;
+      }
+      case "tab": {
+        columnConfig.shortcuts?.onTab?.(ctx);
+        return;
+      }
+      case "down": {
+        columnConfig.shortcuts?.onDown?.(ctx);
+        return;
+      }
+      case "up": {
+        columnConfig.shortcuts?.onUp?.(ctx);
+        return;
+      }
+      case "left": {
+        columnConfig.shortcuts?.onLeft?.(ctx);
+        return;
+      }
+      case "right": {
+        columnConfig.shortcuts?.onRight?.(ctx);
+        return;
+      }
+      case "copy": {
+        columnConfig.shortcuts?.onCopy?.(ctx);
+        return;
+      }
+      case "paste": {
+        columnConfig.shortcuts?.onPaste?.(ctx);
+        return;
+      }
+      case "delete": {
+        columnConfig.shortcuts?.onDelete?.(ctx);
+        return;
+      }
+      default: {
+        return;
+      }
+    }
+  }
+  get activePos() {
+    return this._activePos;
+  }
+  /**
+   * 获取可编辑的下一列/上一列
+   */
+  getCanEditColumn(originPos, direction) {
+    const newX = (originPos.x + this.columnViewConfig.length + (direction === "next" ? 1 : -1)) % this.columnViewConfig.length;
+    const newPos = {
+      y: originPos.y,
+      x: newX
+    };
+    if (this.checkRowDataColumnCanEdit(
+      this.dataSource[newPos.y],
+      this.columnViewConfig[newPos.x].type
+    )) {
+      return newPos;
+    }
+    return this.getCanEditColumn(newPos, direction);
+  }
+  /**
+   * 获取可编辑的下一行/上一行
+   */
+  getCanEditLine(originPos, direction) {
+    const newY = (originPos.y + this.dataSource.length + (direction === "next" ? 1 : -1)) % this.dataSource.length;
+    const newPos = {
+      y: newY,
+      x: originPos.x
+    };
+    if (this.checkRowDataColumnCanEdit(
+      this.dataSource[newPos.y],
+      this.columnViewConfig[newPos.x].type
+    )) {
+      return newPos;
+    }
+    return this.getCanEditLine(newPos, direction);
+  }
+  moveActivePosToNextLine() {
+    const newPos = this.getCanEditLine(this.activePos, "next");
+    this.setActivePos(newPos);
+  }
+  moveActivePosToNextLineWithAddLine(rowData) {
+    const newPos = { ...this.activePos };
+    if (!rowData.parentId) {
+      return;
+    }
+    const parentData = this.dataSourceMap[rowData.parentId] || this.dataSourceMap[ROOT_FIELD_ID];
+    const id = this.dataSourceMap[rowData.parentId] ? rowData.parentId : ROOT_FIELD_ID;
+    const addChild = parentData.index + parentData.deepChildrenCount === rowData.index;
+    if (addChild) {
+      if (this.onGlobalAdd) {
+        this.onGlobalAdd(id);
+        newPos.y = newPos.y + 1;
+      } else {
+        newPos.y = -1;
+      }
+    } else {
+      newPos.y = newPos.y + 1;
+    }
+    this.setActivePos(newPos);
+  }
+  moveActivePosToLastLine() {
+    const newPos = this.getCanEditLine(this.activePos, "last");
+    this.setActivePos(newPos);
+  }
+  moveActivePosToLastColumn() {
+    const newPos = this.getCanEditColumn(this.activePos, "last");
+    this.setActivePos(newPos);
+  }
+  moveActivePosToNextColumn() {
+    const newPos = this.getCanEditColumn(this.activePos, "next");
+    this.setActivePos(newPos);
+  }
+  moveActivePosToNextItem() {
+    const newPos = this.getNextEditItem(this.activePos);
+    this.setActivePos(newPos);
+  }
+  setActivePos(pos) {
+    if (this.checkActivePosError()) {
+      return;
+    }
+    this._activePos = pos;
+    this.onActivePosChange.fire(this._activePos);
+  }
+  clearActivePos() {
+    this._activePos = { x: -1, y: -1 };
+    this.onActivePosChange.fire(this._activePos);
+  }
+  setDataSource(newData) {
+    this.dataSource = newData;
+  }
+  getDataSource() {
+    return this.dataSource;
+  }
+  setColumnViewConfig(config) {
+    this.columnViewConfig = config;
+  }
+  get dropInfo() {
+    return this._dropInfo;
+  }
+  setDropInfo(dropInfo) {
+    if (dropInfo.indent === this.dropInfo.indent && this.dropInfo.rowDataId === dropInfo.rowDataId && this.dropInfo.index === dropInfo.index) {
+      return;
+    }
+    this._dropInfo = dropInfo;
+    this.onDropInfoChange.fire(dropInfo);
+  }
+  clearDropInfo() {
+    this.setDropInfo({ rowDataId: "", indent: -1, index: -2 });
+  }
+};
+__decorateClass([
+  inject(ClipboardService)
+], TypeEditorService.prototype, "clipboard", 2);
+__decorateClass([
+  inject(TypeEditorRegistryManager)
+], TypeEditorService.prototype, "typeDefinition", 2);
+TypeEditorService = __decorateClass([
+  injectable2()
+], TypeEditorService);
+
+// src/services/shortcut-service.ts
+import { injectable as injectable3 } from "inversify";
+var ShortcutsService = class {
+};
+ShortcutsService = __decorateClass([
+  injectable3()
+], ShortcutsService);
+
+// src/services/type-operation-service.ts
+import { isEqual } from "lodash";
+import { injectable as injectable4 } from "inversify";
+var TypeEditorOperationService = class {
+  constructor() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this._id_idx = 0;
+    this._storeState = (value) => {
+      if (this.redoStack.length > 0) {
+        this.redoStack.splice(0);
+      }
+      this.undoStack.push({
+        id: this._getNewId(),
+        value: JSON.stringify(value)
+      });
+      this.refreshUndoRedoStatus();
+    };
+    this.canUndo = new MonitorData(false);
+    this.canRedo = new MonitorData(false);
+    this.refreshUndoRedoStatus();
+  }
+  _getNewId() {
+    return `${this._id_idx++}`;
+  }
+  refreshUndoRedoStatus() {
+    this.canRedo.update(this.redoStack.length !== 0);
+    this.canUndo.update(this.undoStack.length > 1);
+  }
+  getCurrentState() {
+    const top = this.undoStack[this.undoStack.length - 1];
+    if (top) {
+      return JSON.parse(top.value);
+    }
+    return;
+  }
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+  }
+  storeState(value) {
+    if (isEqual(this.getCurrentState(), value)) {
+      return;
+    }
+    this._storeState(value);
+  }
+  async undo() {
+    const top = this.undoStack.pop();
+    if (top) {
+      this.redoStack.push(top);
+    }
+    this.refreshUndoRedoStatus();
+  }
+  async redo() {
+    const top = this.redoStack.pop();
+    if (top) {
+      this.undoStack.push(top);
+    }
+    this.refreshUndoRedoStatus();
+  }
+  debugger() {
+    console.log("getCurrentState - debugger", this.getCurrentState());
+  }
+};
+TypeEditorOperationService = __decorateClass([
+  injectable4()
+], TypeEditorOperationService);
+
+// src/contexts/index.tsx
+var TypeEditorContext = createContext({});
+var TypeContext = createContext({
+  container: new Container()
+});
+function useService(identifier) {
+  const container = useContext(TypeContext).container;
+  return container.get(identifier);
+}
+var TypeEditorProvider = ({
+  children,
+  typeRegistryCreators = [],
+  onInit
+}) => {
+  const container = useMemo(() => {
+    const res = new Container();
+    res.bind(TypeEditorService).toSelf().inSingletonScope();
+    res.bind(TypeEditorOperationService).toSelf().inSingletonScope();
+    res.bind(TypeEditorRegistryManager).toSelf().inSingletonScope();
+    res.bind(ShortcutsService).toSelf().inSingletonScope();
+    res.bind(ClipboardService).toSelf().inSingletonScope();
+    return res;
+  }, []);
+  useEffect2(() => {
+    const typeManager = container.get(TypeEditorRegistryManager);
+    [...defaultTypeRegistryCreators].forEach((creator) => {
+      typeManager.register(
+        creator
+      );
+    });
+  }, [container]);
+  useEffect2(() => {
+    const typeManager = container.get(TypeEditorRegistryManager);
+    const adapter = getTypeDefinitionAdapter(typeManager);
+    typeRegistryCreators.forEach((creator) => {
+      typeManager.register(creator({ typeManager, ...adapter }));
+    });
+    typeManager.getAllTypeRegistries().forEach((registry) => {
+      const res = registryFormatter(registry, typeManager);
+      typeManager.register(res);
+    });
+    typeManager.triggerChanges();
+    onInit?.();
+  }, [typeRegistryCreators, onInit, container]);
+  return /* @__PURE__ */ React8.createElement(TypeContext.Provider, { value: { container } }, children);
+};
+var useTypeDefinitionManager = () => useService(TypeEditorRegistryManager);
+
+// src/components/type-editor/columns/value.tsx
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import React9 from "react";
+import { Tooltip, Typography as Typography5 } from "@douyinfe/semi-ui";
+
+// src/components/type-editor/hooks/disabled.ts
+var useDisabled = (type, rowData) => {
+  const disabled = (rowData.disableEditColumn || []).find((r) => r.column === type);
+  if (disabled?.reason) {
+    return disabled?.reason;
+  }
+  if (typeof rowData.extra?.editable === "string") {
+    return rowData.extra?.editable;
+  }
+  return rowData.extra?.editable === false ? `${type}  is not editable.` : void 0;
+};
+
+// src/components/type-editor/columns/style.ts
+import styled, { createGlobalStyle } from "styled-components";
+import { Input as Input2, Typography as Typography4 } from "@douyinfe/semi-ui";
+var KeyViewContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  ${(props) => props.disabled ? "cursor: not-allowed !important;" : ""}
+  svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+`;
+var KeyViewContent = styled.div`
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 0;
+  flex: 1;
+`;
+var KeyEditorContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  .semi-input-wrapper-focus {
+    border-color: transparent !important;
+  }
+
+  .semi-input-wrapper:hover {
+    background-color: var(--semi-color-fill-0);
+  }
+
+  .semi-cascader:hover {
+    background-color: var(--semi-color-fill-0);
+  }
+
+  .semi-cascader:focus {
+    border-color: transparent !important;
+  }
+
+  .semi-cascader-focus {
+    border-color: transparent !important;
+  }
+`;
+var KeyEditorInput = styled(Input2)`
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  input {
+    font-size: 12px !important;
+  }
+`;
+var KeyViewText = styled(Typography4.Text)`
+  flex: 1;
+  cursor: text;
+  font-size: 12px;
+  height: 100%;
+  ${(props) => props.disabled ? `
+      cursor: not-allowed !important;
+    ` : ""}
+`;
+var BaseIcon = styled.div`
+  color: var(--semi-color-text-2);
+  cursor: pointer;
+
+  ${(props) => props.draggable ? `
+    cursor: grab;
+    margin-right: 4px;
+  ` : ""}
+
+  ${(props) => props.triangle ? `
+    transform: rotate(270deg);
+
+  ` : ""}
+
+  ${(props) => props.isRotate ? `
+    transform: rotate(360deg);
+
+  ` : ""}
+
+  ${(props) => props.disabled ? `
+      opacity: 0.5;
+      cursor: not-allowed;
+    ` : ""}
+
+  ${(props) => props.primary ? `
+        color: var(--semi-color-primary) !important;
+      ` : ""}
+
+  &:hover {
+    color: var(--semi-color-primary);
+  }
+`;
+var CenterContainer = styled.div`
+  width: 100%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: center;
+`;
+var TypeDisableViewContainer = styled(KeyViewContainer)`
+  color: var(--semi-color-disabled-text) !important;
+  cursor: not-allowed;
+  font-size: 12px;
+
+  :global {
+    .semi-typography {
+      color: var(--semi-color-disabled-text) !important;
+    }
+  }
+`;
+var TypeTextContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  padding: 1px 5px;
+`;
+var GlobalSelectStyle = createGlobalStyle`
+  .semi-select {
+      border: none !important
+    }
+
+`;
+
+// src/components/type-editor/columns/value.tsx
+var TypeText = ({ value, type }) => {
+  const typeDefinition = useTypeDefinitionManager();
+  const content = useMemo2(() => {
+    const config = typeDefinition.getTypeBySchema(type);
+    return config?.getValueText ? config.getValueText(value) : value || "";
+  }, [value, type]);
+  return /* @__PURE__ */ React9.createElement(TypeTextContainer, null, /* @__PURE__ */ React9.createElement(Typography5.Text, { ellipsis: { showTooltip: true } }, content));
+};
+var ViewRender = ({ rowData, onEditMode }) => {
+  const disabled = useDisabled("value" /* Value */, rowData);
+  if (disabled) {
+    return /* @__PURE__ */ React9.createElement(KeyViewContainer, { disabled: true }, /* @__PURE__ */ React9.createElement(Tooltip, { content: disabled }, /* @__PURE__ */ React9.createElement("div", { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React9.createElement(TypeText, { value: rowData.self?.extra?.value, type: rowData.self }))));
+  }
+  return /* @__PURE__ */ React9.createElement(KeyViewContainer, { onClick: () => onEditMode() }, /* @__PURE__ */ React9.createElement(TypeText, { value: rowData.self?.extra?.value, type: rowData.self }));
+};
+var EditRender = ({
+  rowData,
+  onChange,
+  typeEditor,
+  onViewMode
+}) => {
+  const valueRef = useRef(rowData.self.extra?.value);
+  const [value, setValue] = useState2(rowData.self.extra?.value);
+  const typeDefinition = useTypeDefinitionManager();
+  const config = useMemo2(() => typeDefinition.getTypeBySchema(rowData.self), [rowData.self]);
+  useEffect3(() => {
+    typeEditor.editValue = value;
+  }, [typeEditor, value]);
+  useEffect3(() => {
+    setValue(rowData.self.extra?.value);
+    valueRef.current = rowData.self.extra?.value;
+  }, [rowData.self.extra?.value]);
+  const handleSubmit = useCallback(() => {
+    if (!rowData.self.extra) {
+      rowData.self.extra = {};
+    }
+    rowData.self.extra.value = valueRef.current;
+    onChange();
+    onViewMode();
+  }, [onChange, rowData]);
+  return /* @__PURE__ */ React9.createElement(KeyEditorContainer, null, /* @__PURE__ */ React9.createElement(GlobalSelectStyle, null), config && config?.getInputNode?.({
+    value,
+    onChange: (v) => {
+      valueRef.current = v;
+      setValue(v);
+    },
+    type: rowData.self,
+    onSubmit: () => {
+      handleSubmit();
+      onViewMode();
+    }
+  }));
+};
+var valueColumnConfig = {
+  type: "value" /* Value */,
+  width: 15,
+  label: "Value",
+  viewRender: ViewRender,
+  shortcuts: {
+    onEnter: ({ rowData, onChange, typeEditor, value, typeDefinitionService }) => {
+      const config = typeDefinitionService.getTypeBySchema(rowData.self);
+      if (config?.typeInputConfig?.canEnter) {
+        rowData.self.description = value;
+        onChange();
+        typeEditor.moveActivePosToNextLine();
+      }
+    },
+    onTab: ({ rowData, value, onChange, typeEditor }) => {
+      rowData.self.description = value;
+      onChange();
+      typeEditor.moveActivePosToNextItem();
+    }
+  },
+  editRender: EditRender
+};
+
+// src/components/type-editor/columns/type.tsx
+import React18, { useEffect as useEffect7, useMemo as useMemo9, useState as useState10 } from "react";
+import { pick } from "@flowgram.ai/utils";
+import { Toast, Tooltip as Tooltip3 } from "@douyinfe/semi-ui";
+import { IconHelpCircle } from "@douyinfe/semi-icons";
+
+// src/components/type-editor/utils.ts
+import { forwardRef } from "react";
+import { nanoid } from "nanoid";
+
+// src/components/type-editor/formatter/index.ts
+var extraFormatter = (type) => {
+  if (type.extra !== void 0) {
+    type.extra = type.extra;
+    delete type.extra;
+  }
+};
+var extraDeFormatter = (type) => {
+  if (type.extra !== void 0) {
+    type.extra = type.extra;
+    delete type.extra;
+  }
+};
+var emptyKeyFormatter = (type) => {
+  if (type.properties) {
+    Object.keys(type.properties).forEach((k) => {
+      if (k.startsWith(SUFFIX)) {
+        delete type.properties[k];
+      }
+    });
+  }
+};
+var disableFixIndexFormatter = (type) => {
+  if (type.extra) {
+    delete type.extra.index;
+    if (Object.keys(type.extra).length === 0) {
+      delete type.extra;
+    }
+  }
+};
+
+// src/components/type-editor/utils.ts
+var genNewTypeSchema = (index) => {
+  const newKey = genEmptyKey();
+  return [
+    newKey,
+    {
+      type: "string",
+      extra: {
+        index
+      }
+    }
+  ];
+};
+var traverseIJsonSchema = (root, cb) => {
+  if (root) {
+    cb(root);
+    if (root.items) {
+      traverseIJsonSchema(root.items, cb);
+    }
+    if (root.additionalProperties) {
+      traverseIJsonSchema(root.additionalProperties, cb);
+    }
+    if (root.properties) {
+      Object.values(root.properties).forEach((v) => {
+        traverseIJsonSchema(v, cb);
+      });
+    }
+  }
+};
+var jsonParse = (jsonString) => {
+  try {
+    return JSON.parse(jsonString || "");
+  } catch (error) {
+    return void 0;
+  }
+};
+var sortProperties = (typeSchema) => {
+  const { properties = {} } = typeSchema;
+  const originKeys = Object.keys(properties);
+  const sortKeys = originKeys.sort(
+    (a, b) => (properties[a].extra?.index || 0) - (properties[b].extra?.index || 0)
+  );
+  for (let i = 0; i < sortKeys.length; i++) {
+    const key = sortKeys[i];
+    fixFlowIndex(properties[key]);
+    properties[key].extra.index = i;
+  }
+};
+var fixFlowIndex = (type, idx = 0) => {
+  if (!type) {
+    return;
+  }
+  if (!type.extra) {
+    type.extra = {};
+  }
+  if (type.extra.index === void 0) {
+    type.extra.index = idx;
+  }
+};
+var getInitialSchema = () => {
+  const res = {
+    type: "object",
+    properties: {}
+  };
+  return res;
+};
+var clone = (val) => val ? JSON.parse(JSON.stringify(val)) : val;
+var isTempState = (type, customValidateName) => {
+  let error = false;
+  traverseIJsonSchema(type, (c) => {
+    if (c.properties) {
+      Object.keys(c.properties).forEach((key) => {
+        const res = isEmptyKey(key) || customValidateName?.(key);
+        if (res) {
+          error = true;
+        }
+      });
+    }
+  });
+  return error;
+};
+var genEmptyKey = () => SUFFIX + nanoid();
+var isEmptyKey = (key) => key.startsWith(SUFFIX);
+var formateKey = (key) => isEmptyKey(key) ? "" : key;
+var deFormateKey = (key, originKey) => !key ? originKey || genEmptyKey() : key;
+var formateTypeSchema = (typeSchema, config) => {
+  const newSchema = JSON.parse(JSON.stringify(typeSchema));
+  const formatters = [emptyKeyFormatter];
+  if (config.disableFixIndex) {
+    formatters.push(disableFixIndexFormatter);
+  }
+  traverseIJsonSchema(newSchema, (type) => {
+    formatters.forEach((formatter) => {
+      formatter(type);
+    });
+  });
+  return newSchema;
+};
+var valueToTypeSchema = (value) => {
+  switch (typeof value) {
+    case "string": {
+      return {
+        type: "string"
+      };
+    }
+    case "bigint":
+    case "number": {
+      return {
+        type: "number"
+      };
+    }
+    case "boolean": {
+      return {
+        type: "boolean"
+      };
+    }
+    case "object": {
+      if (value) {
+        if (Array.isArray(value)) {
+          return {
+            type: "array",
+            items: valueToTypeSchema(value[0])
+          };
+        } else {
+          const object = {
+            type: "object",
+            properties: {}
+          };
+          Object.keys(value).forEach((k) => {
+            object.properties[k] = valueToTypeSchema(value[k]);
+          });
+          return object;
+        }
+      }
+      break;
+    }
+    default:
+      break;
+  }
+  return { type: "string" };
+};
+var typeEditorUtils = {
+  genNewTypeSchema,
+  sortProperties,
+  traverseIJsonSchema,
+  fixFlowIndex,
+  genEmptyKey,
+  jsonParse,
+  clone,
+  formateTypeSchema,
+  isTempState,
+  valueToTypeSchema,
+  deFormateKey,
+  formateKey,
+  getInitialSchema
+};
+function fixedTSForwardRef(render) {
+  return forwardRef(render);
+}
+var getComponentId = (id) => `${COMPONENT_ID_PREFIX}-${id}`;
+
+// src/components/type-selector/index.tsx
+import React17, { useState as useState9 } from "react";
+
+// src/components/type-selector/cascader-v2/index.tsx
+import React16, { useEffect as useEffect6, useRef as useRef3, useState as useState8 } from "react";
+import { Popover } from "@douyinfe/semi-ui";
+
+// src/components/type-selector/cascader-v2/type-search.tsx
+import React11, {
+  forwardRef as forwardRef2,
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useMemo as useMemo5,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+import classNames from "classnames";
+import { Typography as Typography7 } from "@douyinfe/semi-ui";
+
+// src/components/type-selector/hooks/use-hight-light.tsx
+import React10 from "react";
+var useHighlightKeyword = (label, keyword, hightLightStyle = {}, id) => {
+  if (label && keyword) {
+    return label.split(new RegExp(`(${keyword})`, "gi")).map(
+      (c, i) => c.toLocaleLowerCase() === keyword.toLocaleLowerCase() ? /* @__PURE__ */ React10.createElement(
+        "span",
+        {
+          key: c + i + id,
+          style: {
+            color: "rgba(var(--semi-orange-5), 1)",
+            ...hightLightStyle
+          }
+        },
+        c
+      ) : /* @__PURE__ */ React10.createElement("span", { key: c + i + id }, c)
+    );
+  }
+  return [label];
+};
+
+// src/components/type-selector/hooks/option-value.ts
+import { useMemo as useMemo3 } from "react";
+var useTypeTransform = () => {
+  const typeService = useTypeDefinitionManager();
+  const convertValueToOptionValue = useMemo3(
+    () => (originValue) => {
+      const type = originValue && typeService.getTypeBySchema(originValue);
+      return originValue && type?.getStringValueByTypeSchema?.(originValue) || "";
+    },
+    [typeService]
+  );
+  const convertOptionValueToModeValue = useMemo3(
+    () => (optionValue) => {
+      const [root, ...rest] = (optionValue || "").split("-");
+      const rooType = typeService.getTypeByName(root);
+      if (rooType?.getTypeSchemaByStringValue) {
+        return rooType.getTypeSchemaByStringValue(rest.join("-"));
+      }
+      return rooType?.getDefaultSchema();
+    },
+    [typeService]
+  );
+  const checkHasChildren = useMemo3(
+    () => (typeDef, ctx) => typeDef?.getSupportedItemTypes && typeDef.getSupportedItemTypes(ctx).length !== 0 || !!typeDef.container,
+    [typeService]
+  );
+  const getModeOptionChildrenType = useMemo3(
+    () => (typeDef, ctx) => {
+      const getSupportType = (parentType = "") => typeService.getTypeRegistriesWithParentType(
+        parentType
+      );
+      const support = new Set(getSupportType(ctx.parentType).map((v) => v.type));
+      return (typeDef?.getSupportedItemTypes && typeDef.getSupportedItemTypes(ctx) || []).filter((v) => support.has(v.type));
+    },
+    [typeService]
+  );
+  return {
+    convertOptionValueToModeValue,
+    convertValueToOptionValue,
+    checkHasChildren,
+    getModeOptionChildrenType
+  };
+};
+
+// src/components/type-selector/hooks/focus-item.ts
+import { useCallback as useCallback2, useImperativeHandle, useMemo as useMemo4, useState as useState3 } from "react";
+import { noop } from "lodash";
+var validatePos = (pos) => pos.x >= 0 && pos.y >= 0;
+var useFocusItemCascader = ({
+  rootTypes,
+  renderData,
+  cascaderTypes,
+  ref,
+  onCollapse,
+  onChange
+}) => {
+  const [focusPos, setFocusPos] = useState3({ x: -1, y: -1 });
+  const allOptions = useMemo4(
+    () => [rootTypes, ...renderData.map((item) => item.options)],
+    [rootTypes, renderData]
+  );
+  const initPos = useCallback2(() => {
+    setFocusPos({
+      x: 0,
+      y: 0
+    });
+  }, []);
+  const focusItem = useMemo4(() => allOptions[focusPos.x]?.[focusPos.y], [focusPos, allOptions]);
+  const focusValue = useMemo4(
+    () => allOptions[focusPos.x]?.[focusPos.y]?.value,
+    [focusPos, allOptions]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      initFocusItem() {
+        initPos();
+      },
+      clearFocusItem() {
+        setFocusPos({
+          x: -1,
+          y: -1
+        });
+      },
+      moveFocusItemUp() {
+        if (!validatePos(focusPos)) {
+          initPos();
+          return;
+        }
+        const { x, y } = focusPos;
+        if (!allOptions[x]?.[y]) {
+          return;
+        }
+        let newY = (y - 1 + allOptions[x].length) % allOptions[x].length;
+        let item = allOptions[x]?.[newY];
+        while (item?.disabled && newY !== y) {
+          newY = (newY - 1 + allOptions[x].length) % allOptions[x].length;
+          item = allOptions[x]?.[newY];
+        }
+        if (newY !== y) {
+          setFocusPos({
+            x,
+            y: newY
+          });
+        }
+      },
+      moveFocusItemDown() {
+        if (!validatePos(focusPos)) {
+          initPos();
+          return;
+        }
+        const { x, y } = focusPos;
+        if (!allOptions[x]?.[y]) {
+          return;
+        }
+        let newY = (y + 1) % allOptions[x].length;
+        let item = allOptions[x]?.[newY];
+        while (item?.disabled && newY !== y) {
+          newY = (newY + 1) % allOptions[x].length;
+          item = allOptions[x]?.[newY];
+        }
+        if (newY !== y) {
+          setFocusPos({
+            x,
+            y: newY
+          });
+        }
+      },
+      moveFocusItemLeft() {
+        if (!validatePos(focusPos)) {
+          initPos();
+          return;
+        }
+        const childrenPanelLen = cascaderTypes.length;
+        if (childrenPanelLen > 0) {
+          const lastParentType = cascaderTypes[childrenPanelLen - 1];
+          const newY = allOptions[childrenPanelLen - 1]?.findIndex(
+            (v) => v.type === lastParentType
+          );
+          onCollapse(lastParentType, childrenPanelLen - 1);
+          setFocusPos({
+            x: focusPos.x - 1,
+            y: newY || 0
+          });
+        }
+      },
+      moveFocusItemRight() {
+        if (!validatePos(focusPos)) {
+          initPos();
+          return;
+        }
+        if (focusItem && !focusItem.isLeaf && cascaderTypes[focusPos.x] !== focusItem.type) {
+          onCollapse(focusItem.type, focusPos.x);
+          setFocusPos({
+            x: focusPos.x + 1,
+            y: 0
+          });
+        }
+      },
+      selectFocusItem() {
+        if (!validatePos(focusPos)) {
+          return;
+        }
+        if (focusItem?.isLeaf) {
+          onChange(focusValue);
+        }
+      }
+    })
+  );
+  return {
+    focusValue
+  };
+};
+var useFocusItemSearch = ({
+  ref,
+  onChange,
+  viewValue
+}) => {
+  const [focusPos, setFocusPos] = useState3(-1);
+  const focusValue = useMemo4(() => viewValue[focusPos]?.value, [viewValue, focusPos]);
+  const focusItem = useMemo4(() => viewValue[focusPos], [viewValue, focusPos]);
+  useImperativeHandle(ref, () => ({
+    selectFocusItem() {
+      if (!focusItem.disabled) {
+        onChange(focusValue);
+      }
+    },
+    moveFocusItemDown() {
+      if (focusPos < 0) {
+        setFocusPos(0);
+        return;
+      }
+      let newPos = (focusPos + 1) % viewValue.length;
+      while (viewValue[newPos]?.disabled && newPos !== focusPos) {
+        newPos = (newPos + 1) % viewValue.length;
+      }
+      setFocusPos(newPos);
+    },
+    moveFocusItemLeft: noop,
+    moveFocusItemRight: noop,
+    moveFocusItemUp() {
+      if (focusPos < 0) {
+        setFocusPos(0);
+        return;
+      }
+      let newPos = (focusPos - 1 + viewValue.length) % viewValue.length;
+      while (viewValue[newPos]?.disabled && newPos !== focusPos) {
+        newPos = (newPos - 1 + viewValue.length) % viewValue.length;
+      }
+      setFocusPos(newPos);
+    },
+    initFocusItem() {
+      setFocusPos(0);
+    },
+    clearFocusItem() {
+      setFocusPos(-1);
+    }
+  }));
+  return {
+    focusValue
+  };
+};
+
+// src/components/type-selector/cascader-v2/style.ts
+import styled2, { createGlobalStyle as createGlobalStyle2 } from "styled-components";
+import { Typography as Typography6 } from "@douyinfe/semi-ui";
+var StyledFullContainer = styled2.div`
+  width: 100%;
+  height: 100%;
+`;
+var CustomCascaderContainer = styled2.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+var CascaderContainer = styled2(StyledFullContainer)`
+  position: relative;
+`;
+var TriggerText = styled2.div`
+  display: flex;
+  width: 100%;
+`;
+var CascaderDropdown = styled2.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+`;
+var TriggerGlobalStyle = createGlobalStyle2`
+  .semi-cascader-selection {
+    font-size: 12px !important;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+`;
+var CascaderOptionItem = styled2.li`
+  ${(props) => props.focus ? "background-color: var(--semi-color-fill-0)" : ""}
+`;
+var DropdownGlobalStyle = createGlobalStyle2`
+  .semi-cascader-option-lists {
+    max-width: 510px;
+    overflow-x: auto;
+    height: auto;
+
+
+    .semi-cascader-option-list {
+    width: 150px;
+    flex-shrink: 0;
+    border-left: none;
+    border-right: 1px solid var(--semi-color-fill-0);
+
+    max-height: 50vh;
+
+    ::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    .semi-cascader-option {
+      font-size: 12px !important;
+      width: 100%;
+      padding: 6px 12px;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+
+    .semi-cascader-option-disabled {
+      cursor: not-allowed;
+    }
+
+  }
+
+  .semi-cascader-option-icon {
+    margin-right:8px;
+  }
+
+  .semi-cascader-option-icon-empty {
+    margin-right: 0;
+  }
+
+`;
+var StyledSearchList = styled2.ul`
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  width: 100%;
+  height: 100%;
+`;
+var TypeSearchText = styled2(Typography6.Text)`
+  padding: 8px 12px;
+`;
+var TextGlobalStyle = createGlobalStyle2`
+  .semi-typography {
+    color: unset !important;
+  }
+
+`;
+var SearchText = styled2.span`
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+  cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
+  ${(props) => props.disabled ? "color: var(--semi-color-disabled-text);" : ""};
+`;
+var SearchIcon = styled2.span`
+  display: inline-flex;
+  align-items: center;
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+// src/components/type-selector/cascader-v2/type-search.tsx
+var defaultDeep = 2;
+var SearchItem = ({ item, query, focusValue, onSelect, selectValue }) => {
+  const typeService = useTypeDefinitionManager();
+  const { convertOptionValueToModeValue } = useTypeTransform();
+  const config = typeService.getTypeByName(item.type);
+  const typeSchema = useMemo5(
+    () => convertOptionValueToModeValue(item.value),
+    [item.value]
+  );
+  const text = useMemo5(() => config?.getDisplayText(typeSchema), [typeSchema, config]);
+  const label = useHighlightKeyword(
+    text || "",
+    query,
+    {
+      color: "var(--semi-color-primary)",
+      fontWeight: 600
+    },
+    item.value
+  );
+  return /* @__PURE__ */ React11.createElement(
+    "li",
+    {
+      key: item.value,
+      onClick: () => item.disabled ? void 0 : onSelect(item, typeSchema),
+      style: {
+        minWidth: "unset",
+        background: focusValue === item.value ? "var(--semi-color-fill-0)" : void 0
+      },
+      className: classNames(
+        "semi-cascader-option",
+        item.disabled && "semi-cascader-option-disabled",
+        selectValue === item.value && "semi-cascader-option-select"
+      )
+    },
+    /* @__PURE__ */ React11.createElement(TextGlobalStyle, null),
+    /* @__PURE__ */ React11.createElement(SearchText, { disabled: !!item.disabled }, /* @__PURE__ */ React11.createElement(SearchIcon, null, config?.getDisplayIcon?.(typeSchema)), /* @__PURE__ */ React11.createElement(Typography7.Text, { ellipsis: { showTooltip: true } }, /* @__PURE__ */ React11.createElement("span", null, label)))
+  );
+};
+var TypeSearchPanel = forwardRef2(({ query, disableTypes = [], onChange, triggerRef, value, onSearchChange }, ref) => {
+  const typeService = useTypeDefinitionManager();
+  const {
+    convertValueToOptionValue,
+    checkHasChildren,
+    convertOptionValueToModeValue,
+    getModeOptionChildrenType
+  } = useTypeTransform();
+  const customDisableType = useMemo5(() => {
+    const map = /* @__PURE__ */ new Map();
+    disableTypes.forEach((v) => {
+      map.set(v.type, v.reason);
+    });
+    return map;
+  }, [disableTypes]);
+  const selectValue = useMemo5(() => convertValueToOptionValue(value), [value]);
+  const [searchResult, setSearchResult] = useState4([]);
+  const levelCache = useRef2([]);
+  const handleGenLevelInfo = useCallback3(
+    (level) => {
+      for (let i = 0; i < level; i++) {
+        if (levelCache.current[i]) {
+          continue;
+        }
+        if (i === 0) {
+          const newRootTypes = typeService.getTypeRegistriesWithParentType();
+          levelCache.current[i] = newRootTypes.map((type) => ({
+            key: type.type,
+            type: type.type,
+            parentLabels: [],
+            disabled: customDisableType.get(type.type)
+          }));
+        } else {
+          const lastLevelCache = levelCache.current[i - 1];
+          const newCacheTypes = [];
+          levelCache.current[i] = newCacheTypes;
+          lastLevelCache.forEach((type) => {
+            if (type.disabled) {
+              return;
+            }
+            const config = typeService.getTypeByName(type.type);
+            const parentTypes = type.key.split("-");
+            if (config && checkHasChildren(config, {
+              level: i
+            })) {
+              const childrenTypes = getModeOptionChildrenType(
+                config,
+                {
+                  parentType: type.type,
+                  level: i,
+                  parentTypes
+                }
+              );
+              childrenTypes.forEach((child) => {
+                const childConfig = typeService.getTypeByName(child.type);
+                newCacheTypes.push({
+                  type: child.type,
+                  key: [...parentTypes, child.type].join("-"),
+                  disabled: child.disabled || (childConfig?.customDisabled ? childConfig.customDisabled({
+                    level: i + 1,
+                    parentType: type.type,
+                    parentTypes
+                  }) : void 0)
+                });
+              });
+            }
+          });
+        }
+      }
+    },
+    [customDisableType]
+  );
+  const handleGenSearchResult = useCallback3(() => {
+    const len = levelCache.current.length;
+    if (!query) {
+      setSearchResult([]);
+      return;
+    }
+    const newSearchResult = [];
+    for (let i = 0; i < len; i++) {
+      const cacheTypes = levelCache.current[i] || [];
+      cacheTypes.forEach((type) => {
+        const config = typeService.getTypeByName(type.type);
+        if (config && config.label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1) {
+          newSearchResult.push({
+            value: type.key,
+            icon: config.icon,
+            disabled: type.disabled,
+            level: i,
+            type: type.type
+          });
+        }
+      });
+    }
+    setSearchResult(newSearchResult);
+  }, [query]);
+  useEffect4(() => {
+    handleGenLevelInfo(defaultDeep);
+  }, [handleGenLevelInfo]);
+  useEffect4(() => {
+    handleGenSearchResult();
+  }, [query]);
+  const viewValue = useMemo5(
+    () => searchResult.filter((item) => {
+      const config = typeService.getTypeByName(item.type);
+      return config && !checkHasChildren(config, {
+        level: item.level
+      });
+    }),
+    [searchResult, typeService]
+  );
+  const { focusValue } = useFocusItemSearch({
+    ref,
+    viewValue,
+    onChange: (v) => {
+      const newVal = convertOptionValueToModeValue(v);
+      onChange?.(newVal, { source: "custom-panel" });
+      onSearchChange("");
+    }
+  });
+  return /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      className: classNames("semi-cascader-option-lists"),
+      style: triggerRef.current ? { width: Math.max(triggerRef.current.clientWidth, 150) } : {}
+    },
+    /* @__PURE__ */ React11.createElement(StyledSearchList, { className: classNames("semi-cascader-option-list") }, /* @__PURE__ */ React11.createElement(React11.Fragment, null, viewValue.length === 0 ? /* @__PURE__ */ React11.createElement(TypeSearchText, { type: "secondary" }, "No results.") : /* @__PURE__ */ React11.createElement(React11.Fragment, null, viewValue.map((item) => /* @__PURE__ */ React11.createElement(
+      SearchItem,
+      {
+        selectValue,
+        key: item.value,
+        query,
+        focusValue,
+        item,
+        onSelect: (_, v) => onChange?.(v, { source: "type-selector" })
+      }
+    )))))
+  );
+});
+
+// src/components/type-selector/cascader-v2/type-cascader.tsx
+import React13, { forwardRef as forwardRef3, useCallback as useCallback4, useMemo as useMemo6, useState as useState6 } from "react";
+import classNames2 from "classnames";
+import { Tooltip as Tooltip2 } from "@douyinfe/semi-ui";
+import { IconCheckboxTick, IconChevronRight } from "@douyinfe/semi-icons";
+
+// src/components/type-selector/utils/index.tsx
+import React12 from "react";
+var definitionToCascaderOption = ({
+  config,
+  customDisableType = /* @__PURE__ */ new Map(),
+  prefix,
+  parentTypes,
+  disabled,
+  parentType,
+  level
+}) => {
+  const typeValue = config.type;
+  const optionValue = prefix ? [prefix, typeValue].join("-") : typeValue;
+  const label = /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: 8, alignItems: "center" } }, config.icon, /* @__PURE__ */ React12.createElement("span", null, config.label));
+  const customDisabled = config.customDisabled && config.customDisabled({ level, parentType, parentTypes });
+  const reason = disabled || customDisableType.get(typeValue) || customDisabled;
+  return {
+    disabled: reason,
+    value: optionValue,
+    label,
+    type: typeValue,
+    source: config.typeCascaderConfig?.unClosePanelAfterSelect ? "custom-panel" : "type-selector",
+    isLeaf: reason ? true : !(config.getSupportedItemTypes && config.getSupportedItemTypes({ level }).length !== 0 || config.container)
+  };
+};
+var typeSelectorUtils = {
+  definitionToCascaderOption
+};
+
+// src/components/type-selector/hooks/root-types.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+var genId = (options) => options.map((v) => `${v.disabled}${v.label}`).join("-");
+var useCascaderRootTypes = (customDisableType) => {
+  const [rootTypes, setRootTypes] = useState5([]);
+  const typeService = useTypeDefinitionManager();
+  useEffect5(() => {
+    const init = () => {
+      const newRootTypes = typeService.getTypeRegistriesWithParentType().map((config) => {
+        const res = typeSelectorUtils.definitionToCascaderOption({
+          customDisableType,
+          config,
+          level: 0,
+          parentTypes: []
+        });
+        return res;
+      });
+      if (genId(newRootTypes) !== genId(rootTypes)) {
+        setRootTypes(newRootTypes);
+      }
+    };
+    init();
+    const dispose = typeService.onTypeRegistryChange(init);
+    return () => {
+      dispose.dispose();
+    };
+  }, [rootTypes, customDisableType]);
+  return rootTypes;
+};
+
+// src/components/type-selector/cascader-v2/type-cascader.tsx
+var OptionList = ({
+  options,
+  activeType,
+  selectValue,
+  onCollapse,
+  onSelect,
+  focusValue
+}) => /* @__PURE__ */ React13.createElement("ul", { className: "semi-cascader-option-list" }, options.map((opt) => {
+  const child = /* @__PURE__ */ React13.createElement(
+    CascaderOptionItem,
+    {
+      focus: focusValue === opt.value,
+      onClick: !opt.disabled ? () => opt.isLeaf ? onSelect?.(
+        opt.value,
+        opt.source
+      ) : onCollapse?.(opt.type) : void 0,
+      key: opt.value,
+      className: classNames2(
+        "semi-cascader-option",
+        activeType === opt.type && "semi-cascader-option-active",
+        selectValue === opt.value && "semi-cascader-option-select",
+        opt.disabled && "semi-cascader-option-disabled"
+      )
+    },
+    /* @__PURE__ */ React13.createElement("span", { className: "semi-cascader-option-label" }, selectValue === opt.value ? /* @__PURE__ */ React13.createElement(
+      IconCheckboxTick,
+      {
+        className: classNames2("semi-cascader-option-icon"),
+        style: {
+          color: selectValue === opt.value ? "var(--semi-color-primary)" : void 0
+        }
+      }
+    ) : /* @__PURE__ */ React13.createElement("span", { className: "semi-cascader-option-icon semi-cascader-option-icon-empty" }), typeof opt.label === "string" ? /* @__PURE__ */ React13.createElement("span", null, opt.label) : opt.label),
+    !opt.isLeaf && /* @__PURE__ */ React13.createElement(IconChevronRight, null)
+  );
+  return opt.disabled ? /* @__PURE__ */ React13.createElement(Tooltip2, { content: opt.disabled }, child) : child;
+}));
+var useGenerateCascaderTypes = () => {
+  const typeService = useTypeDefinitionManager();
+  const generateCascaderTypes = useCallback4(
+    (value) => {
+      const res = [];
+      const types = value?.split("-") || [];
+      const arr = types.splice(0, types.length - 1) || [];
+      while (arr.length > 0) {
+        const type = arr.shift();
+        if (type) {
+          const config = type ? typeService.getTypeByName(type) : void 0;
+          if (config?.customChildOptionValue) {
+            const extras = config.customChildOptionValue();
+            arr.splice(0, extras.length);
+          }
+          res.push(type);
+        }
+      }
+      return res;
+    },
+    [typeService]
+  );
+  return generateCascaderTypes;
+};
+var generateCustomPanelType = (value) => (value?.split("-") || []).pop() || "";
+var TypeCascader = forwardRef3(({ value: originValue, onChange, onContextChange, onRePos, disableTypes = [] }, ref) => {
+  const typeService = useTypeDefinitionManager();
+  const {
+    convertOptionValueToModeValue,
+    convertValueToOptionValue,
+    getModeOptionChildrenType
+  } = useTypeTransform();
+  const customDisableType = useMemo6(() => {
+    const map = /* @__PURE__ */ new Map();
+    disableTypes.forEach((v) => {
+      map.set(v.type, v.reason);
+    });
+    return map;
+  }, [disableTypes]);
+  const rootTypes = useCascaderRootTypes(customDisableType);
+  const generateCascaderTypes = useGenerateCascaderTypes();
+  const value = useMemo6(() => convertValueToOptionValue(originValue), [originValue]);
+  const [cascaderTypes, setCascaderLTypes] = useState6(generateCascaderTypes(value));
+  const [customPanelType, setCustomPanelType] = useState6(generateCustomPanelType(value));
+  const handleChange = useCallback4(
+    (newOptionValue, source = "type-selector") => {
+      if (newOptionValue === value) {
+        setCascaderLTypes(generateCascaderTypes(newOptionValue));
+        setCustomPanelType(generateCustomPanelType(newOptionValue));
+        onRePos();
+        return;
+      }
+      const newValue = convertOptionValueToModeValue(newOptionValue);
+      if (onChange) {
+        onChange(newValue, {
+          source
+        });
+      }
+      setCascaderLTypes(generateCascaderTypes(newOptionValue));
+      setCustomPanelType(generateCustomPanelType(newOptionValue));
+      const newCtx = newValue && typeService.getTypeBySchema(newValue)?.typeCascaderConfig?.generateInitCtx?.(newValue) || {};
+      onContextChange(newCtx);
+    },
+    [onChange, onContextChange, value]
+  );
+  const renderData = useMemo6(
+    () => cascaderTypes.map((item, level) => {
+      const parentDef = typeService.getTypeByName(item);
+      const childrenType = getModeOptionChildrenType(
+        parentDef,
+        {
+          parentType: item,
+          level: level + 1,
+          parentTypes: [...cascaderTypes].splice(0, level)
+        }
+      );
+      const prefix = [...cascaderTypes].splice(0, level + 1).map((type) => {
+        const config = typeService.getTypeByName(type);
+        if (config?.customChildOptionValue) {
+          return [type, config.customChildOptionValue()];
+        }
+        return type;
+      }).flat().join("-");
+      const options = childrenType.map((child) => {
+        const def = typeService.getTypeByName(child.type);
+        if (def) {
+          return typeSelectorUtils.definitionToCascaderOption({
+            config: def,
+            customDisableType,
+            prefix,
+            // parentConfig: parentDef,
+            level: level + 1,
+            disabled: child.disabled,
+            parentType: item,
+            parentTypes: [...cascaderTypes].splice(0, level + 1)
+          });
+        }
+      }).filter(Boolean);
+      return {
+        item,
+        options
+      };
+    }),
+    [cascaderTypes, customDisableType]
+  );
+  const handleCollapse = useCallback4(
+    (type, level) => {
+      const newCascaderTypes = [...cascaderTypes];
+      if (cascaderTypes[level] !== type) {
+        newCascaderTypes.splice(level);
+        newCascaderTypes.push(type);
+      } else {
+        newCascaderTypes.splice(level);
+      }
+      setCustomPanelType("");
+      onRePos();
+      setCascaderLTypes(newCascaderTypes);
+    },
+    [cascaderTypes]
+  );
+  const { focusValue } = useFocusItemCascader({
+    rootTypes,
+    onCollapse: handleCollapse,
+    renderData,
+    cascaderTypes,
+    onChange: (v) => handleChange(v, "type-selector"),
+    ref
+  });
+  return /* @__PURE__ */ React13.createElement(CascaderDropdown, null, /* @__PURE__ */ React13.createElement(DropdownGlobalStyle, null), /* @__PURE__ */ React13.createElement("div", { className: "semi-cascader-option-lists" }, /* @__PURE__ */ React13.createElement(
+    OptionList,
+    {
+      activeType: cascaderTypes[0],
+      selectValue: value,
+      options: rootTypes,
+      focusValue,
+      onSelect: handleChange,
+      onCollapse: (type) => handleCollapse(type, 0)
+    }
+  ), renderData.map(({ item, options }, level) => /* @__PURE__ */ React13.createElement(
+    OptionList,
+    {
+      onSelect: handleChange,
+      key: item + level,
+      focusValue,
+      activeType: cascaderTypes[level + 1],
+      selectValue: value,
+      options,
+      onCollapse: (type) => handleCollapse(type, level + 1)
+    }
+  )), originValue && typeService.getTypeByName(customPanelType)?.typeCascaderConfig?.customCascaderPanel?.({
+    typeSchema: originValue,
+    onChange: (newVal) => {
+      onChange?.(newVal, {
+        source: "custom-panel"
+      });
+      const newCtx = typeService.getTypeBySchema(newVal)?.typeCascaderConfig?.generateInitCtx?.(newVal) || {};
+      onContextChange(newCtx);
+    }
+  }) || null));
+});
+
+// src/components/type-selector/cascader-v2/trigger.tsx
+import React15, { useMemo as useMemo8, useState as useState7 } from "react";
+import classNames3 from "classnames";
+import { Input as Input3 } from "@douyinfe/semi-ui";
+import { IconChevronDown } from "@douyinfe/semi-icons";
+
+// src/components/type-selector/hooks/hot-key.ts
+import { useMemo as useMemo7 } from "react";
+var useTypeSelectorHotKey = (selector) => {
+  const hotKeyConfig = useMemo7(() => {
+    const res = [
+      {
+        matcher: (e) => e.key === "Enter",
+        callback: () => {
+          selector.current?.selectFocusItem();
+        }
+      },
+      {
+        matcher: (e) => e.key === "ArrowUp",
+        callback: () => {
+          selector.current?.moveFocusItemUp();
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => e.key === "ArrowLeft",
+        callback: () => {
+          selector.current?.moveFocusItemLeft();
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => e.key === "ArrowRight",
+        callback: () => {
+          selector.current?.moveFocusItemRight();
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => e.key === "ArrowDown",
+        callback: () => {
+          selector.current?.moveFocusItemDown();
+        },
+        preventDefault: true
+      }
+    ];
+    return res;
+  }, []);
+  return hotKeyConfig;
+};
+
+// src/components/type-selector/cascader-v2/trigger.tsx
+var Trigger = ({
+  value: originValue,
+  ctx,
+  typeSelectorRef,
+  triggerRef,
+  searchValue,
+  onSearchChange
+}) => {
+  const typeService = useTypeDefinitionManager();
+  const value = useMemo8(() => {
+    if (!originValue) {
+      return;
+    }
+    const type = typeService.getTypeBySchema(originValue);
+    return type?.getStringValueByTypeSchema?.(originValue) || "";
+  }, [originValue]);
+  const [focus, setFocus] = useState7(false);
+  const hotkeys = useTypeSelectorHotKey(typeSelectorRef);
+  const reverseLabel = useMemo8(() => {
+    if (!value || !originValue) {
+      return;
+    }
+    const def = typeService.getTypeBySchema(originValue);
+    return def ? def.getDisplayLabel(originValue) : /* @__PURE__ */ React15.createElement(React15.Fragment, null, value);
+  }, [originValue, value]);
+  return /* @__PURE__ */ React15.createElement(
+    StyledFullContainer,
+    {
+      ref: triggerRef,
+      className: classNames3(
+        "semi-cascader semi-cascader-focus semi-cascader-single semi-cascader-filterable"
+      )
+    },
+    /* @__PURE__ */ React15.createElement(TriggerGlobalStyle, null),
+    /* @__PURE__ */ React15.createElement("div", { className: "semi-cascader-selection" }, /* @__PURE__ */ React15.createElement("div", { className: "semi-cascader-search-wrapper" }, !searchValue && /* @__PURE__ */ React15.createElement(
+      TriggerText,
+      {
+        style: {
+          opacity: focus ? 0.5 : 1
+        },
+        className: classNames3("semi-cascader-selection-text-inactive")
+      },
+      /* @__PURE__ */ React15.createElement(React15.Fragment, null, reverseLabel)
+    ), /* @__PURE__ */ React15.createElement("div", { className: "semi-input-wrapper semi-input-wrapper-focus semi-input-wrapper-default" }, /* @__PURE__ */ React15.createElement(
+      Input3,
+      {
+        autoFocus: true,
+        onFocus: () => {
+          setFocus(true);
+        },
+        onKeyDown: (e) => {
+          const hotKey = hotkeys.find((item) => item.matcher(e));
+          hotKey?.callback();
+          if (hotKey?.preventDefault) {
+            e.preventDefault();
+          }
+        },
+        value: searchValue,
+        onChange: (newVal) => {
+          onSearchChange(newVal);
+        },
+        className: "semi-cascader-input",
+        onBlur: () => {
+          setFocus(false);
+        }
+      }
+    )))),
+    /* @__PURE__ */ React15.createElement("div", { className: "semi-cascader-arrow" }, /* @__PURE__ */ React15.createElement(IconChevronDown, null))
+  );
+};
+
+// src/components/type-selector/cascader-v2/index.tsx
+var CascaderV2 = (props) => {
+  const {
+    triggerRender,
+    disabled,
+    defaultOpen,
+    onInit,
+    value,
+    onDropdownVisibleChange,
+    getPopupContainer = () => document.body
+  } = props;
+  const triggerRef = useRef3(null);
+  const typeSelectorRef = useRef3(null);
+  const [searchValue, setSearchValue] = useState8("");
+  const typeService = useTypeDefinitionManager();
+  useEffect6(() => {
+    if (typeSelectorRef.current) {
+      onInit?.(typeSelectorRef.current);
+    }
+  }, [typeSelectorRef.current, onInit]);
+  const [rePosKey, setReposKey] = useState8(0);
+  const [context, setContext] = useState8(
+    value && typeService.getTypeBySchema(value)?.typeCascaderConfig?.generateInitCtx?.(value) || {}
+  );
+  const [visible, setVisible] = useState8(defaultOpen);
+  if (disabled) {
+    return /* @__PURE__ */ React16.createElement(React16.Fragment, null, triggerRender ? /* @__PURE__ */ React16.createElement(CustomCascaderContainer, null, triggerRender()) : /* @__PURE__ */ React16.createElement(CascaderContainer, null, /* @__PURE__ */ React16.createElement(
+      Trigger,
+      {
+        typeSelectorRef,
+        triggerRef,
+        searchValue,
+        onSearchChange: setSearchValue,
+        ctx: context,
+        ...props
+      }
+    )));
+  }
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    Popover,
+    {
+      rePosKey,
+      visible,
+      onVisibleChange: (v) => {
+        setVisible(v);
+        if (onDropdownVisibleChange) {
+          onDropdownVisibleChange(v);
+        }
+        if (v) {
+          setReposKey((key) => key + 1);
+        }
+      },
+      autoAdjustOverflow: true,
+      trigger: "click",
+      position: "bottomLeft",
+      getPopupContainer,
+      content: !searchValue ? /* @__PURE__ */ React16.createElement(
+        TypeCascader,
+        {
+          ref: typeSelectorRef,
+          onContextChange: setContext,
+          onRePos: () => setReposKey((pre) => pre + 1),
+          ...props
+        }
+      ) : /* @__PURE__ */ React16.createElement(
+        TypeSearchPanel,
+        {
+          onSearchChange: setSearchValue,
+          ref: typeSelectorRef,
+          triggerRef,
+          query: searchValue,
+          ...props
+        }
+      )
+    },
+    triggerRender ? /* @__PURE__ */ React16.createElement(CustomCascaderContainer, null, triggerRender()) : /* @__PURE__ */ React16.createElement(CascaderContainer, null, /* @__PURE__ */ React16.createElement(
+      Trigger,
+      {
+        triggerRef,
+        searchValue,
+        onSearchChange: setSearchValue,
+        typeSelectorRef,
+        ctx: context,
+        ...props
+      }
+    ))
+  ));
+};
+
+// src/components/type-selector/index.tsx
+var TypeSelector = (props) => {
+  const [init, setInit] = useState9(false);
+  return /* @__PURE__ */ React17.createElement(
+    TypeEditorProvider,
+    {
+      typeRegistryCreators: props.typeRegistryCreators,
+      onInit: () => setInit(true)
+    },
+    init ? /* @__PURE__ */ React17.createElement(CascaderV2, { ...props }) : /* @__PURE__ */ React17.createElement(React17.Fragment, null)
+  );
+};
+
+// src/components/type-editor/columns/type.tsx
+var ViewRender2 = ({ rowData, onEditMode }) => {
+  const typeService = useTypeDefinitionManager();
+  const disabled = useDisabled("type" /* Type */, rowData);
+  const [refresh, setRefresh] = useState10(0);
+  useEffect7(() => {
+    typeService.onTypeRegistryChange(() => {
+      setRefresh((v) => v + 1);
+    });
+  }, [typeService]);
+  const typeConfig = useMemo9(() => typeService.getTypeBySchema(rowData.self), [refresh, rowData]);
+  const unknownNode = /* @__PURE__ */ React18.createElement(BaseIcon, null, /* @__PURE__ */ React18.createElement(IconHelpCircle, { style: { marginRight: 4 } }), "Unknown");
+  return disabled ? /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(TypeDisableViewContainer, null, /* @__PURE__ */ React18.createElement(Tooltip3, { content: disabled }, typeConfig?.getDisplayLabel?.(rowData) || unknownNode))) : /* @__PURE__ */ React18.createElement(
+    KeyViewContainer,
+    {
+      onClick: () => {
+        onEditMode();
+      }
+    },
+    typeConfig?.getDisplayLabel?.(rowData) || unknownNode
+  );
+};
+var setCellValue = (rowData, newData) => {
+  const othersProps = pick(rowData.self, ["required", "description", "flow"]);
+  if (rowData.parent?.properties) {
+    rowData.parent.properties[rowData.key] = {
+      ...newData,
+      ...othersProps
+    };
+  }
+};
+var EditRender2 = ({
+  rowData,
+  onChange,
+  typeEditor,
+  onViewMode
+}) => {
+  const [value, setValue] = useState10(rowData.self);
+  const typeService = useTypeDefinitionManager();
+  return /* @__PURE__ */ React18.createElement(KeyEditorContainer, null, /* @__PURE__ */ React18.createElement(
+    TypeSelector,
+    {
+      value,
+      typeRegistryCreators: typeEditor.typeRegistryCreators,
+      disableTypes: rowData.extraConfig?.customDisabledTypes,
+      onDropdownVisibleChange: (vis) => {
+        if (!vis) {
+          onViewMode();
+        }
+      },
+      onChange: (newData, ctx) => {
+        if (!newData) {
+          return;
+        }
+        setCellValue(rowData, newData);
+        setValue(newData);
+        onChange();
+        let unClose = false;
+        typeEditorUtils.traverseIJsonSchema(newData, (type) => {
+          const def = typeService.getTypeBySchema(type);
+          if (def?.typeCascaderConfig?.unClosePanelAfterSelect) {
+            unClose = true;
+          }
+        });
+        if (ctx.source === "type-selector" && !unClose) {
+          onViewMode();
+        }
+      },
+      defaultOpen: true,
+      onBlur: () => {
+        onViewMode();
+      }
+    }
+  ));
+};
+var typeColumnConfig = {
+  type: "type" /* Type */,
+  label: "Type",
+  width: 20,
+  viewRender: ViewRender2,
+  shortcuts: {
+    onTab: ({ typeEditor }) => {
+      typeEditor.moveActivePosToNextItem();
+    },
+    onCopy: (ctx) => {
+      const {
+        typeEditor: { typeDefinition, clipboard },
+        rowData
+      } = ctx;
+      const config = typeDefinition.getTypeBySchema(rowData.self);
+      if (config) {
+        const optionValue = config.getStringValueByTypeSchema?.(rowData.self);
+        const type = optionValue && config.getTypeSchemaByStringValue ? config.getTypeSchemaByStringValue(optionValue) : config.getDefaultSchema();
+        type.properties = rowData.properties;
+        type.required = rowData.required;
+        clipboard.writeData(JSON.stringify(type));
+        Toast.success("Copy type success!");
+      } else {
+        Toast.error("Copy type failed: this type undefined");
+      }
+    },
+    onPaste: (ctx) => {
+      const {
+        typeEditor: { typeDefinition, clipboard, onChange },
+        rowData
+      } = ctx;
+      clipboard.readData().then((data) => {
+        const parseData = typeEditorUtils.jsonParse(data);
+        const originIndex = rowData.extra?.index || 0;
+        const config = parseData && typeDefinition.getTypeBySchema(parseData);
+        if (config && typeof parseData === "object") {
+          typeEditorUtils.fixFlowIndex(parseData);
+          if (parseData.extra) {
+            parseData.extra.index = originIndex;
+          }
+          setCellValue(rowData, parseData);
+          onChange();
+        } else {
+          Toast.warning("Please paste the correct type schema!");
+        }
+      });
+    }
+  },
+  editRender: EditRender2
+};
+
+// src/components/type-editor/columns/required.tsx
+import React19 from "react";
+import { Checkbox, Toast as Toast2, Tooltip as Tooltip4 } from "@douyinfe/semi-ui";
+var setCellValue2 = (rowData) => {
+  const { parent } = rowData;
+  if (!parent) {
+    return;
+  }
+  if (!parent.required) {
+    parent.required = [];
+  }
+  const idx = parent.required.findIndex((key) => key === rowData.key);
+  if (idx !== -1) {
+    parent.required.splice(idx, 1);
+  } else {
+    parent.required.push(rowData.key);
+  }
+};
+var ViewRender3 = ({
+  rowData,
+  onChange,
+  onEditMode
+}) => {
+  const disabled = useDisabled("required" /* Required */, rowData);
+  const child = /* @__PURE__ */ React19.createElement(
+    Checkbox,
+    {
+      disabled: !!disabled,
+      checked: !!rowData.isRequired,
+      onChange: () => {
+        setCellValue2(rowData);
+        onChange();
+        onEditMode();
+      }
+    }
+  );
+  return /* @__PURE__ */ React19.createElement(CenterContainer, { onClick: !disabled ? () => onEditMode() : void 0 }, disabled ? /* @__PURE__ */ React19.createElement(Tooltip4, { content: disabled }, child) : child);
+};
+var requiredColumnConfig = {
+  type: "required" /* Required */,
+  label: "Required",
+  width: 11,
+  viewRender: ViewRender3,
+  shortcuts: {
+    onEnter: ({ onChange, rowData, typeEditor }) => {
+      setCellValue2(rowData);
+      onChange();
+      typeEditor.moveActivePosToNextLine();
+    },
+    onTab: ({ typeEditor }) => {
+      typeEditor.moveActivePosToNextItem();
+    },
+    onCopy: (ctx) => {
+      const {
+        rowData,
+        typeEditor: { clipboard }
+      } = ctx;
+      clipboard.writeData(
+        JSON.stringify({
+          required: rowData.isRequired
+        })
+      );
+      Toast2.success("Copy required success!");
+    },
+    onPaste: (ctx) => {
+      const {
+        typeEditor: { clipboard, onChange },
+        rowData
+      } = ctx;
+      clipboard.readData().then((data) => {
+        const parseData = typeEditorUtils.jsonParse(data);
+        const disabled = (rowData.disableEditColumn || []).find(
+          (r) => r.column === "required" /* Required */
+        );
+        if (disabled) {
+          Toast2.warning("The current cell does not support editing!");
+          return;
+        }
+        if (parseData && typeof parseData === "object" && parseData.required !== void 0) {
+          const { parent } = rowData;
+          if (!parent) {
+            return;
+          }
+          if (!parent.required) {
+            parent.required = [];
+          }
+          const idx = parent.required.findIndex((key) => key === rowData.key);
+          const originRequired = idx !== -1;
+          if (originRequired !== parseData.required) {
+            if (idx !== -1) {
+              parent.required.splice(idx, 1);
+            } else {
+              parent.required.push(rowData.key);
+            }
+            onChange();
+          }
+        } else {
+          Toast2.warning("Please paste the correct info!");
+        }
+      });
+    },
+    onDown: (ctx) => {
+      ctx.typeEditor.moveActivePosToNextLine();
+    },
+    onLeft: (ctx) => {
+      ctx.typeEditor.moveActivePosToLastColumn();
+    },
+    onUp: (ctx) => {
+      ctx.typeEditor.moveActivePosToLastLine();
+    },
+    onRight: (ctx) => {
+      ctx.typeEditor.moveActivePosToNextColumn();
+    }
+  }
+};
+
+// src/components/type-editor/columns/private.tsx
+import React20 from "react";
+import { Checkbox as Checkbox2, Toast as Toast3, Tooltip as Tooltip5 } from "@douyinfe/semi-ui";
+var setCellValue3 = (rowData) => {
+  if (!rowData.extra) {
+    rowData.extra = {};
+  }
+  rowData.extra.private = !rowData.extra.private;
+};
+var ViewRender4 = ({
+  rowData,
+  onChange,
+  onEditMode
+}) => {
+  const disabled = useDisabled("required" /* Required */, rowData);
+  const child = /* @__PURE__ */ React20.createElement(
+    Checkbox2,
+    {
+      disabled: !!disabled,
+      checked: !!rowData.extra?.private,
+      onChange: () => {
+        setCellValue3(rowData);
+        onChange();
+        onEditMode();
+      }
+    }
+  );
+  return /* @__PURE__ */ React20.createElement(CenterContainer, { onClick: !disabled ? () => onEditMode() : void 0 }, disabled ? /* @__PURE__ */ React20.createElement(Tooltip5, { content: disabled }, child) : child);
+};
+var privateColumnConfig = {
+  type: "private" /* Private */,
+  label: "Private",
+  width: 11,
+  viewRender: ViewRender4,
+  info: () => "Private under the current project.",
+  shortcuts: {
+    onEnter: ({ onChange, rowData, typeEditor }) => {
+      setCellValue3(rowData);
+      onChange();
+      typeEditor.moveActivePosToNextLine();
+    },
+    onTab: ({ typeEditor }) => {
+      typeEditor.moveActivePosToNextItem();
+    },
+    onCopy: (ctx) => {
+      const {
+        rowData,
+        typeEditor: { clipboard }
+      } = ctx;
+      clipboard.writeData(
+        JSON.stringify({
+          private: !!rowData.extra?.private
+        })
+      );
+      Toast3.success("Copy required success!");
+    },
+    onPaste: (ctx) => {
+      const {
+        typeEditor: { clipboard, onChange },
+        rowData
+      } = ctx;
+      clipboard.readData().then((data) => {
+        const parseData = typeEditorUtils.jsonParse(data);
+        const disabled = (rowData.disableEditColumn || []).find(
+          (r) => r.column === "private" /* Private */
+        );
+        if (disabled) {
+          Toast3.warning("The current cell does not support editing!");
+          return;
+        }
+        if (parseData && typeof parseData === "object" && parseData.private !== void 0) {
+          if (!rowData.extra) {
+            rowData.extra = {};
+          }
+          rowData.extra.private = parseData.private;
+          onChange();
+        } else {
+          Toast3.warning("Please paste the correct info!");
+        }
+      });
+    },
+    onDown: (ctx) => {
+      ctx.typeEditor.moveActivePosToNextLine();
+    },
+    onLeft: (ctx) => {
+      ctx.typeEditor.moveActivePosToLastColumn();
+    },
+    onUp: (ctx) => {
+      ctx.typeEditor.moveActivePosToLastLine();
+    },
+    onRight: (ctx) => {
+      ctx.typeEditor.moveActivePosToNextColumn();
+    }
+  }
+};
+
+// src/components/type-editor/columns/operate.tsx
+import React22 from "react";
+import { pick as pick2 } from "@flowgram.ai/utils";
+import toast from "@douyinfe/semi-ui/lib/es/toast";
+import { Toast as Toast5, Tooltip as Tooltip6 } from "@douyinfe/semi-ui";
+import { IconCopy, IconCopyAdd, IconDelete } from "@douyinfe/semi-icons";
+
+// src/components/type-editor/hooks/type-edit.ts
+import { useCallback as useCallback5 } from "react";
+import { Toast as Toast4 } from "@douyinfe/semi-ui";
+
+// src/components/type-editor/hooks/paste-data.ts
+import { useEffect as useEffect8, useMemo as useMemo10, useState as useState11 } from "react";
+var usePasteData = () => {
+  const clipboard = useService(ClipboardService);
+  const [pasteData, setPasteData] = useState11({
+    type: "invalid"
+  });
+  const typeDefinition = useTypeDefinitionManager();
+  const pasteDataFormate = useMemo10(
+    () => (data) => {
+      const parseData = typeEditorUtils.jsonParse(data);
+      if (!parseData || typeof parseData !== "object") {
+        return {
+          type: "invalid"
+        };
+      }
+      if (Array.isArray(parseData)) {
+        const isValid = parseData.every((item) => {
+          const config = typeDefinition.getTypeBySchema(item);
+          return !!config;
+        });
+        if (isValid) {
+          return {
+            type: "multiple",
+            value: parseData
+          };
+        } else {
+          return {
+            type: "invalid"
+          };
+        }
+      } else {
+        const config = typeDefinition.getTypeBySchema(parseData);
+        if (config) {
+          return {
+            type: "single",
+            value: parseData
+          };
+        } else {
+          return {
+            type: "invalid"
+          };
+        }
+      }
+    },
+    [typeDefinition]
+  );
+  useEffect8(() => {
+    clipboard.readData().then(
+      (v) => {
+        if (v !== void 0) {
+          setPasteData(pasteDataFormate(v));
+        }
+      },
+      (error) => {
+      }
+    );
+    const dispose = clipboard.onClipboardChanged((newData) => {
+      setPasteData(pasteDataFormate(newData));
+    });
+    return () => {
+      dispose.dispose();
+    };
+  }, [pasteDataFormate]);
+  return {
+    pasteDataFormate,
+    pasteData
+  };
+};
+
+// src/components/type-editor/hooks/type-edit.ts
+var useAddType = (rowData, onChange) => {
+  const typeEditor = useService(TypeEditorService);
+  const typeService = useTypeDefinitionManager();
+  const config = typeService.getTypeBySchema(rowData.self);
+  const handleAddType = useCallback5(
+    (e) => {
+      if (!config) {
+        return;
+      }
+      const currentSchema = rowData.self;
+      if (currentSchema) {
+        let index = -1;
+        const parent = config.getPropertiesParent?.(currentSchema);
+        if (!parent) {
+          return false;
+        }
+        if (!parent.properties) {
+          parent.properties = {};
+        }
+        Object.values(parent.properties).forEach((val) => {
+          if (!val.extra) {
+            val.extra = {
+              index: 0
+            };
+          }
+          index = Math.max(index, val.extra?.index || 0);
+        });
+        const [key, schema] = typeEditorUtils.genNewTypeSchema(index + 1);
+        parent.properties[key] = schema;
+        const dataSource = typeEditor.getDataSource();
+        let addIndex = rowData.index + 1;
+        for (let i = rowData.index + 1, len = dataSource.length; i < len; i++) {
+          if (dataSource[i].level > rowData.level) {
+            addIndex++;
+          } else {
+            break;
+          }
+        }
+        const newPos = {
+          x: 0,
+          y: addIndex
+        };
+        onChange();
+        typeEditor.setActivePos(newPos);
+      }
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [rowData, config, onChange]
+  );
+  return handleAddType;
+};
+var usePasteAddType = (rowData, onChange, onPaste) => {
+  const typeService = useTypeDefinitionManager();
+  const clipboard = useService(ClipboardService);
+  const { pasteDataFormate } = usePasteData();
+  const handlePasteAddType = useCallback5(
+    (e) => {
+      clipboard.readData().then((data) => {
+        const parseData = pasteDataFormate(data);
+        if (parseData.type === "invalid") {
+          Toast4.warning("Please paste the correct type schema!");
+          e.stopPropagation();
+          e.preventDefault();
+          return;
+        }
+        const currentSchema = rowData.self;
+        let index = -1;
+        const pasteDataItems = parseData.type === "single" ? [parseData.value] : [...parseData.value];
+        const config = typeService.getTypeBySchema(currentSchema);
+        const parent = config?.getPropertiesParent?.(currentSchema);
+        if (!parent) {
+          return;
+        }
+        if (!parent.properties) {
+          parent.properties = {};
+        }
+        Object.values(parent.properties).forEach((val) => {
+          if (!val.extra) {
+            val.extra = {
+              index: 0
+            };
+          }
+          index = Math.max(index, val.extra.index || 0);
+        });
+        pasteDataItems.forEach((item) => {
+          let itemKey = item?.extra?.key || typeEditorUtils.genEmptyKey();
+          while (parent.properties[itemKey]) {
+            itemKey = `${itemKey}__copy`;
+          }
+          if (!item?.extra?.value) {
+            delete item.extra;
+          }
+          item.extra = { index: ++index };
+          if (onPaste) {
+            item = onPaste(item) || item;
+          }
+          parent.properties[itemKey] = item;
+        });
+        onChange();
+      });
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [rowData, onChange]
+  );
+  return handlePasteAddType;
+};
+var useRemoveType = (rowData, onChange) => {
+  const typeEditorService = useService(TypeEditorService);
+  return useCallback5(() => {
+    const { parent } = rowData;
+    if (!parent) {
+      return;
+    }
+    const { properties = {} } = parent;
+    delete properties[rowData.key];
+    typeEditorUtils.sortProperties(rowData.parent);
+    if (typeEditorService.activePos.y === rowData.index) {
+      typeEditorService.clearActivePos();
+    }
+    typeEditorService.refreshErrorMsgAfterRemove(rowData.index);
+    onChange();
+  }, [onChange, rowData]);
+};
+
+// src/components/type-editor/hooks/error-cell.ts
+import { useMemo as useMemo11 } from "react";
+
+// src/components/type-editor/hooks/active-pos.ts
+import { useEffect as useEffect9, useState as useState12 } from "react";
+var useActivePos = () => {
+  const typeEditorService = useService(TypeEditorService);
+  const [activePos, setActivePos] = useState12(typeEditorService.activePos);
+  useEffect9(() => {
+    const dispose = typeEditorService.onActivePosChange.event((v) => {
+      setActivePos(v);
+    });
+    return () => {
+      dispose.dispose();
+    };
+  }, []);
+  return activePos;
+};
+
+// src/components/type-editor/hooks/error-cell.ts
+var useEditCellErrorMsg = (pos) => {
+  const typeEditor = useService(TypeEditorService);
+  const { data: errorMsgs } = useMonitorData(typeEditor.errorMsgs);
+  const msg = useMemo11(
+    () => errorMsgs?.find((v) => v.pos.x === pos.x && v.pos.y === pos.y)?.msg,
+    [pos, errorMsgs]
+  );
+  return msg;
+};
+var useViewCellErrorMsg = (rowData, config, pos) => {
+  const activePos = useActivePos();
+  const res = useMemo11(
+    () => (activePos.x !== pos.x || activePos.y !== pos.y) && config.validateCell ? config.validateCell(rowData, rowData.extraConfig) : void 0,
+    [rowData, config, activePos, pos]
+  );
+  return res;
+};
+var useHasErrorCell = (rowData, typeEditor) => {
+  const res = useMemo11(() => {
+    const configs = typeEditor.columnViewConfig.map((v) => typeEditor.getConfigByType(v.type));
+    return configs.map(
+      (config) => config?.validateCell ? config.validateCell(rowData, rowData.extraConfig) : void 0
+    ).filter(Boolean).length !== 0;
+  }, [rowData, typeEditor]);
+  return res;
+};
+
+// src/components/type-editor/columns/operate.tsx
+var pasteTooltipsMap = {
+  invalid: "Please confirm whether the clipboard value is correct",
+  multiple: "Multiple fields are not supported to be pasted into this field.",
+  single: void 0
+};
+var setCellValue4 = (rowData, newData, onPaste) => {
+  const othersProps = pick2(rowData.self, ["required", "description", "flow", "extra"]);
+  if (rowData.parent?.properties) {
+    const { parent } = rowData;
+    if (newData.extra) {
+      let { key } = newData.extra;
+      const { required } = newData.extra;
+      while (parent.properties[key] && key !== rowData.key) {
+        key = `${key}__copy`;
+      }
+      delete parent.properties[rowData.key];
+      delete newData.extra;
+      let newPasteData = {
+        ...newData,
+        ...othersProps
+      };
+      if (onPaste) {
+        newPasteData = onPaste(newPasteData) || newPasteData;
+      }
+      parent.properties[key] = newPasteData;
+      if (!parent.required) {
+        parent.required = [];
+      }
+      const idx = parent.required.findIndex((v) => v === rowData.key);
+      if (idx !== -1) {
+        parent.required.splice(idx, 1);
+      }
+      if (required) {
+        parent.required.push(key);
+      }
+    } else {
+      let newPasteData = {
+        ...newData,
+        ...othersProps
+      };
+      if (onPaste) {
+        newPasteData = onPaste(newPasteData) || newPasteData;
+      }
+      parent.properties[rowData.key] = newPasteData;
+    }
+  }
+};
+var operateColumnConfig = {
+  type: "operate" /* Operate */,
+  label: "Operate",
+  width: 11,
+  focusable: false,
+  viewRender: ({ rowData, onChange, typeEditor, onPaste }) => {
+    const disabled = useDisabled("operate" /* Operate */, rowData);
+    const clipboard = useService(ClipboardService);
+    const { pasteData } = usePasteData();
+    const typeDefinition = useTypeDefinitionManager();
+    const hasError = useHasErrorCell(rowData, typeEditor);
+    const handleRemove = useRemoveType(rowData, onChange);
+    const pasteErrorTips = pasteTooltipsMap[pasteData.type];
+    return /* @__PURE__ */ React22.createElement(CenterContainer, null, /* @__PURE__ */ React22.createElement(Tooltip6, { content: disabled || "Remove" }, /* @__PURE__ */ React22.createElement(BaseIcon, { primary: true, disabled: !!disabled }, /* @__PURE__ */ React22.createElement(
+      IconDelete,
+      {
+        id: getComponentId("remove-field"),
+        onClick: disabled ? void 0 : handleRemove,
+        size: "small"
+      }
+    ))), /* @__PURE__ */ React22.createElement(
+      Tooltip6,
+      {
+        content: hasError ? "The current field is incorrect and does not support copying." : "Copy this field"
+      },
+      /* @__PURE__ */ React22.createElement(BaseIcon, { primary: true, disabled: !!hasError }, /* @__PURE__ */ React22.createElement(
+        IconCopy,
+        {
+          onClick: () => {
+            if (hasError) {
+              return;
+            }
+            const copyData = {
+              ...rowData.self,
+              extra: {
+                key: rowData.key,
+                required: rowData.isRequired,
+                ...rowData.self.extra || {}
+              }
+            };
+            clipboard.writeData(JSON.stringify(copyData));
+            toast.success("copy this field success!");
+          },
+          size: "small"
+        }
+      ))
+    ), /* @__PURE__ */ React22.createElement(
+      Tooltip6,
+      {
+        content: disabled ? disabled : !pasteErrorTips ? "Paste field here" : pasteErrorTips
+      },
+      /* @__PURE__ */ React22.createElement(BaseIcon, { primary: true, disabled: !!(pasteErrorTips || disabled) }, /* @__PURE__ */ React22.createElement(
+        IconCopyAdd,
+        {
+          size: "small",
+          onClick: () => {
+            if (pasteErrorTips || disabled) {
+              return;
+            }
+            clipboard.readData().then((data) => {
+              const parseData = typeEditorUtils.jsonParse(data);
+              const originIndex = rowData.extra?.index || 0;
+              const config = parseData && typeDefinition.getTypeBySchema(parseData);
+              if (config && typeof parseData === "object") {
+                typeEditorUtils.fixFlowIndex(parseData);
+                parseData.extra.index = originIndex;
+                setCellValue4(rowData, parseData, onPaste);
+                onChange();
+              } else {
+                Toast5.warning("Please paste the correct type schema!");
+              }
+            });
+          }
+        }
+      ))
+    ));
+  },
+  shortcuts: {
+    onEnter: ({ typeEditor }) => {
+      typeEditor.moveActivePosToNextLine();
+    },
+    onTab: ({ typeEditor }) => {
+      typeEditor.moveActivePosToNextItem();
+    },
+    onDown: (ctx) => {
+      ctx.typeEditor.moveActivePosToNextLine();
+    },
+    onLeft: (ctx) => {
+      ctx.typeEditor.moveActivePosToLastColumn();
+    },
+    onUp: (ctx) => {
+      ctx.typeEditor.moveActivePosToLastLine();
+    },
+    onRight: (ctx) => {
+      ctx.typeEditor.moveActivePosToNextColumn();
+    }
+  }
+};
+
+// src/components/type-editor/columns/key.tsx
+import React25, { useEffect as useEffect10, useState as useState13 } from "react";
+import { Tooltip as Tooltip8 } from "@douyinfe/semi-ui";
+import { IconCopyAdd as IconCopyAdd2, IconHandle, IconPlus, IconTreeTriangleDown } from "@douyinfe/semi-icons";
+
+// src/components/type-editor/indent.tsx
+import React23 from "react";
+var WidthIndent = ({ width, style = {} }) => /* @__PURE__ */ React23.createElement("div", { style: { height: "100%", flexShrink: 0, width, ...style } });
+
+// src/components/type-editor/hooks/key-visible.tsx
+import React24, { useCallback as useCallback6 } from "react";
+import { Tooltip as Tooltip7 } from "@douyinfe/semi-ui";
+import { IconEyeClosed, IconEyeOpened } from "@douyinfe/semi-icons";
+var useKeyVisible = (rowData, onChange, extraConfig) => {
+  const disabled = useDisabled("key" /* Key */, rowData);
+  const handleVisibleChange = useCallback6(
+    (e) => {
+      const currentSchema = rowData.self;
+      if (!currentSchema.extra) {
+        currentSchema.extra = {};
+      }
+      currentSchema.extra.hidden = !currentSchema.extra.hidden;
+      onChange();
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [rowData.self, onChange]
+  );
+  const disableContent = disabled || typeof extraConfig.editorVisible === "string" ? disabled || extraConfig.editorVisible : void 0;
+  const visibleNode = /* @__PURE__ */ React24.createElement(React24.Fragment, null, disableContent ? /* @__PURE__ */ React24.createElement(Tooltip7, { content: disableContent }, /* @__PURE__ */ React24.createElement(BaseIcon, { disabled: true }, /* @__PURE__ */ React24.createElement(IconEyeOpened, { size: "small" }))) : rowData.extra?.hidden ? /* @__PURE__ */ React24.createElement(BaseIcon, null, /* @__PURE__ */ React24.createElement(IconEyeClosed, { onClick: handleVisibleChange, size: "small" })) : /* @__PURE__ */ React24.createElement(BaseIcon, null, /* @__PURE__ */ React24.createElement(IconEyeOpened, { onClick: handleVisibleChange, size: "small" })));
+  return extraConfig.editorVisible ? visibleNode : /* @__PURE__ */ React24.createElement(React24.Fragment, null);
+};
+
+// src/components/type-editor/columns/key.tsx
+var ViewRender5 = ({
+  rowData,
+  onEditMode,
+  readonly,
+  onChange,
+  onPaste,
+  unOpenKeys,
+  onChildrenVisibleChange,
+  dragSource
+}) => {
+  const { extraConfig } = rowData;
+  const typeService = useTypeDefinitionManager();
+  const config = typeService.getTypeBySchema(rowData.self);
+  const disabled = useDisabled("key" /* Key */, rowData);
+  const { hiddenDrag: originHiddenDrag } = extraConfig;
+  const hiddenDrag = originHiddenDrag || readonly;
+  const text = /* @__PURE__ */ React25.createElement(KeyViewText, { disabled: !!disabled, ellipsis: { showTooltip: true } }, typeEditorUtils.formateKey(rowData.key));
+  const visibleNode = useKeyVisible(rowData, onChange, extraConfig);
+  const handleAddType = useAddType(rowData, onChange);
+  const draggable = !(rowData.cannotDrag || disabled || hiddenDrag);
+  const { pasteData } = usePasteData();
+  const handlePasteAddType = usePasteAddType(rowData, onChange, onPaste);
+  if (config && config.canAddField?.(rowData)) {
+    const disabledAdd = extraConfig.disabledAdd ? extraConfig.disabledAdd(rowData) : void 0;
+    return /* @__PURE__ */ React25.createElement(
+      KeyViewContainer,
+      {
+        id: getComponentId("key-text"),
+        onClick: disabled ? void 0 : () => {
+          onEditMode();
+        }
+      },
+      !hiddenDrag && /* @__PURE__ */ React25.createElement(BaseIcon, { draggable: true, disabled: !draggable }, /* @__PURE__ */ React25.createElement(IconHandle, { ref: draggable ? dragSource : void 0 })),
+      /* @__PURE__ */ React25.createElement(WidthIndent, { width: rowData.level * 16 }),
+      /* @__PURE__ */ React25.createElement(KeyViewContent, null, rowData.childrenCount ? /* @__PURE__ */ React25.createElement(BaseIcon, { triangle: true, isRotate: !unOpenKeys[rowData.id] }, /* @__PURE__ */ React25.createElement(
+        IconTreeTriangleDown,
+        {
+          size: "small",
+          onClick: (e) => {
+            onChildrenVisibleChange(rowData.id, !unOpenKeys[rowData.id]);
+            e.stopPropagation();
+          }
+        }
+      )) : /* @__PURE__ */ React25.createElement(WidthIndent, { width: 12 }), disabled ? /* @__PURE__ */ React25.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React25.createElement(Tooltip8, { content: disabled }, text)) : text, !readonly && /* @__PURE__ */ React25.createElement(React25.Fragment, null, disabledAdd ? /* @__PURE__ */ React25.createElement(Tooltip8, { content: disabledAdd }, /* @__PURE__ */ React25.createElement(BaseIcon, { disabled: true }, /* @__PURE__ */ React25.createElement(IconPlus, { id: getComponentId("add-field"), size: "small" }))) : /* @__PURE__ */ React25.createElement(Tooltip8, { content: "add child field" }, /* @__PURE__ */ React25.createElement(BaseIcon, null, /* @__PURE__ */ React25.createElement(
+        IconPlus,
+        {
+          size: "small",
+          onClick: handleAddType,
+          id: getComponentId("add-field")
+        }
+      ))), disabledAdd || pasteData.type === "invalid" ? /* @__PURE__ */ React25.createElement(
+        Tooltip8,
+        {
+          content: disabledAdd || "Please confirm whether the clipboard value is correct"
+        },
+        /* @__PURE__ */ React25.createElement(BaseIcon, { disabled: true }, /* @__PURE__ */ React25.createElement(IconCopyAdd2, { size: "small" }))
+      ) : /* @__PURE__ */ React25.createElement(Tooltip8, { content: "paste as new child fields" }, /* @__PURE__ */ React25.createElement(BaseIcon, null, /* @__PURE__ */ React25.createElement(IconCopyAdd2, { size: "small", onClick: handlePasteAddType })))), extraConfig.editorVisible && visibleNode)
+    );
+  }
+  return /* @__PURE__ */ React25.createElement(
+    KeyViewContainer,
+    {
+      id: getComponentId("key-text"),
+      onClick: disabled ? void 0 : () => {
+        onEditMode();
+      }
+    },
+    !hiddenDrag && /* @__PURE__ */ React25.createElement(BaseIcon, { draggable: true, disabled: !draggable }, /* @__PURE__ */ React25.createElement(IconHandle, { ref: draggable ? dragSource : void 0 })),
+    /* @__PURE__ */ React25.createElement(WidthIndent, { width: (rowData.level + 1) * 16 }),
+    /* @__PURE__ */ React25.createElement(KeyViewContent, null, disabled ? /* @__PURE__ */ React25.createElement(Tooltip8, { content: disabled }, text) : text, extraConfig.editorVisible && visibleNode)
+  );
+};
+var validate = (value, rowData) => {
+  const res = rowData.extraConfig?.customValidateName?.(value);
+  const lastValue = rowData.key;
+  const parentTypeSchema = rowData.parent;
+  if (value !== lastValue && parentTypeSchema?.properties?.[value]) {
+    return "The same key exists at the current level.";
+  }
+  if (res) {
+    return res;
+  }
+};
+var changeValue = ({
+  rowData,
+  value
+}) => {
+  const lastValue = rowData.key;
+  const parentTypeSchema = rowData.parent;
+  if (value !== lastValue) {
+    if (parentTypeSchema && parentTypeSchema.properties) {
+      parentTypeSchema.properties[value] = parentTypeSchema.properties[lastValue];
+    }
+    if (parentTypeSchema?.properties) {
+      delete parentTypeSchema.properties[lastValue];
+    }
+  }
+};
+var EditRender3 = ({
+  rowData,
+  onChange,
+  typeEditor,
+  onError,
+  onFieldChange,
+  onViewMode
+}) => {
+  const [value, setValue] = useState13(typeEditorUtils.formateKey(rowData.key));
+  useEffect10(() => {
+    typeEditor.editValue = value;
+  }, [typeEditor, value]);
+  return /* @__PURE__ */ React25.createElement(KeyEditorContainer, null, /* @__PURE__ */ React25.createElement(
+    WidthIndent,
+    {
+      style: { background: "var(--semi-color-fill-0)" },
+      width: (rowData.level + 2) * 14 + (2 * rowData.level - 1) + (rowData.extraConfig.hiddenDrag ? -16 : 0)
+    }
+  ), /* @__PURE__ */ React25.createElement(
+    KeyEditorInput,
+    {
+      id: getComponentId("key-edit"),
+      onChange: (v) => {
+        setValue(v);
+        typeEditor.dataSourceTouchedMap[rowData.id] = true;
+        const res = validate(v, rowData);
+        typeEditor.setErrorMsg(typeEditor.activePos, res);
+        if (onError) {
+          onError(res ? [res] : []);
+        }
+      },
+      autoFocus: true,
+      onBlur: (e) => {
+        const oldValue = rowData.key;
+        if (value && validate(value, rowData)) {
+          typeEditor.blink.update(true);
+          e.stopPropagation();
+          e.preventDefault();
+          return;
+        }
+        const newVal = typeEditorUtils.deFormateKey(value, oldValue);
+        changeValue({ rowData, value: newVal });
+        onFieldChange && onFieldChange({
+          type: "key" /* Key */,
+          oldValue,
+          newValue: newVal
+        });
+        if (onError) {
+          onError([]);
+        }
+        onChange();
+        onViewMode();
+      },
+      value
+    }
+  ));
+};
+var dealMove = ({ rowData, value, onChange, typeEditor }, cb) => {
+  const validateRes = validate(value, rowData);
+  if (value && validateRes) {
+    typeEditor.blink.update(true);
+  } else {
+    changeValue({
+      value: typeEditorUtils.deFormateKey(value),
+      rowData
+    });
+    typeEditor.setErrorMsg(typeEditor.activePos);
+    onChange();
+    cb();
+  }
+};
+var keyColumnConfig = {
+  type: "key" /* Key */,
+  label: "Key",
+  viewRender: ViewRender5,
+  width: 43,
+  validateCell: (rowData, ctx) => {
+    const key = typeEditorUtils.formateKey(rowData.key);
+    if (!key) {
+      return {
+        level: "warning",
+        msg: "Empty lines will not be saved."
+      };
+    }
+    if (ctx.customValidateName) {
+      const customValidateRes = ctx.customValidateName(key);
+      if (customValidateRes) {
+        return {
+          level: "error",
+          msg: customValidateRes
+        };
+      }
+      return;
+    }
+    if (validate(key, rowData)) {
+      return {
+        level: "error",
+        msg: validate(key, rowData)
+      };
+    }
+  },
+  shortcuts: {
+    onEnter: (ctx) => {
+      dealMove(ctx, () => {
+        ctx.typeEditor.moveActivePosToNextLineWithAddLine(ctx.rowData);
+      });
+    },
+    onTab: (ctx) => {
+      dealMove(ctx, () => {
+        ctx.typeEditor.moveActivePosToNextItem();
+      });
+    }
+  },
+  editRender: EditRender3
+};
+
+// src/components/type-editor/columns/description.tsx
+import { useEffect as useEffect12, useState as useState15 } from "react";
+import React28 from "react";
+import { Tooltip as Tooltip9 } from "@douyinfe/semi-ui";
+
+// src/components/type-editor/hooks/editor-listener.tsx
+import React27, { useEffect as useEffect11, useRef as useRef4, useState as useState14 } from "react";
+
+// src/components/type-editor/hooks/hot-key.ts
+import { useMemo as useMemo12 } from "react";
+var useTypeEditorHotKey = () => {
+  const typeEditor = useService(TypeEditorService);
+  const operator = useService(TypeEditorOperationService);
+  const hotKeyConfig = useMemo12(() => {
+    const res = [
+      {
+        matcher: (e) => e.key === "Enter",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("enter");
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => e.key === "ArrowUp",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("up");
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => e.key === "Tab",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("tab");
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => e.key === "ArrowLeft",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("left");
+        }
+      },
+      {
+        matcher: (e) => e.key === "ArrowRight",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("right");
+        }
+      },
+      {
+        matcher: (e) => e.key === "ArrowDown",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("down");
+        },
+        preventDefault: true
+      },
+      {
+        matcher: (e) => (e.metaKey || e.ctrlKey) && e.key === "c",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("copy");
+        }
+      },
+      {
+        matcher: (e) => (e.metaKey || e.ctrlKey) && e.key === "v",
+        callback: () => {
+          typeEditor.triggerShortcutEvent("paste");
+        }
+      },
+      {
+        matcher: (e) => (e.metaKey || e.ctrlKey) && e.key === "z",
+        callback: () => {
+          operator.undo();
+        }
+      },
+      {
+        matcher: (e) => (e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "z",
+        callback: () => {
+          operator.redo();
+        }
+      }
+    ];
+    return res;
+  }, [typeEditor]);
+  return hotKeyConfig;
+};
+
+// src/components/type-editor/hooks/editor-listener.tsx
+var TypeEditorListener = ({
+  configs = [],
+  children
+}) => {
+  const dom = useRef4();
+  const lastWidth = useRef4(0);
+  const typeEditorService = useService(TypeEditorService);
+  const [init, setInit] = useState14(false);
+  useEffect11(() => {
+    if (dom.current) {
+      const el = dom.current;
+      const resize = new ResizeObserver((entries) => {
+        if (lastWidth.current === 0) {
+          lastWidth.current = entries[0].contentRect.width;
+        }
+        if (entries[0].contentRect.width !== lastWidth.current) {
+          typeEditorService.clearActivePos();
+        }
+      });
+      resize.observe(el);
+      return () => {
+        resize.unobserve(el);
+      };
+    }
+  }, [dom.current, typeEditorService]);
+  useEffect11(() => {
+    typeEditorService.registerConfigs(
+      columnConfigs
+    );
+    configs.forEach(
+      (config) => config.config && typeEditorService.addConfigProps(config.type, config.config)
+    );
+    setInit(true);
+  }, [typeEditorService, configs]);
+  const composition = useRef4(false);
+  const hotkeys = useTypeEditorHotKey();
+  return /* @__PURE__ */ React27.createElement(
+    "div",
+    {
+      style: { width: "100%" },
+      onCompositionStart: () => composition.current = true,
+      onCompositionEnd: () => composition.current = false,
+      onKeyDown: (e) => {
+        if (composition.current) return;
+        const hotKey = hotkeys.find((item) => item.matcher(e));
+        hotKey?.callback();
+        if (hotKey?.preventDefault) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      ref: dom
+    },
+    init && children
+  );
+};
+
+// src/components/type-editor/hooks/drag-drop.ts
+import { useDrag, useDrop } from "react-dnd";
+import { Toast as Toast6 } from "@douyinfe/semi-ui";
+var useRowDrag = (id, onChildrenVisibleChange) => {
+  const [{ isDragging }, drag, preview] = useDrag(
+    () => ({
+      type: "node-editor-dnd",
+      item: () => {
+        onChildrenVisibleChange(id, true);
+        return {
+          id
+        };
+      },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging()
+      })
+    }),
+    [id]
+  );
+  return {
+    drag,
+    isDragging,
+    preview
+  };
+};
+var useCellDrop = (rowData, index, dataSource, onChange) => {
+  const typeEditor = useService(TypeEditorService);
+  const typeService = useTypeDefinitionManager();
+  const [{ isOver }, drop] = useDrop(
+    () => ({
+      accept: "node-editor-dnd",
+      drop: (item) => {
+        if (item.id === rowData.id) {
+          typeEditor.clearDropInfo();
+          return;
+        }
+        const dragData = dataSource[item.id];
+        const definition = typeService.getTypeBySchema(rowData.self);
+        if (definition) {
+          const canHasChild = definition.canAddField?.(rowData.self);
+          let dropParent;
+          let dropIndex;
+          if (canHasChild) {
+            dropParent = definition.getPropertiesParent?.(rowData.self);
+            dropIndex = -1;
+          } else {
+            dropParent = rowData.parent;
+            dropIndex = (rowData.extra?.index || 0) + 0.1;
+          }
+          if (dropParent?.properties?.[dragData.key] && dropParent !== dragData.parent) {
+            Toast6.error("drop error: there is a duplicate key in the current object");
+            typeEditor.clearDropInfo();
+            return;
+          }
+          if (dragData.parent?.properties) {
+            delete dragData.parent.properties[dragData.key];
+          }
+          if (!dropParent.properties) {
+            dropParent.properties = {};
+          }
+          dropParent.properties[dragData.key] = dragData.self;
+          typeEditorUtils.fixFlowIndex(dragData);
+          dragData.extra.index = dropIndex;
+          typeEditorUtils.sortProperties(dropParent);
+          typeEditorUtils.sortProperties(dragData.parent);
+          onChange();
+        }
+        typeEditor.clearDropInfo();
+      },
+      hover() {
+        typeEditor.setDropInfo({
+          indent: rowData.level,
+          index,
+          rowDataId: rowData.id
+        });
+      },
+      collect: (monitor) => ({
+        isOver: monitor.isOver()
+      })
+    }),
+    [rowData]
+  );
+  return {
+    drop,
+    isOver
+  };
+};
+var useHeaderDrop = (root, dataSource, onChange) => {
+  const typeEditor = useService(TypeEditorService);
+  const typeService = useTypeDefinitionManager();
+  const [{ isOver }, drop] = useDrop(
+    () => ({
+      accept: "node-editor-dnd",
+      drop: (item) => {
+        const dragData = dataSource[item.id];
+        const definition = typeService.getTypeBySchema(root);
+        if (definition) {
+          const canHasChild = definition.canAddField(root);
+          let dropParent;
+          let dropIndex;
+          if (canHasChild) {
+            dropParent = definition.getPropertiesParent(root);
+            dropIndex = -1;
+            if (dropParent?.properties?.[dragData.key] && dropParent !== dragData.parent) {
+              Toast6.error("drop error: there is a duplicate key in the current object");
+              typeEditor.clearDropInfo();
+              return;
+            }
+            if (dragData.parent?.properties) {
+              delete dragData.parent.properties[dragData.key];
+            }
+            if (!dropParent.properties) {
+              dropParent.properties = {};
+            }
+            dropParent.properties[dragData.key] = dragData.self;
+            typeEditorUtils.fixFlowIndex(dragData);
+            dragData.extra.index = dropIndex;
+            typeEditorUtils.sortProperties(dropParent);
+            typeEditorUtils.sortProperties(dragData.parent);
+            onChange();
+          }
+          typeEditor.clearDropInfo();
+        }
+      },
+      hover() {
+        typeEditor.setDropInfo({
+          indent: 0,
+          index: -1,
+          rowDataId: "header"
+        });
+      },
+      collect: (monitor) => ({
+        isOver: monitor.isOver()
+      })
+    }),
+    [root]
+  );
+  return {
+    drop,
+    isOver
+  };
+};
+
+// src/components/type-editor/columns/description.tsx
+var ViewRender6 = ({ rowData, onEditMode }) => {
+  const disabled = useDisabled("description" /* Description */, rowData);
+  if (disabled) {
+    return /* @__PURE__ */ React28.createElement(KeyViewContainer, { disabled: true }, /* @__PURE__ */ React28.createElement(Tooltip9, { content: disabled }, /* @__PURE__ */ React28.createElement(KeyViewText, null, rowData.description)));
+  }
+  return /* @__PURE__ */ React28.createElement(KeyViewContainer, { onClick: () => onEditMode() }, /* @__PURE__ */ React28.createElement(KeyViewText, null, rowData.description));
+};
+var EditRender4 = ({
+  rowData,
+  onChange,
+  typeEditor,
+  onViewMode
+}) => {
+  const [value, setValue] = useState15(rowData.description);
+  useEffect12(() => {
+    typeEditor.editValue = value;
+  }, [typeEditor, value]);
+  useEffect12(() => {
+    setValue(rowData.description);
+  }, [rowData.description]);
+  return /* @__PURE__ */ React28.createElement(KeyEditorContainer, null, /* @__PURE__ */ React28.createElement(
+    KeyEditorInput,
+    {
+      onChange: setValue,
+      autoFocus: true,
+      onBlur: () => {
+        const { self } = rowData;
+        self.description = value;
+        onChange();
+        onViewMode();
+      },
+      value
+    }
+  ));
+};
+var descriptionColumnConfig = {
+  type: "description" /* Description */,
+  width: 15,
+  label: "Description",
+  viewRender: ViewRender6,
+  shortcuts: {
+    onEnter: ({ rowData, value, onChange, typeEditor }) => {
+      rowData.self.description = value;
+      onChange();
+      typeEditor.moveActivePosToNextLineWithAddLine(rowData);
+    },
+    onTab: ({ rowData, value, onChange, typeEditor }) => {
+      rowData.self.description = value;
+      onChange();
+      typeEditor.moveActivePosToNextItem();
+    }
+  },
+  editRender: EditRender4
+};
+
+// src/components/type-editor/columns/default.tsx
+import React29, { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo13, useRef as useRef5, useState as useState16 } from "react";
+import { Tooltip as Tooltip10, Typography as Typography8 } from "@douyinfe/semi-ui";
+var useFormatValue = ({
+  rowData,
+  onChange,
+  typeEditor
+}) => {
+  const valueRef = useRef5(rowData.self.default);
+  const [value, setValue] = useState16(rowData.self.default);
+  const typeDefinition = useTypeDefinitionManager();
+  useEffect13(() => {
+    typeEditor.editValue = value;
+  }, [typeEditor, value]);
+  useEffect13(() => {
+    setValue(rowData.self.default);
+    valueRef.current = rowData.self.default;
+  }, [rowData.self.default]);
+  const handleSubmit = useCallback7(() => {
+    rowData.self.default = valueRef.current;
+    const config = typeDefinition.getTypeBySchema(rowData.self);
+    if (config?.formatDefault) {
+      config.formatDefault(valueRef.current, rowData.self);
+    }
+    const parenConfig = rowData.parent && typeDefinition.getTypeBySchema(rowData.parent);
+    if (parenConfig?.formatDefault) {
+      parenConfig.formatDefault(valueRef.current, rowData.parent);
+    }
+    onChange();
+  }, [onChange, rowData, typeDefinition]);
+  const deFormatValue = useMemo13(() => {
+    const config = typeDefinition.getTypeBySchema(rowData.self);
+    return config?.deFormatDefault ? config.deFormatDefault(value) : value;
+  }, [value, rowData]);
+  const handleChange = useCallback7((v) => {
+    valueRef.current = v;
+    setValue(v);
+  }, []);
+  return {
+    handleChange,
+    handleSubmit,
+    deFormatValue
+  };
+};
+var TypeText2 = ({
+  value,
+  type
+}) => {
+  const typeDefinition = useTypeDefinitionManager();
+  const content = useMemo13(() => {
+    const config = typeDefinition.getTypeBySchema(type);
+    return config?.getValueText ? config.getValueText(value) : value;
+  }, [value, type]);
+  return /* @__PURE__ */ React29.createElement(TypeTextContainer, null, /* @__PURE__ */ React29.createElement(Typography8.Text, { ellipsis: { showTooltip: true } }, content));
+};
+var ViewRender7 = ({
+  rowData,
+  typeEditor,
+  onEditMode,
+  onChange
+}) => {
+  const disabled = useDisabled("default" /* Default */, rowData);
+  const typeDefinition = useTypeDefinitionManager();
+  const { defaultMode = "default" } = rowData.extraConfig;
+  const { customDefaultView } = rowData.extraConfig;
+  const { deFormatValue, handleChange, handleSubmit } = useFormatValue({
+    rowData,
+    onChange,
+    typeEditor
+  });
+  const customNode = customDefaultView && customDefaultView({
+    rowData,
+    disabled,
+    value: deFormatValue,
+    onChange: handleChange,
+    onSubmit: (v) => {
+      handleChange(v);
+      handleSubmit();
+    }
+  });
+  if (customNode) {
+    return /* @__PURE__ */ React29.createElement(React29.Fragment, null, " ", customNode);
+  }
+  if (disabled) {
+    return /* @__PURE__ */ React29.createElement(KeyViewContainer, { disabled: true }, /* @__PURE__ */ React29.createElement(Tooltip10, { content: disabled }, /* @__PURE__ */ React29.createElement("div", { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React29.createElement(TypeText2, { value: deFormatValue, type: rowData.self }))));
+  }
+  if (defaultMode === "server") {
+    const config = typeDefinition.getTypeBySchema(rowData.self);
+    return /* @__PURE__ */ React29.createElement(Tooltip10, { content: "The default value is not allowed to be modified." }, /* @__PURE__ */ React29.createElement(KeyViewContainer, { disabled: true }, /* @__PURE__ */ React29.createElement(Typography8.Text, null, JSON.stringify(config?.getDefaultValue?.()))));
+  }
+  return /* @__PURE__ */ React29.createElement(KeyViewContainer, { onClick: () => onEditMode() }, /* @__PURE__ */ React29.createElement(TypeText2, { value: deFormatValue, type: rowData.self }));
+};
+var EditRender5 = ({
+  rowData,
+  onChange,
+  typeEditor,
+  onViewMode
+}) => {
+  const { deFormatValue, handleChange, handleSubmit } = useFormatValue({
+    rowData,
+    onChange,
+    typeEditor
+  });
+  const typeDefinition = useTypeDefinitionManager();
+  const config = useMemo13(() => typeDefinition.getTypeBySchema(rowData.self), [rowData.self]);
+  return /* @__PURE__ */ React29.createElement(KeyEditorContainer, null, /* @__PURE__ */ React29.createElement(GlobalSelectStyle, null), config && config?.getInputNode?.({
+    value: deFormatValue,
+    onChange: handleChange,
+    type: rowData.self,
+    onSubmit: () => {
+      handleSubmit();
+      onViewMode();
+    }
+  }));
+};
+var defaultColumnConfig = {
+  type: "default" /* Default */,
+  width: 15,
+  label: "Default",
+  viewRender: ViewRender7,
+  shortcuts: {
+    onEnter: ({ rowData, onChange, typeEditor, value, typeDefinitionService }) => {
+      const config = typeDefinitionService.getTypeBySchema(rowData.self);
+      if (config?.typeInputConfig?.canEnter) {
+        rowData.self.default = value;
+        onChange();
+        typeEditor.moveActivePosToNextLineWithAddLine(rowData);
+      }
+    },
+    onTab: ({ rowData, value, onChange, typeEditor }) => {
+      rowData.self.default = value;
+      onChange();
+      typeEditor.moveActivePosToNextItem();
+    }
+  },
+  editRender: EditRender5
+};
+
+// src/components/type-editor/columns/index.ts
+var columnConfigs = [
+  keyColumnConfig,
+  typeColumnConfig,
+  requiredColumnConfig,
+  descriptionColumnConfig,
+  privateColumnConfig,
+  valueColumnConfig,
+  defaultColumnConfig,
+  operateColumnConfig
+];
+
+// src/components/type-editor/index.tsx
+import React41, { useImperativeHandle as useImperativeHandle2, useState as useState21 } from "react";
+import { noop as noop2 } from "lodash";
+import { Space as Space6 } from "@douyinfe/semi-ui";
+
+// src/components/type-editor/type-editor.tsx
+import React37 from "react";
+import styled7 from "styled-components";
+
+// src/components/type-editor/table.tsx
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { DndProvider } from "react-dnd";
+import { useCallback as useCallback9, useEffect as useEffect16, useMemo as useMemo19, useRef as useRef6, useState as useState19 } from "react";
+import React36 from "react";
+import { isEqual as isEqual2 } from "lodash";
+import classNames6 from "classnames";
+import { Space as Space3 } from "@douyinfe/semi-ui";
+
+// src/components/type-editor/style.ts
+import styled3 from "styled-components";
+var ErrorMsgContainer = styled3.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translateY(100%);
+  width: calc(100% - 6px);
+`;
+var EditCellContainer = styled3.div`
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  background-color: var(--semi-color-bg-0);
+  border: 1px solid var(--semi-color-focus-border);
+  height: 38px;
+  display: flex;
+  align-items: center;
+  transition: background-color 200ms;
+  box-sizing: border-box;
+  ${(props) => props.error ? "border: 1px solid var(--semi-color-danger);" : ""}
+  ${(props) => props.blink ? "background-color: rgba(238, 245, 40) !important;" : ""}
+`;
+var DragRowContainer = styled3.tr`
+  opacity: ${(props) => props.dragging ? 0.5 : 1};
+`;
+var EditorTableHeader = styled3.th`
+  border-right: 1px solid var(--semi-color-border);
+  border-bottom-width: 1px !important;
+  height: 37px;
+  box-sizing: border-box;
+  font-size: 12px;
+`;
+var EditorTableCell = styled3.td`
+  border-right: 1px solid var(--semi-color-border) !important;
+  position: relative;
+
+  padding: 8px !important;
+  height: 36px;
+`;
+var EditorTable = styled3.table`
+  min-width: 600px;
+  border-left-width: 1px;
+  border-top-width: 1px;
+  box-sizing: border-box;
+  border-color: var(--semi-color-border);
+  width: 100%;
+  position: relative;
+  border-style: solid;
+  border-bottom: none;
+  border-right: none;
+`;
+var EditorTableTitle = styled3.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+var BaseIcon2 = styled3.div`
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+`;
+
+// src/components/type-editor/hooks/formatter-value.ts
+import { useMemo as useMemo14 } from "react";
+
+// src/components/type-editor/mode/type-definition.ts
+var typeDefinitionConfig = {
+  mode: "type-definition",
+  convertSchemaToValue: (val) => val,
+  convertValueToSchema: (val) => val,
+  commonValueToSubmitValue: (val) => {
+    if (val) {
+      return typeEditorUtils.valueToTypeSchema(val);
+    }
+    return {
+      type: "object",
+      properties: {}
+    };
+  },
+  toolConfig: {
+    createByData: {
+      viewConfig: [
+        {
+          type: "key" /* Key */,
+          visible: true
+        },
+        {
+          type: "type" /* Type */,
+          visible: true
+        }
+      ],
+      genDefaultValue() {
+        return {
+          type: "object",
+          properties: {}
+        };
+      }
+    }
+  }
+};
+
+// src/components/type-editor/mode/declare-assign.ts
+import { set, get } from "lodash";
+var traverseIJsonSchema2 = (root, path, cb) => {
+  if (root) {
+    cb(root, path);
+    if (root.properties) {
+      Object.keys(root.properties).forEach((k) => {
+        traverseIJsonSchema2(root.properties[k], [...path, k], cb);
+      });
+    }
+  }
+};
+var declareAssignConfig = {
+  mode: "declare-assign",
+  convertSchemaToValue: (val) => {
+    const data = {};
+    const newSchema = JSON.parse(JSON.stringify(val));
+    traverseIJsonSchema2(newSchema, [], (type, path) => {
+      if (type.extra?.value !== void 0) {
+        set(data, path, type.extra?.value);
+      }
+      if (type.extra) {
+        delete type.extra;
+      }
+    });
+    return {
+      data,
+      definition: { schema: newSchema }
+    };
+  },
+  convertValueToSchema: (schema) => {
+    const { data } = schema;
+    const newSchema = JSON.parse(JSON.stringify(schema.definition.schema));
+    traverseIJsonSchema2(newSchema, [], (type, path) => {
+      const value = get(data, path);
+      if (value !== void 0 && type.type !== "object") {
+        type.extra = { value };
+      }
+    });
+    return newSchema;
+  },
+  commonValueToSubmitValue: (val) => {
+    const type = val ? typeEditorUtils.valueToTypeSchema(val) : {
+      type: "object",
+      properties: {}
+    };
+    return {
+      data: val || {},
+      definition: {
+        schema: type
+      }
+    };
+  },
+  toolConfig: {
+    createByData: {
+      viewConfig: [
+        {
+          type: "key" /* Key */,
+          visible: true
+        },
+        {
+          type: "type" /* Type */,
+          visible: true
+        },
+        {
+          type: "value" /* Value */,
+          visible: true
+        }
+      ],
+      genDefaultValue: () => ({
+        data: {},
+        definition: {
+          schema: {
+            type: "object",
+            properties: {}
+          }
+        }
+      })
+    }
+  }
+};
+
+// src/components/type-editor/mode/index.ts
+var modeValueConfig = [
+  declareAssignConfig,
+  typeDefinitionConfig
+];
+
+// src/services/utils.ts
+var traverseIJsonSchema3 = (root, cb) => {
+  if (root) {
+    cb(root);
+    if (root.items) {
+      traverseIJsonSchema3(root.items, cb);
+    }
+    if (root.additionalProperties) {
+      traverseIJsonSchema3(root.additionalProperties, cb);
+    }
+    if (root.properties) {
+      Object.values(root.properties).forEach((v) => {
+        traverseIJsonSchema3(v, cb);
+      });
+    }
+  }
+};
+
+// src/components/type-editor/hooks/formatter-value.ts
+var useFormatter = ({
+  extraConfig = {},
+  mode
+}) => {
+  const { useExtra } = extraConfig;
+  const modeConfig = useMemo14(
+    () => modeValueConfig.find((v) => v.mode === mode),
+    [mode]
+  );
+  const formatter = useMemo14(
+    () => (value) => {
+      const originSchema = value && modeConfig.convertValueToSchema(value);
+      let res = originSchema ? JSON.parse(JSON.stringify(originSchema)) : originSchema;
+      const formatters = [];
+      if (useExtra) {
+        formatters.push(extraFormatter);
+      }
+      if (formatters.length !== 0 && res) {
+        traverseIJsonSchema3(res, (type) => {
+          formatters.forEach((f) => f(type));
+        });
+      }
+      return res;
+    },
+    [modeConfig, useExtra]
+  );
+  const deFormatter = useMemo14(
+    () => (originSchema) => {
+      let schema = originSchema ? JSON.parse(JSON.stringify(originSchema)) : originSchema;
+      const formatters = [];
+      if (useExtra) {
+        formatters.push(extraDeFormatter);
+      }
+      if (formatters.length !== 0 && schema) {
+        traverseIJsonSchema3(schema, (type) => {
+          formatters.forEach((f) => f(type));
+        });
+      }
+      return schema && modeConfig.convertSchemaToValue(schema);
+    },
+    [modeConfig, useExtra]
+  );
+  return {
+    formatter,
+    deFormatter
+  };
+};
+
+// src/components/type-editor/header.tsx
+import React30 from "react";
+import { Tooltip as Tooltip11 } from "@douyinfe/semi-ui";
+import { IconInfoCircle } from "@douyinfe/semi-icons";
+var Header = ({
+  displayColumn,
+  value,
+  readonly,
+  dataSourceMap,
+  onChange
+}) => {
+  const typeEditorService = useService(TypeEditorService);
+  const { drop } = useHeaderDrop(value, dataSourceMap, onChange);
+  return /* @__PURE__ */ React30.createElement("thead", { className: "semi-table-thead" }, /* @__PURE__ */ React30.createElement("tr", { ref: drop, className: "semi-table-row" }, displayColumn.map((v) => {
+    const config = typeEditorService.getConfigByType(v);
+    return /* @__PURE__ */ React30.createElement(
+      EditorTableHeader,
+      {
+        key: v,
+        style: {
+          width: config?.width ? `${config.width}%` : void 0,
+          paddingLeft: readonly ? "24px !important" : void 0
+        },
+        className: "semi-table-row-head",
+        scope: "col"
+      },
+      /* @__PURE__ */ React30.createElement(EditorTableTitle, null, config?.label, config?.info && /* @__PURE__ */ React30.createElement(Tooltip11, { content: config.info() }, /* @__PURE__ */ React30.createElement(BaseIcon2, null, /* @__PURE__ */ React30.createElement(IconInfoCircle, { style: { marginLeft: 4 }, size: "small" }))))
+    );
+  })));
+};
+
+// src/components/type-editor/drop-tip.tsx
+import { useEffect as useEffect14, useMemo as useMemo15, useState as useState17 } from "react";
+import React31 from "react";
+import styled4 from "styled-components";
+var StyledDragTip = styled4.div`
+  position: absolute;
+  height: 1px;
+  background-color: var(--semi-color-primary);
+`;
+var DropTip = ({
+  dataSource
+}) => {
+  const typeEditor = useService(TypeEditorService);
+  const [dropInfo, setDropInfo] = useState17(typeEditor.dropInfo);
+  const typeService = useTypeDefinitionManager();
+  useEffect14(() => {
+    const dispose = typeEditor.onDropInfoChange.event(setDropInfo);
+    return () => {
+      dispose.dispose();
+    };
+  }, []);
+  const rowData = useMemo15(() => dataSource[dropInfo.rowDataId], [dropInfo.rowDataId]);
+  const rowDataCanHasChildren = useMemo15(
+    () => rowData && rowData.type && typeService.getTypeByName(rowData.type)?.canAddField?.(rowData),
+    [rowData]
+  );
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, (rowData || dropInfo.rowDataId === "header") && /* @__PURE__ */ React31.createElement(
+    StyledDragTip,
+    {
+      style: {
+        top: HEADER_HIGHT + TAB_BRA_HIGHT + (dropInfo.index + 1) * CELL_HIGHT - 1,
+        right: 0,
+        width: `calc(100% - ${/**
+         * 表格 padding
+         * 初始 drag icon 占一个缩进
+         * rowData 本身 level 个缩进，如果是含有子节点，因为默认添加到子元素内，还需要额外加一个缩进
+         */
+        CELL_PADDING + INDENT_WIDTH + (dropInfo.indent + (rowDataCanHasChildren ? 1 : 0) + 1) * INDENT_WIDTH}px)`
+      }
+    }
+  ));
+};
+
+// src/components/type-editor/cell.tsx
+import React34, { useCallback as useCallback8, useMemo as useMemo18 } from "react";
+import classNames4 from "classnames";
+import { NOOP } from "@flowgram.ai/utils";
+
+// src/components/feedback/feedback.tsx
+import React32, { useMemo as useMemo16 } from "react";
+
+// src/components/feedback/style.ts
+import styled5 from "styled-components";
+var FeedbackStyle = styled5.div`
+  position: absolute;
+
+  ${(props) => props.expanded ? `
+  position: relative;
+  ` : ""}
+
+  color: #fff;
+  max-width: 100%;
+  width: fit-content;
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 18px;
+  word-break: break-all;
+
+  &.expandable {
+  }
+
+  ${(props) => props.expandable ? `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    white-space: normal;
+    overflow: visible;
+  }
+  ` : ""}
+
+  ${(props) => props.error ? `
+    background-color: var(--semi-color-danger);
+    ` : ""}
+
+
+  ${(props) => props.warning ? `
+    background-color:var(--semi-color-warning);
+    ` : ""}
+
+
+  z-index: 1;
+`;
+var RelativeWrapper = styled5.div`
+  position: relative;
+  height: 18px;
+
+  ${(props) => props.expanded ? `
+      height: fit-content;
+    ` : ""}
+`;
+
+// src/components/feedback/feedback.tsx
+var Feedback = ({ message, layout, level = "error", expanded = false }) => {
+  const feedbackContent = useMemo16(
+    () => /* @__PURE__ */ React32.createElement(
+      FeedbackStyle,
+      {
+        expanded,
+        error: level === "error",
+        warning: level === "warning",
+        expandable: !expanded
+      },
+      message
+    ),
+    [level, message, expanded]
+  );
+  return layout === "relative" ? /* @__PURE__ */ React32.createElement(RelativeWrapper, { expanded }, feedbackContent) : feedbackContent;
+};
+
+// src/components/type-editor/hooks/blink.ts
+import { useEffect as useEffect15, useMemo as useMemo17, useState as useState18 } from "react";
+var useIsBlink = () => {
+  const typeEditor = useService(TypeEditorService);
+  const blinkData = useMemo17(() => typeEditor.blink, [typeEditor.blink]);
+  const [blink, setBlink] = useState18(blinkData.data);
+  useEffect15(() => {
+    const dispose = blinkData.onDataChange(({ next }) => {
+      setBlink(next);
+      if (next) {
+        setTimeout(() => {
+          blinkData.update(false);
+        }, 200);
+      }
+    });
+    return () => {
+      dispose.dispose();
+    };
+  }, [blinkData]);
+  return blink;
+};
+
+// src/components/type-editor/error.tsx
+import React33 from "react";
+import styled6 from "styled-components";
+var TopLine = styled6.div`
+  position: absolute;
+  background-color: ${(props) => props.level === "warning" ? "var(--semi-color-warning)" : "var(--semi-color-danger)"};
+  width: 100%;
+  height: 1px;
+  top: 0;
+  left: 0;
+`;
+var BottomLine = styled6.div`
+  position: absolute;
+  background-color: ${(props) => props.level === "warning" ? "var(--semi-color-warning)" : "var(--semi-color-danger)"};
+  width: 100%;
+  height: 1px;
+  bottom: -1px;
+  left: 0;
+`;
+var RightLine = styled6.div`
+  position: absolute;
+  background-color: ${(props) => props.level === "warning" ? "var(--semi-color-warning)" : "var(--semi-color-danger)"};
+  height: calc(100% + 1px);
+  width: 1px;
+  bottom: -1px;
+  right: 0px;
+`;
+var LeftLine = styled6.div`
+  position: absolute;
+  background-color: ${(props) => props.level === "warning" ? "var(--semi-color-warning)" : "var(--semi-color-danger)"};
+  height: calc(100% + 1px);
+  width: 1px;
+  bottom: -1px;
+  left: 0;
+`;
+var ErrorCellBorder = ({ level }) => /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(TopLine, { level }), /* @__PURE__ */ React33.createElement(BottomLine, { level }), /* @__PURE__ */ React33.createElement(LeftLine, { level }), /* @__PURE__ */ React33.createElement(RightLine, { level }));
+
+// src/components/type-editor/cell.tsx
+var ViewCell = ({
+  rowData,
+  rowIndex,
+  columnIndex,
+  onChange,
+  dataSourceMap,
+  onError,
+  onFieldChange,
+  onPaste,
+  unOpenKeys,
+  viewConfigs,
+  readonly,
+  onChildrenVisibleChange,
+  dragSource,
+  columnType
+}) => {
+  const typeEditorService = useService(TypeEditorService);
+  const config = typeEditorService.getConfigByType(columnType);
+  const { drop } = useCellDrop(rowData, rowIndex, dataSourceMap, onChange);
+  const handleEditMode = useCallback8(() => {
+    if (!readonly) {
+      typeEditorService.setActivePos({ x: columnIndex, y: rowIndex });
+    }
+  }, [columnIndex, readonly, rowIndex]);
+  const handleViewMode = useCallback8(() => {
+    typeEditorService.clearActivePos();
+  }, []);
+  const Render = config.viewRender;
+  const feedbackInfo = useViewCellErrorMsg(rowData, config, {
+    x: columnIndex,
+    y: rowIndex
+  });
+  return /* @__PURE__ */ React34.createElement(
+    EditorTableCell,
+    {
+      ref: config.customDrop ? void 0 : drop,
+      className: classNames4("semi-table-row-cell", "cell-container")
+    },
+    feedbackInfo && /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(ErrorCellBorder, { level: feedbackInfo.level }), /* @__PURE__ */ React34.createElement(ErrorMsgContainer, null, /* @__PURE__ */ React34.createElement(Feedback, { message: feedbackInfo.msg, level: feedbackInfo.level, layout: "absolute" }))),
+    Render ? /* @__PURE__ */ React34.createElement(
+      Render,
+      {
+        readonly,
+        config: viewConfigs.find((v) => v.type === columnType) || {},
+        dragSource,
+        unOpenKeys,
+        onFieldChange,
+        typeEditor: typeEditorService,
+        onPaste,
+        error: !!feedbackInfo,
+        onError,
+        onChange,
+        onChildrenVisibleChange,
+        onViewMode: handleViewMode,
+        onEditMode: handleEditMode,
+        rowData
+      }
+    ) : `${rowData[columnType]}`
+  );
+};
+var EditCell = ({
+  displayColumn,
+  onFieldChange,
+  dataSource,
+  onPaste,
+  unOpenKeys,
+  onError,
+  viewConfigs,
+  onChildrenVisibleChange,
+  tableDom,
+  onChange
+}) => {
+  const typeEditorService = useService(TypeEditorService);
+  const activePos = useActivePos();
+  const handleViewMode = useCallback8(() => {
+    typeEditorService.clearActivePos();
+  }, []);
+  const columnType = useMemo18(() => displayColumn[activePos.x], [displayColumn, activePos.x]);
+  const columnEachWidth = useMemo18(() => {
+    const headerNodes = tableDom.childNodes?.[0]?.childNodes?.[0];
+    const width = [];
+    for (const item of headerNodes.childNodes.values()) {
+      width.push(item.clientWidth + 1);
+    }
+    return width;
+  }, [displayColumn, tableDom, tableDom.clientWidth]);
+  const columnAccWidth = useMemo18(() => {
+    let acc = 0;
+    return columnEachWidth.map((width) => {
+      acc += width;
+      return acc - width;
+    });
+  }, [columnEachWidth]);
+  const rowData = useMemo18(() => dataSource[activePos.y], [dataSource, activePos.y]);
+  const config = typeEditorService.getConfigByType(columnType);
+  const Render = config && (config.editRender || config.viewRender);
+  const errorMsg = useEditCellErrorMsg(activePos);
+  const blink = useIsBlink();
+  if (!config) {
+    return /* @__PURE__ */ React34.createElement(React34.Fragment, null);
+  }
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, rowData && /* @__PURE__ */ React34.createElement(
+    EditCellContainer,
+    {
+      error: !!errorMsg,
+      blink,
+      key: rowData.key + columnType,
+      style: {
+        width: columnEachWidth[activePos.x] + 1,
+        top: HEADER_HIGHT + TAB_BRA_HIGHT + activePos.y * CELL_HIGHT + 1,
+        left: columnAccWidth[activePos.x]
+      }
+    },
+    Render ? /* @__PURE__ */ React34.createElement(
+      Render,
+      {
+        error: !!errorMsg,
+        onError,
+        config: viewConfigs.find((v) => v.type === columnType) || {},
+        key: rowData.id,
+        unOpenKeys,
+        onChange,
+        onPaste,
+        typeEditor: typeEditorService,
+        onFieldChange,
+        onChildrenVisibleChange,
+        onEditMode: NOOP,
+        onViewMode: handleViewMode,
+        rowData
+      }
+    ) : `${rowData[columnType]}`,
+    errorMsg && /* @__PURE__ */ React34.createElement(ErrorMsgContainer, { style: { left: -1 } }, /* @__PURE__ */ React34.createElement(Feedback, { message: errorMsg, level: "error", layout: "absolute" }))
+  ));
+};
+
+// src/components/type-editor/body.tsx
+import React35 from "react";
+import classNames5 from "classnames";
+import { Empty } from "@douyinfe/semi-ui";
+import { IllustrationNoContent, IllustrationNoContentDark } from "@douyinfe/semi-illustrations";
+var Row = ({
+  displayColumn,
+  data,
+  ...rest
+}) => {
+  const { preview, drag, isDragging } = useRowDrag(data.id, rest.onChildrenVisibleChange);
+  return /* @__PURE__ */ React35.createElement(DragRowContainer, { ref: preview, dragging: isDragging, className: classNames5("semi-table-row") }, displayColumn.map((column, columnIndex) => /* @__PURE__ */ React35.createElement(
+    ViewCell,
+    {
+      dragSource: data.cannotDrag ? void 0 : drag,
+      key: data.id + column,
+      columnType: column,
+      columnIndex,
+      rowData: data,
+      ...rest
+    }
+  )));
+};
+var Body = ({
+  dataSource,
+  customEmptyNode,
+  ...rest
+}) => {
+  if (dataSource.length === 0) {
+    const rows = rest.displayColumn.length;
+    return /* @__PURE__ */ React35.createElement("tbody", null, /* @__PURE__ */ React35.createElement("tr", null, /* @__PURE__ */ React35.createElement("td", { colSpan: rows }, customEmptyNode ? customEmptyNode : /* @__PURE__ */ React35.createElement(
+      Empty,
+      {
+        style: { marginTop: 40 },
+        image: /* @__PURE__ */ React35.createElement(IllustrationNoContent, { style: { width: 100, height: 100 } }),
+        darkModeImage: /* @__PURE__ */ React35.createElement(IllustrationNoContentDark, { style: { width: 100, height: 100 } }),
+        description: "No content. Please add."
+      }
+    ))));
+  }
+  return /* @__PURE__ */ React35.createElement("tbody", { className: "semi-table-tbody" }, /* @__PURE__ */ React35.createElement(React35.Fragment, null, dataSource.map((data, rowIndex) => /* @__PURE__ */ React35.createElement(Row, { key: data.id, ...rest, data, rowIndex }))));
+};
+
+// src/components/type-editor/table.tsx
+var TableInner = ({
+  value,
+  onChange,
+  mode,
+  viewConfigs,
+  onInit,
+  forceUpdate,
+  onEditRowDataSource,
+  rootLevel = 0,
+  customEmptyNode,
+  tableClassName,
+  onError,
+  disableEditColumn,
+  readonly,
+  onPaste,
+  typeRegistryCreators,
+  onFieldChange,
+  getRootSchema,
+  onCustomSetValue,
+  extraConfig: originExtraConfig = {}
+}) => {
+  const extraConfig = useMemo19(
+    () => ({
+      ...originExtraConfig
+    }),
+    [originExtraConfig]
+  );
+  const { deFormatter, formatter } = useFormatter({
+    mode,
+    extraConfig
+  });
+  const typeSchema = useMemo19(() => formatter(value), [formatter, value]);
+  const typeEditor = useService(TypeEditorService);
+  const typeOperator = useService(
+    TypeEditorOperationService
+  );
+  const [tableDom, setTableDom] = useState19();
+  const [initialSchema, setInitialSchema] = useState19(() => {
+    const res = typeEditorUtils.clone(typeSchema) || typeEditorUtils.getInitialSchema();
+    typeOperator.storeState(res);
+    return res;
+  });
+  const editor = useRef6();
+  useEffect16(() => {
+    const instance = {
+      getService: () => typeEditor,
+      setValue(originNewVal) {
+        let newVal = originNewVal;
+        if (onCustomSetValue) {
+          newVal = onCustomSetValue(newVal);
+        }
+        const newSchema = formatter(newVal);
+        setInitialSchema(newSchema);
+        typeOperator.storeState(newSchema);
+        const final = typeEditorUtils.formateTypeSchema(newSchema, extraConfig);
+        const newValue = deFormatter(final);
+        if (onChange) {
+          onChange(newValue);
+        }
+      },
+      getContainer: () => tableDom,
+      getValue: () => {
+        const rootValue = deFormatter(typeEditor.rootTypeSchema);
+        return rootValue;
+      },
+      undo: () => {
+        typeOperator.undo();
+        typeEditor.onChange(typeOperator.getCurrentState(), {
+          storeState: false
+        });
+      },
+      redo: () => {
+        typeOperator.redo();
+        typeEditor.onChange(typeOperator.getCurrentState(), {
+          storeState: false
+        });
+      },
+      getOperator() {
+        return typeOperator;
+      }
+    };
+    editor.current = instance;
+  }, [typeEditor, onChange, tableDom, deFormatter, formatter, extraConfig, onCustomSetValue]);
+  useEffect16(() => {
+    onInit?.(editor);
+  }, [onInit]);
+  const [unOpenKeys, setUnOpenKeys] = useState19({});
+  useEffect16(() => {
+    if (!isEqual2(typeSchema, initialSchema) && typeSchema && (forceUpdate || !typeEditorUtils.isTempState(initialSchema, extraConfig?.customValidateName))) {
+      setInitialSchema(typeEditorUtils.clone(typeSchema));
+    }
+  }, [typeSchema, extraConfig?.customValidateName]);
+  const typeService = useTypeDefinitionManager();
+  const displayColumn = useMemo19(
+    () => viewConfigs.filter((v) => v.visible).map((v) => v.type),
+    [viewConfigs]
+  );
+  const { dataSource } = useMemo19(() => {
+    const res = [];
+    let index = -1;
+    const dfs = (schema, config) => {
+      const {
+        parentId,
+        level = -1,
+        key = ROOT_FIELD_ID,
+        path,
+        parent,
+        canValueEditable = true,
+        canDefaultEditable = true
+      } = config;
+      const id = [parentId, key || (/* @__PURE__ */ new Date()).valueOf().toString()].join("-");
+      const typeConfig = typeService.getTypeBySchema(schema);
+      const uid = parentId ? id : key;
+      const rowData = {
+        ...schema,
+        key,
+        index,
+        id: uid,
+        level,
+        self: schema,
+        parentId,
+        parent,
+        deepChildrenCount: 0,
+        isRequired: (parent?.required || []).includes(key),
+        childrenCount: 0,
+        disableEditColumn: [...disableEditColumn || []],
+        path,
+        extraConfig: { ...extraConfig }
+      };
+      index += 1;
+      typeEditor.dataSourceMap[rowData.id] = rowData;
+      res.push(rowData);
+      const customDefaultValidate = extraConfig.customDefaultEditable && extraConfig.customDefaultEditable(rowData);
+      if (typeof customDefaultValidate === "string") {
+        rowData.disableEditColumn.push({
+          column: "default" /* Default */,
+          reason: customDefaultValidate
+        });
+      }
+      if (typeof canDefaultEditable === "string" && level > rootLevel) {
+        rowData.disableEditColumn.push({
+          column: "default" /* Default */,
+          reason: canDefaultEditable
+        });
+      }
+      if (typeof canValueEditable === "string" && level > rootLevel) {
+        rowData.disableEditColumn.push({
+          column: "value" /* Value */,
+          reason: canValueEditable
+        });
+      }
+      if (typeConfig) {
+        const children = typeConfig.getTypeSchemaProperties && typeConfig.getTypeSchemaProperties(schema);
+        const childrenParent = typeConfig.getPropertiesParent && typeConfig.getPropertiesParent(schema);
+        const childrenParentConfig = childrenParent && typeService.getTypeBySchema(childrenParent);
+        if (!extraConfig.customDefaultEditable && typeof childrenParentConfig?.defaultEditable === "string") {
+          rowData.disableEditColumn.push({
+            column: "default" /* Default */,
+            reason: childrenParentConfig?.defaultEditable
+          });
+        }
+        if (children) {
+          const originLen = res.length;
+          rowData.childrenCount = Object.keys(children).length;
+          if (unOpenKeys[uid]) {
+            return;
+          }
+          const parentPath = [...path, ...typeConfig.getJsonPaths?.(schema) || []];
+          let idx = 0;
+          const childCanValueEditable = typeConfig?.childrenValueEditable?.(schema);
+          Object.keys(children).map((k) => {
+            typeEditorUtils.fixFlowIndex(children[k], idx);
+            idx++;
+            return k;
+          }).sort((k1, k2) => (children[k1].extra?.index || 0) - (children[k2].extra?.index || 0)).forEach((k) => {
+            const canDefaultEditableFromParent = typeConfig.childrenDefaultEditable?.(schema);
+            dfs(children[k], {
+              key: k,
+              parentId: id,
+              parent: childrenParent,
+              level: level + 1,
+              path: [...parentPath, k],
+              canDefaultEditable: typeof canDefaultEditableFromParent === "string" ? canDefaultEditableFromParent : canDefaultEditable,
+              canValueEditable: childCanValueEditable
+            });
+          });
+          rowData.deepChildrenCount = res.length - originLen;
+        } else {
+          if (!extraConfig.customDefaultEditable && typeof typeConfig?.defaultEditable === "string") {
+            rowData.disableEditColumn.push({
+              column: "default" /* Default */,
+              reason: typeConfig?.defaultEditable
+            });
+          }
+        }
+      }
+    };
+    if (initialSchema) {
+      dfs(initialSchema, { level: -1, path: [] });
+      res.shift();
+      const newData = onEditRowDataSource ? onEditRowDataSource(res) : res;
+      typeEditor.setDataSource(newData);
+      return {
+        dataSource: newData
+      };
+    }
+    return {
+      dataSource: []
+    };
+  }, [initialSchema, disableEditColumn, unOpenKeys, onEditRowDataSource]);
+  const activePos = useActivePos();
+  useEffect16(() => {
+    typeEditor.rootTypeSchema = initialSchema;
+  }, [initialSchema]);
+  const handleTypeSchemaChange = useCallback9(
+    (type, ctx = {}) => {
+      const { storeState = true } = ctx;
+      const newSchema = JSON.parse(JSON.stringify(type || initialSchema));
+      setInitialSchema({ ...newSchema });
+      const final = typeEditorUtils.formateTypeSchema(newSchema, extraConfig);
+      if (storeState) {
+        typeOperator.storeState(newSchema);
+      }
+      const newValue = deFormatter(final);
+      if (onChange) {
+        onChange(newValue);
+      }
+    },
+    [initialSchema, deFormatter, extraConfig]
+  );
+  const handleRowDataAdd = useCallback9(
+    (id) => {
+      const rowData = typeEditor.dataSourceMap[id];
+      const currentSchema = rowData.self;
+      const config = typeService.getTypeBySchema(rowData.self);
+      if (currentSchema && config) {
+        let index = -1;
+        const parent = config.getPropertiesParent?.(currentSchema);
+        if (!parent) {
+          return;
+        }
+        if (!parent.properties) {
+          parent.properties = {};
+        }
+        Object.values(parent.properties).forEach((val) => {
+          if (!val.extra) {
+            val.extra = {
+              index: 0
+            };
+          }
+          index = Math.max(index, val.extra.index || 0);
+        });
+        const [key, schema] = typeEditorUtils.genNewTypeSchema(index + 1);
+        parent.properties[key] = schema;
+        const newDataSource = typeEditor.getDataSource();
+        let addIndex = rowData.index + 1;
+        for (let i = rowData.index + 1, len = dataSource.length; i < len; i++) {
+          if (newDataSource[i].level > rowData.level) {
+            addIndex++;
+          } else {
+            break;
+          }
+        }
+        const newPos = {
+          x: 0,
+          y: addIndex
+        };
+        typeEditor.setActivePos(newPos);
+        handleTypeSchemaChange();
+      }
+    },
+    [initialSchema, getRootSchema]
+  );
+  useEffect16(() => {
+    typeEditor.columnViewConfig = viewConfigs.filter((v) => v.visible);
+    typeEditor.onChange = handleTypeSchemaChange;
+    typeEditor.onGlobalAdd = handleRowDataAdd;
+    typeEditor.typeRegistryCreators = typeRegistryCreators;
+  }, [viewConfigs, handleTypeSchemaChange, typeRegistryCreators]);
+  const handleChildrenVisibleChange = useCallback9(
+    (rowDataId, newVal) => {
+      const newData = { ...unOpenKeys };
+      newData[rowDataId] = newVal;
+      setUnOpenKeys(newData);
+    },
+    [unOpenKeys]
+  );
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(DndProvider, { backend: HTML5Backend }, /* @__PURE__ */ React36.createElement(Space3, { vertical: true, style: { width: "100%" } }, /* @__PURE__ */ React36.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React36.createElement(
+    EditorTable,
+    {
+      ref: (dom) => setTableDom(dom),
+      className: classNames6("semi-table", tableClassName)
+    },
+    /* @__PURE__ */ React36.createElement(
+      Header,
+      {
+        dataSourceMap: typeEditor.dataSourceMap,
+        value: initialSchema,
+        readonly,
+        onChange: handleTypeSchemaChange,
+        displayColumn
+      }
+    ),
+    /* @__PURE__ */ React36.createElement(
+      Body,
+      {
+        viewConfigs,
+        onFieldChange,
+        onPaste,
+        customEmptyNode,
+        readonly,
+        dataSourceMap: typeEditor.dataSourceMap,
+        unOpenKeys,
+        onError,
+        onChildrenVisibleChange: handleChildrenVisibleChange,
+        onChange: handleTypeSchemaChange,
+        dataSource,
+        displayColumn
+      }
+    )
+  )))), activePos.x !== -1 && activePos.y !== -1 && tableDom && /* @__PURE__ */ React36.createElement(
+    EditCell,
+    {
+      viewConfigs,
+      unOpenKeys,
+      onPaste,
+      onFieldChange,
+      onError,
+      onChildrenVisibleChange: handleChildrenVisibleChange,
+      onChange: handleTypeSchemaChange,
+      tableDom,
+      dataSource,
+      displayColumn
+    }
+  ), /* @__PURE__ */ React36.createElement(DropTip, { dataSource: typeEditor.dataSourceMap }));
+};
+var Table = fixedTSForwardRef(TableInner);
+
+// src/components/type-editor/type-editor.tsx
+var Container2 = styled7.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  outline: none;
+
+  table {
+    table-layout: fixed;
+  }
+`;
+var TypeEditorTable = (props) => /* @__PURE__ */ React37.createElement(TypeEditorProvider, { typeRegistryCreators: props.typeRegistryCreators }, /* @__PURE__ */ React37.createElement(TypeEditorListener, { configs: props.viewConfigs }, /* @__PURE__ */ React37.createElement(Container2, null, /* @__PURE__ */ React37.createElement(Table, { ...props }))));
+
+// src/components/type-editor/tool-bar.tsx
+import React40, { useMemo as useMemo21 } from "react";
+import { Space as Space5, Tooltip as Tooltip13 } from "@douyinfe/semi-ui";
+
+// src/components/type-editor/type.ts
+var ToolbarKey = /* @__PURE__ */ ((ToolbarKey2) => {
+  ToolbarKey2["Import"] = "Import";
+  ToolbarKey2["UndoRedo"] = "UndoRedo";
+  return ToolbarKey2;
+})(ToolbarKey || {});
+
+// src/components/type-editor/tools/undo-redo.tsx
+import React38 from "react";
+import { Button, Tooltip as Tooltip12 } from "@douyinfe/semi-ui";
+import { IconRedo, IconUndo } from "@douyinfe/semi-icons";
+var UndoRedo = ({
+  editor
+}) => {
+  const { data: canUndo } = useMonitorData(editor.getOperator()?.canUndo);
+  const { data: canRedo } = useMonitorData(editor.getOperator()?.canRedo);
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(Tooltip12, { content: "Undo" }, /* @__PURE__ */ React38.createElement(
+    Button,
+    {
+      disabled: !canUndo,
+      icon: /* @__PURE__ */ React38.createElement(IconUndo, null),
+      size: "small",
+      onClick: () => {
+        editor?.undo();
+      }
+    }
+  )), /* @__PURE__ */ React38.createElement(Tooltip12, { content: "Redo" }, /* @__PURE__ */ React38.createElement(
+    Button,
+    {
+      size: "small",
+      icon: /* @__PURE__ */ React38.createElement(IconRedo, null),
+      disabled: !canRedo,
+      onClick: () => {
+        editor?.redo();
+      }
+    }
+  )));
+};
+
+// src/components/type-editor/tools/create-by-data.tsx
+import React39, { useCallback as useCallback10, useMemo as useMemo20, useState as useState20 } from "react";
+import { debounce } from "lodash";
+import { Button as Button2, Divider, Empty as Empty2, Modal, Space as Space4, TextArea } from "@douyinfe/semi-ui";
+import { IllustrationFailure, IllustrationFailureDark } from "@douyinfe/semi-illustrations";
+
+// src/components/type-editor/tools/style.ts
+import styled8 from "styled-components";
+var DataTransform = styled8.div`
+  height: 406px;
+  display: flex;
+  gap: 4px;
+`;
+
+// src/components/type-editor/tools/create-by-data.tsx
+var CreateByData = ({
+  mode,
+  disabled,
+  customInputRender: CustomInputRender,
+  editor
+}) => {
+  const modeConfig = useMemo20(() => modeValueConfig.find((v) => v.mode === mode), [mode]);
+  const [visible, setVisible] = useState20(false);
+  const [typeEditorValue, setTypeEditorValue] = useState20(
+    modeConfig.toolConfig.createByData.genDefaultValue()
+  );
+  const [errorEmpty, setErrorEmpty] = useState20(false);
+  const handleClose = useCallback10(() => {
+    setVisible(false);
+    setTypeEditorValue(
+      modeConfig.toolConfig.createByData.genDefaultValue()
+    );
+  }, [modeConfig]);
+  const handleOk = useCallback10(async () => {
+    if (editor) {
+      editor.setValue(typeEditorValue);
+      handleClose();
+    }
+  }, [handleClose, typeEditorValue, editor]);
+  const onChange = debounce((newVal) => {
+    const parsedValue = typeEditorUtils.jsonParse(newVal);
+    const error = newVal && !(parsedValue && typeof parsedValue === "object" && !Array.isArray(parsedValue));
+    if (!error) {
+      setTypeEditorValue(
+        modeConfig.commonValueToSubmitValue(parsedValue)
+      );
+      setErrorEmpty(false);
+    } else if (parsedValue) {
+      setErrorEmpty(true);
+    }
+  }, 500);
+  return /* @__PURE__ */ React39.createElement("div", null, /* @__PURE__ */ React39.createElement(Button2, { disabled, size: "small", onClick: () => setVisible(true) }, "Import from JSON"), /* @__PURE__ */ React39.createElement(
+    Modal,
+    {
+      okText: `Import`,
+      width: 960,
+      okButtonProps: {},
+      cancelText: "Cancel",
+      title: "Import from JSON",
+      visible,
+      onOk: handleOk,
+      onCancel: handleClose
+    },
+    /* @__PURE__ */ React39.createElement(DataTransform, null, /* @__PURE__ */ React39.createElement("div", { style: { height: "100%", flex: 1 } }, CustomInputRender ? /* @__PURE__ */ React39.createElement(CustomInputRender, { value: "{}", onChange }) : /* @__PURE__ */ React39.createElement(TextArea, { defaultValue: "{}", onChange })), /* @__PURE__ */ React39.createElement(Divider, { layout: "vertical", style: { height: "100%" } }), /* @__PURE__ */ React39.createElement(Space4, { align: "start", vertical: true, style: { height: "100%", flex: 1 } }, /* @__PURE__ */ React39.createElement("div", { style: { height: "100%", flex: 1, overflowY: "scroll" } }, /* @__PURE__ */ React39.createElement(
+      TypeEditorTable,
+      {
+        readonly: true,
+        mode,
+        forceUpdate: true,
+        value: errorEmpty ? void 0 : typeEditorValue,
+        customEmptyNode: errorEmpty ? /* @__PURE__ */ React39.createElement(
+          Empty2,
+          {
+            style: { marginTop: 40 },
+            image: /* @__PURE__ */ React39.createElement(IllustrationFailure, { style: { width: 100, height: 100 } }),
+            darkModeImage: /* @__PURE__ */ React39.createElement(IllustrationFailureDark, { style: { width: 100, height: 100 } }),
+            description: "Invalid value"
+          }
+        ) : void 0,
+        viewConfigs: modeConfig.toolConfig.createByData.viewConfig
+      }
+    ))))
+  ));
+};
+
+// src/components/type-editor/tool-bar.tsx
+var ToolBar = ({
+  mode,
+  editor,
+  toolbarConfig = []
+}) => {
+  const config = useMemo21(() => {
+    const res = /* @__PURE__ */ new Map();
+    toolbarConfig.forEach((tool) => {
+      if (typeof tool === "string") {
+        res.set(tool, { type: tool });
+      } else {
+        res.set(tool.type, tool);
+      }
+    });
+    return res;
+  }, [toolbarConfig]);
+  const importConfig = config.get("Import" /* Import */);
+  return /* @__PURE__ */ React40.createElement("div", { style: { width: "100%" } }, editor && /* @__PURE__ */ React40.createElement(Space5, { style: { float: "right" } }, /* @__PURE__ */ React40.createElement(React40.Fragment, null, importConfig && /* @__PURE__ */ React40.createElement(React40.Fragment, null, importConfig.disabled ? /* @__PURE__ */ React40.createElement(Tooltip13, { content: importConfig.disabled }, /* @__PURE__ */ React40.createElement(CreateByData, { disabled: true, mode, editor })) : /* @__PURE__ */ React40.createElement(
+    CreateByData,
+    {
+      mode,
+      customInputRender: importConfig.customInputRender,
+      editor
+    }
+  ))), config.has("UndoRedo" /* UndoRedo */) && /* @__PURE__ */ React40.createElement(UndoRedo, { editor })));
+};
+
+// src/components/type-editor/index.tsx
+var TypeEditorContainer = (props, ref) => {
+  const [instance, setInstance] = useState21();
+  useImperativeHandle2(ref, () => ({
+    getContainer: () => instance?.getContainer(),
+    setValue: instance?.setValue || noop2,
+    getService: instance?.getService || (() => void 0),
+    undo: instance?.undo || noop2,
+    redo: instance?.redo || noop2,
+    getValue() {
+      return instance?.getValue();
+    },
+    getOperator() {
+      return instance?.getOperator();
+    }
+  }));
+  return /* @__PURE__ */ React41.createElement(Space6, { spacing: 4, vertical: true }, instance && /* @__PURE__ */ React41.createElement(ToolBar, { ...props, editor: instance }), /* @__PURE__ */ React41.createElement(
+    TypeEditorTable,
+    {
+      onInit: (editor) => {
+        setInstance(editor.current);
+      },
+      ...props
+    }
+  ));
+};
+var TypeEditor = fixedTSForwardRef(TypeEditorContainer);
+
+// src/index.ts
+export * from "@flowgram.ai/json-schema";
+
+// src/preset/object-type-editor/index.tsx
+import React42, { useMemo as useMemo22 } from "react";
+var defaultViewConfigs = [
+  {
+    type: "key" /* Key */,
+    visible: true
+  },
+  {
+    type: "type" /* Type */,
+    visible: true
+  },
+  {
+    type: "description" /* Description */,
+    visible: true
+  },
+  {
+    type: "required" /* Required */,
+    visible: true
+  },
+  {
+    type: "default" /* Default */,
+    visible: true
+  },
+  {
+    type: "operate" /* Operate */,
+    visible: true
+  }
+];
+function ObjectTypeEditor(props) {
+  const { value, onChange, config, readonly } = props;
+  const { rootKey = "outputs", viewConfigs = defaultViewConfigs } = config || {};
+  const wrapValue = useMemo22(
+    () => ({
+      type: "object",
+      properties: { [rootKey]: value || { type: "object" } }
+    }),
+    [value, rootKey]
+  );
+  const disableEditColumn = useMemo22(() => {
+    const res = [];
+    if (readonly) {
+      viewConfigs.forEach((v) => {
+        res.push({
+          column: v.type,
+          reason: "This field is not editable."
+        });
+      });
+    }
+    return res;
+  }, [readonly, viewConfigs]);
+  return /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement(
+    TypeEditor,
+    {
+      readonly,
+      mode: "type-definition",
+      toolbarConfig: ["Import" /* Import */, "UndoRedo" /* UndoRedo */],
+      rootLevel: 1,
+      value: wrapValue,
+      disableEditColumn,
+      onChange: (_v) => onChange?.(_v?.properties?.[rootKey]),
+      onCustomSetValue: (newType) => ({
+        type: "object",
+        properties: {
+          [rootKey]: newType
+        }
+      }),
+      getRootSchema: (type) => type.properties[rootKey],
+      viewConfigs: defaultViewConfigs,
+      onEditRowDataSource: (dataSource) => {
+        if (dataSource[0]) {
+          dataSource[0].disableEditColumn = [
+            {
+              column: "key" /* Key */,
+              reason: "This field is not editable."
+            },
+            {
+              column: "type" /* Type */,
+              reason: "This field is not editable."
+            },
+            {
+              column: "required" /* Required */,
+              reason: "This field is not editable."
+            },
+            {
+              column: "default" /* Default */,
+              reason: "This field is not editable."
+            },
+            {
+              column: "operate" /* Operate */,
+              reason: "This field is not editable."
+            }
+          ];
+          dataSource[0].cannotDrag = true;
+        }
+        return dataSource;
+      }
+    }
+  ));
+}
+export {
+  ObjectTypeEditor,
+  ToolbarKey,
+  TypeEditor,
+  columnConfigs as TypeEditorColumnConfigs,
+  TypeEditorColumnType,
+  TypeEditorContext,
+  TypeEditorRegistryManager,
+  TypeEditorService,
+  TypeSelector,
+  columnConfigs as typeEditorColumnConfigs
+};
+//# sourceMappingURL=index.js.map