@flowgram.ai/playground-react 0.4.12 → 0.4.15

package/dist/index.js

@@ -37,8 +37,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Disposable: () => import_utils3.Disposable,
   Emitter: () => import_utils3.Emitter,
   Event: () => import_utils3.Event,
@@ -48,10 +48,10 @@ __export(src_exports, {
   usePlaygroundTools: () => usePlaygroundTools,
   useRefresh: () => import_utils3.useRefresh
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_reflect_metadata = require("reflect-metadata");
 var import_utils3 = require("@flowgram.ai/utils");
-__reExport(src_exports, require("@flowgram.ai/core"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/core"), module.exports);
 
 // src/hooks/use-playground-tools.ts
 var import_react = require("react");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/hooks/use-playground-tools.ts","../src/components/playground-react.tsx","../src/preset/playground-react-preset.ts","../src/layers/playground-content-layer.tsx","../src/components/playground-react-content.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 'reflect-metadata';\n\n/* 核心 模块导出 */\nexport { useRefresh, Emitter, Event, Disposable } from '@flowgram.ai/utils';\nexport * from '@flowgram.ai/core';\n\nexport { usePlaygroundTools } from './hooks';\nexport {\n  PlaygroundReact,\n  PlaygroundReactContent,\n  PlaygroundReactContentProps,\n  PlaygroundRef,\n} from './components';\nexport { PlaygroundReactProps, createPlaygroundReactPreset } from './preset';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { DisposableCollection } from '@flowgram.ai/utils';\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  PlaygroundInteractiveType,\n  useConfigEntity,\n  usePlayground,\n} from '@flowgram.ai/core';\n\nexport interface PlaygroundToolsPropsType {\n  /**\n   * 最大缩放比，默认 2\n   */\n  maxZoom?: number;\n  /**\n   * 最小缩放比，默认 0.25\n   */\n  minZoom?: number;\n}\n\nexport interface PlaygroundTools {\n  /**\n   * 缩放 zoom 大小比例\n   */\n  zoom: number;\n  /**\n   * 放大\n   */\n  zoomin: (easing?: boolean) => void;\n  /**\n   * 缩小\n   */\n  zoomout: (easing?: boolean) => void;\n  /**\n   * 设置缩放比例\n   * @param zoom\n   */\n  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;\n  /**\n   * 当前的交互模式, 鼠标友好模式 和 触摸板模式\n   */\n  interactiveType: PlaygroundInteractiveType;\n  /**\n   * 切换交互模式\n   */\n  toggleIneractiveType: () => void;\n}\n\nexport function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools {\n  const { maxZoom, minZoom } = props || {};\n  const playground = usePlayground();\n  const editorState = useConfigEntity(EditorStateConfigEntity, true);\n\n  const [zoom, setZoom] = useState(1);\n\n  const handleZoomOut = useCallback(\n    (easing?: boolean) => {\n      playground.config.zoomout(easing);\n    },\n    [playground]\n  );\n\n  const handleZoomIn = useCallback(\n    (easing?: boolean) => {\n      playground.config.zoomin(easing);\n    },\n    [playground]\n  );\n\n  const handleUpdateZoom = useCallback(\n    (value: number, easing?: boolean, easingDuration?: number) => {\n      playground.config.updateZoom(value, easing, easingDuration);\n    },\n    [playground]\n  );\n\n  const handleToggleIneractiveType = useCallback(() => {\n    if (editorState.isMouseFriendlyMode()) {\n      editorState.changeState(EditorState.STATE_SELECT.id);\n    } else {\n      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);\n    }\n  }, [editorState]);\n\n  useEffect(() => {\n    const dispose = new DisposableCollection();\n    dispose.push(playground.onZoom((z) => setZoom(z)));\n    return () => dispose.dispose();\n  }, [playground]);\n\n  useEffect(() => {\n    const config = playground.config.config;\n    playground.config.updateConfig({\n      maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom,\n      minZoom: minZoom !== undefined ? minZoom : config.minZoom,\n    });\n  }, [playground, maxZoom, minZoom]);\n\n  return {\n    zoomin: handleZoomIn,\n    zoomout: handleZoomOut,\n    updateZoom: handleUpdateZoom,\n    zoom,\n    interactiveType: editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD',\n    toggleIneractiveType: handleToggleIneractiveType,\n  };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useMemo, forwardRef } from 'react';\n\nimport {\n  createPlaygroundPlugin,\n  PlaygroundReactProvider,\n  PlaygroundReactRenderer,\n  PluginContext,\n} from '@flowgram.ai/core';\n\nimport { PlaygroundReactProps, createPlaygroundReactPreset } from '../preset';\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\n\nexport type PlaygroundRef = PluginContext;\n\nexport const PlaygroundReact = forwardRef<PlaygroundRef, PlaygroundReactProps>(\n  function PlaygroundReact(props, ref) {\n    const { parentContainer, children, ...others } = props;\n    const contentLoadPlugin = useMemo(\n      () =>\n        createPlaygroundPlugin({\n          onInit(ctx) {\n            ctx.playground.registerLayer(PlaygroundContentLayer);\n          },\n        }),\n      [],\n    );\n    const preset = useMemo(() => createPlaygroundReactPreset(others, [contentLoadPlugin]), []);\n    return (\n      <PlaygroundReactProvider ref={ref} plugins={preset} parentContainer={parentContainer}>\n        <PlaygroundReactRenderer>{children}</PlaygroundReactRenderer>\n      </PlaygroundReactProvider>\n    );\n  },\n);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createShortcutsPlugin } from '@flowgram.ai/shortcuts-plugin';\nimport {\n  PluginContext,\n  PluginsProvider,\n  Plugin,\n  createPlaygroundPlugin,\n  PlaygroundConfig,\n  PlaygroundLayer,\n} from '@flowgram.ai/core';\nimport { createBackgroundPlugin } from '@flowgram.ai/background-plugin';\n\nimport { PlaygroundReactProps } from './playground-react-props';\n\nexport function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(\n  opts: PlaygroundReactProps<CTX>,\n  plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n  return (ctx: CTX) => {\n    plugins = plugins.slice();\n    /**\n     * 注册背景 (放前面插入), 默认打开\n     */\n    if (opts.background || opts.background === undefined) {\n      const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};\n      plugins.push(createBackgroundPlugin(backgroundOptions));\n    }\n    /**\n     * 注册快捷键\n     */\n    if (opts.shortcuts) {\n      plugins.push(\n        createShortcutsPlugin({\n          registerShortcuts: (registry) => opts.shortcuts!(registry, ctx),\n        })\n      );\n    }\n    /**\n     * 注册三方插件\n     */\n    if (opts.plugins) {\n      plugins.push(...opts.plugins(ctx));\n    }\n    /**\n     * 画布生命周期注册\n     */\n    plugins.push(\n      createPlaygroundPlugin<CTX>({\n        onBind: (bindConfig) => {\n          opts.onBind?.(bindConfig);\n        },\n        onInit: (ctx) => {\n          const playgroundConfig = ctx.get<PlaygroundConfig>(PlaygroundConfig);\n          if (opts.playground) {\n            if (opts.playground.autoFocus !== undefined) {\n              playgroundConfig.autoFocus = opts.playground.autoFocus;\n            }\n            if (opts.playground.autoResize !== undefined) {\n              playgroundConfig.autoResize = opts.playground.autoResize;\n            }\n          }\n          playgroundConfig.autoFocus = false;\n          ctx.playground.registerLayer(PlaygroundLayer, opts.playground);\n          if (opts.layers) {\n            ctx.playground.registerLayers(...opts.layers);\n          }\n          if (opts.onInit) opts.onInit(ctx);\n        },\n        onReady(ctx) {\n          if (opts.onReady) opts.onReady(ctx);\n        },\n        onAllLayersRendered() {\n          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);\n        },\n        onDispose() {\n          if (opts.onDispose) opts.onDispose(ctx);\n        },\n        containerModules: opts.containerModules || [],\n      })\n    );\n    return plugins;\n  };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { injectable } from 'inversify';\nimport { Layer } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nexport interface PlaygroundReactContentProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\n@injectable()\nexport class PlaygroundContentLayer extends Layer<PlaygroundReactContentProps> {\n  static type = 'PlaygroundContentLayer';\n\n  readonly node = domUtils.createDivWithClass(\n    'gedit-playground-layer gedit-playground-content-layer',\n  );\n\n  onZoom(scale: number): void {\n    this.node.style.transform = `scale(${scale})`;\n  }\n\n  onReady() {\n    this.node.style.left = '0px';\n    this.node.style.top = '0px';\n  }\n\n  updateOptions(opts: PlaygroundReactContentProps) {\n    this.options = opts;\n    this.render();\n  }\n\n  render(): JSX.Element {\n    return (\n      <div\n        className={this.options.className}\n        style={{ position: 'absolute', ...this.options.style }}\n      >\n        {this.options.children}\n      </div>\n    );\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useMemo } from 'react';\n\nimport { usePlayground } from '@flowgram.ai/core';\n\nimport {\n  PlaygroundContentLayer,\n  PlaygroundReactContentProps,\n} from '../layers/playground-content-layer';\n\nexport { PlaygroundReactContentProps };\n\nexport const PlaygroundReactContent: React.FC<PlaygroundReactContentProps> = props => {\n  const playground = usePlayground();\n  useMemo(() => {\n    const layer = playground.getLayer(PlaygroundContentLayer)!;\n    layer.updateOptions(props);\n  }, [props]);\n  return <></>;\n};\n"],"mappings":"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","names":["import_utils","import_react","import_core","import_core","ctx","import_react","import_core","import_utils","React","PlaygroundReact","React","import_react","import_core","React"]}
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-playground-tools.ts","../src/components/playground-react.tsx","../src/preset/playground-react-preset.ts","../src/layers/playground-content-layer.tsx","../src/components/playground-react-content.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport 'reflect-metadata';\n\n/* 核心 模块导出 */\nexport { useRefresh, Emitter, Event, Disposable } from '@flowgram.ai/utils';\nexport * from '@flowgram.ai/core';\n\nexport { usePlaygroundTools } from './hooks';\nexport {\n  PlaygroundReact,\n  PlaygroundReactContent,\n  PlaygroundReactContentProps,\n  PlaygroundRef,\n} from './components';\nexport { PlaygroundReactProps, createPlaygroundReactPreset } from './preset';\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { DisposableCollection } from '@flowgram.ai/utils';\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  PlaygroundInteractiveType,\n  useConfigEntity,\n  usePlayground,\n} from '@flowgram.ai/core';\n\nexport interface PlaygroundToolsPropsType {\n  /**\n   * 最大缩放比，默认 2\n   */\n  maxZoom?: number;\n  /**\n   * 最小缩放比，默认 0.25\n   */\n  minZoom?: number;\n}\n\nexport interface PlaygroundTools {\n  /**\n   * 缩放 zoom 大小比例\n   */\n  zoom: number;\n  /**\n   * 放大\n   */\n  zoomin: (easing?: boolean) => void;\n  /**\n   * 缩小\n   */\n  zoomout: (easing?: boolean) => void;\n  /**\n   * 设置缩放比例\n   * @param zoom\n   */\n  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;\n  /**\n   * 当前的交互模式, 鼠标友好模式 和 触摸板模式\n   */\n  interactiveType: PlaygroundInteractiveType;\n  /**\n   * 切换交互模式\n   */\n  toggleIneractiveType: () => void;\n}\n\nexport function usePlaygroundTools(props?: PlaygroundToolsPropsType): PlaygroundTools {\n  const { maxZoom, minZoom } = props || {};\n  const playground = usePlayground();\n  const editorState = useConfigEntity(EditorStateConfigEntity, true);\n\n  const [zoom, setZoom] = useState(1);\n\n  const handleZoomOut = useCallback(\n    (easing?: boolean) => {\n      playground.config.zoomout(easing);\n    },\n    [playground]\n  );\n\n  const handleZoomIn = useCallback(\n    (easing?: boolean) => {\n      playground.config.zoomin(easing);\n    },\n    [playground]\n  );\n\n  const handleUpdateZoom = useCallback(\n    (value: number, easing?: boolean, easingDuration?: number) => {\n      playground.config.updateZoom(value, easing, easingDuration);\n    },\n    [playground]\n  );\n\n  const handleToggleIneractiveType = useCallback(() => {\n    if (editorState.isMouseFriendlyMode()) {\n      editorState.changeState(EditorState.STATE_SELECT.id);\n    } else {\n      editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);\n    }\n  }, [editorState]);\n\n  useEffect(() => {\n    const dispose = new DisposableCollection();\n    dispose.push(playground.onZoom((z) => setZoom(z)));\n    return () => dispose.dispose();\n  }, [playground]);\n\n  useEffect(() => {\n    const config = playground.config.config;\n    playground.config.updateConfig({\n      maxZoom: maxZoom !== undefined ? maxZoom : config.maxZoom,\n      minZoom: minZoom !== undefined ? minZoom : config.minZoom,\n    });\n  }, [playground, maxZoom, minZoom]);\n\n  return {\n    zoomin: handleZoomIn,\n    zoomout: handleZoomOut,\n    updateZoom: handleUpdateZoom,\n    zoom,\n    interactiveType: editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD',\n    toggleIneractiveType: handleToggleIneractiveType,\n  };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useMemo, forwardRef } from 'react';\n\nimport {\n  createPlaygroundPlugin,\n  PlaygroundReactProvider,\n  PlaygroundReactRenderer,\n  PluginContext,\n} from '@flowgram.ai/core';\n\nimport { PlaygroundReactProps, createPlaygroundReactPreset } from '../preset';\nimport { PlaygroundContentLayer } from '../layers/playground-content-layer';\n\nexport type PlaygroundRef = PluginContext;\n\nexport const PlaygroundReact = forwardRef<PlaygroundRef, PlaygroundReactProps>(\n  function PlaygroundReact(props, ref) {\n    const { parentContainer, children, ...others } = props;\n    const contentLoadPlugin = useMemo(\n      () =>\n        createPlaygroundPlugin({\n          onInit(ctx) {\n            ctx.playground.registerLayer(PlaygroundContentLayer);\n          },\n        }),\n      [],\n    );\n    const preset = useMemo(() => createPlaygroundReactPreset(others, [contentLoadPlugin]), []);\n    return (\n      <PlaygroundReactProvider ref={ref} plugins={preset} parentContainer={parentContainer}>\n        <PlaygroundReactRenderer>{children}</PlaygroundReactRenderer>\n      </PlaygroundReactProvider>\n    );\n  },\n);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createShortcutsPlugin } from '@flowgram.ai/shortcuts-plugin';\nimport {\n  PluginContext,\n  PluginsProvider,\n  Plugin,\n  createPlaygroundPlugin,\n  PlaygroundConfig,\n  PlaygroundLayer,\n} from '@flowgram.ai/core';\nimport { createBackgroundPlugin } from '@flowgram.ai/background-plugin';\n\nimport { PlaygroundReactProps } from './playground-react-props';\n\nexport function createPlaygroundReactPreset<CTX extends PluginContext = PluginContext>(\n  opts: PlaygroundReactProps<CTX>,\n  plugins: Plugin[] = []\n): PluginsProvider<CTX> {\n  return (ctx: CTX) => {\n    plugins = plugins.slice();\n    /**\n     * 注册背景 (放前面插入), 默认打开\n     */\n    if (opts.background || opts.background === undefined) {\n      const backgroundOptions = typeof opts.background === 'object' ? opts.background : {};\n      plugins.push(createBackgroundPlugin(backgroundOptions));\n    }\n    /**\n     * 注册快捷键\n     */\n    if (opts.shortcuts) {\n      plugins.push(\n        createShortcutsPlugin({\n          registerShortcuts: (registry) => opts.shortcuts!(registry, ctx),\n        })\n      );\n    }\n    /**\n     * 注册三方插件\n     */\n    if (opts.plugins) {\n      plugins.push(...opts.plugins(ctx));\n    }\n    /**\n     * 画布生命周期注册\n     */\n    plugins.push(\n      createPlaygroundPlugin<CTX>({\n        onBind: (bindConfig) => {\n          opts.onBind?.(bindConfig);\n        },\n        onInit: (ctx) => {\n          const playgroundConfig = ctx.get<PlaygroundConfig>(PlaygroundConfig);\n          if (opts.playground) {\n            if (opts.playground.autoFocus !== undefined) {\n              playgroundConfig.autoFocus = opts.playground.autoFocus;\n            }\n            if (opts.playground.autoResize !== undefined) {\n              playgroundConfig.autoResize = opts.playground.autoResize;\n            }\n          }\n          playgroundConfig.autoFocus = false;\n          ctx.playground.registerLayer(PlaygroundLayer, opts.playground);\n          if (opts.layers) {\n            ctx.playground.registerLayers(...opts.layers);\n          }\n          if (opts.onInit) opts.onInit(ctx);\n        },\n        onReady(ctx) {\n          if (opts.onReady) opts.onReady(ctx);\n        },\n        onAllLayersRendered() {\n          if (opts.onAllLayersRendered) opts.onAllLayersRendered(ctx);\n        },\n        onDispose() {\n          if (opts.onDispose) opts.onDispose(ctx);\n        },\n        containerModules: opts.containerModules || [],\n      })\n    );\n    return plugins;\n  };\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { injectable } from 'inversify';\nimport { Layer } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nexport interface PlaygroundReactContentProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\n@injectable()\nexport class PlaygroundContentLayer extends Layer<PlaygroundReactContentProps> {\n  static type = 'PlaygroundContentLayer';\n\n  readonly node = domUtils.createDivWithClass(\n    'gedit-playground-layer gedit-playground-content-layer',\n  );\n\n  onZoom(scale: number): void {\n    this.node.style.transform = `scale(${scale})`;\n  }\n\n  onReady() {\n    this.node.style.left = '0px';\n    this.node.style.top = '0px';\n  }\n\n  updateOptions(opts: PlaygroundReactContentProps) {\n    this.options = opts;\n    this.render();\n  }\n\n  render(): JSX.Element {\n    return (\n      <div\n        className={this.options.className}\n        style={{ position: 'absolute', ...this.options.style }}\n      >\n        {this.options.children}\n      </div>\n    );\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useMemo } from 'react';\n\nimport { usePlayground } from '@flowgram.ai/core';\n\nimport {\n  PlaygroundContentLayer,\n  PlaygroundReactContentProps,\n} from '../layers/playground-content-layer';\n\nexport { PlaygroundReactContentProps };\n\nexport const PlaygroundReactContent: React.FC<PlaygroundReactContentProps> = props => {\n  const playground = usePlayground();\n  useMemo(() => {\n    const layer = playground.getLayer(PlaygroundContentLayer)!;\n    layer.updateOptions(props);\n  }, [props]);\n  return <></>;\n};\n"],"mappings":"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","names":["import_utils","import_react","import_core","import_core","ctx","import_react","import_core","import_utils","React","PlaygroundReact","React","import_react","import_core","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/playground-react",
-  "version": "0.4.12",
+  "version": "0.4.15",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -25,25 +25,25 @@
   "dependencies": {
     "inversify": "^6.0.1",
     "reflect-metadata": "~0.2.2",
-    "@flowgram.ai/background-plugin": "0.4.12",
-    "@flowgram.ai/core": "0.4.12",
-    "@flowgram.ai/shortcuts-plugin": "0.4.12",
-    "@flowgram.ai/utils": "0.4.12"
+    "@flowgram.ai/background-plugin": "0.4.15",
+    "@flowgram.ai/core": "0.4.15",
+    "@flowgram.ai/shortcuts-plugin": "0.4.15",
+    "@flowgram.ai/utils": "0.4.15"
   },
   "devDependencies": {
     "@types/bezier-js": "4.1.3",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitest/coverage-v8": "^0.32.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^8.54.0",
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
-    "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.4.12",
-    "@flowgram.ai/ts-config": "0.4.12"
+    "vitest": "^3.2.4",
+    "@flowgram.ai/eslint-config": "0.4.15",
+    "@flowgram.ai/ts-config": "0.4.15"
   },
   "peerDependencies": {
     "react": ">=16.8",