@yiyi_zhang/reactflow-ui 0.5.0-beta.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/README.md +150 -117
  2. package/dist/AiWorkflowIDE.d.ts +2 -0
  3. package/dist/WorkflowIDE.d.ts +14 -2
  4. package/dist/actions/builtin/common.d.ts +8 -0
  5. package/dist/actions/builtin/ecs.d.ts +12 -0
  6. package/dist/actions/registry.d.ts +23 -0
  7. package/dist/actions/types.d.ts +45 -0
  8. package/dist/ai.d.ts +5 -1
  9. package/dist/components/AICopilot/ParameterSuggester.d.ts +9 -0
  10. package/dist/components/AiNative/AgentTimeline.d.ts +11 -6
  11. package/dist/components/AiNative/InlineCanvasCopilot.d.ts +7 -0
  12. package/dist/components/AiNative/ProposalPreviewCard.d.ts +3 -3
  13. package/dist/components/BrandLogo.d.ts +13 -0
  14. package/dist/components/ExecutionWaterfallPanel.d.ts +3 -0
  15. package/dist/components/SandboxConfigModal.d.ts +7 -0
  16. package/dist/components/StructuredJsonViewer.d.ts +11 -0
  17. package/dist/components/business/ActionForm.d.ts +12 -0
  18. package/dist/components/business/DataPillInput.d.ts +14 -0
  19. package/dist/components/business/DecisionBranchCard.d.ts +13 -0
  20. package/dist/components/business/ForkJoinCard.d.ts +13 -0
  21. package/dist/components/business/FriendlyErrorCard.d.ts +8 -0
  22. package/dist/components/business/LoopDoWhileCard.d.ts +13 -0
  23. package/dist/components/business/PillPicker.d.ts +11 -0
  24. package/dist/components/business/RunStoryTimeline.d.ts +9 -0
  25. package/dist/components/business/StepFlowEditor.d.ts +11 -0
  26. package/dist/components/nodes/NodeLayout.d.ts +3 -1
  27. package/dist/components/template/TemplateExtractor.d.ts +10 -0
  28. package/dist/components/template/TemplateGallery.d.ts +10 -0
  29. package/dist/components/template/TemplateSetupWizard.d.ts +9 -0
  30. package/dist/hooks/useNodeExecution.d.ts +5 -2
  31. package/dist/index.d.ts +33 -0
  32. package/dist/logo.svg +37 -0
  33. package/dist/product-launch.html +1400 -0
  34. package/dist/reactflow-ui-ai.es.js +21392 -10
  35. package/dist/reactflow-ui.css +1 -1
  36. package/dist/reactflow-ui.es.js +20314 -9020
  37. package/dist/reactflow-ui.umd.js +31 -21
  38. package/dist/sample-workflows/ecs-lifecycle-automation.json +74 -0
  39. package/dist/services/ai/agentRunner.d.ts +23 -19
  40. package/dist/services/ai/draftPersistence.d.ts +3 -2
  41. package/dist/services/ai/systemPrompt.d.ts +1 -1
  42. package/dist/services/ai/toolExecutor.d.ts +15 -2
  43. package/dist/services/ai/workflowSynthesizer.d.ts +118 -0
  44. package/dist/services/wlsp/workflowLsp.d.ts +101 -0
  45. package/dist/stepmodel/compile.d.ts +5 -0
  46. package/dist/stepmodel/decompile.d.ts +5 -0
  47. package/dist/stepmodel/types.d.ts +61 -0
  48. package/dist/store/aiStore.d.ts +34 -3
  49. package/dist/template/applyTemplate.d.ts +10 -0
  50. package/dist/template/builtin/templates.d.ts +37 -0
  51. package/dist/template/sanitizer/anonymize.d.ts +5 -0
  52. package/dist/template/sanitizer/prune.d.ts +10 -0
  53. package/dist/template/sanitizer/rules.d.ts +10 -0
  54. package/dist/template/sanitizer/types.d.ts +55 -0
  55. package/dist/template/templateStore.d.ts +32 -0
  56. package/dist/template/types.d.ts +99 -0
  57. package/dist/types/aiEvents.d.ts +3 -1
  58. package/dist/types/conductor.d.ts +6 -1
  59. package/dist/types/workflow.d.ts +32 -0
  60. package/dist/utils/friendlyErrorTranslator.d.ts +26 -0
  61. package/dist/utils/localSandboxEngine.d.ts +49 -0
  62. package/package.json +7 -4
  63. package/dist/ai-BJwQZcGK.js +0 -15168
  64. package/dist/arc-BUGZGgtu.js +0 -83
  65. package/dist/architectureDiagram-3BPJPVTR-ZcgvTwSO.js +0 -4692
  66. package/dist/blockDiagram-GPEHLZMM-DtVtOBbH.js +0 -2418
  67. package/dist/c4Diagram-AAUBKEIU-tBS5Rcvm.js +0 -1577
  68. package/dist/channel-CURI9jmI.js +0 -5
  69. package/dist/chunk-2J33WTMH-D7gashNz.js +0 -19
  70. package/dist/chunk-4BX2VUAB-DE3VjyiZ.js +0 -8
  71. package/dist/chunk-55IACEB6-GYZ_m2MY.js +0 -8
  72. package/dist/chunk-727SXJPM-D4WVyvOg.js +0 -1528
  73. package/dist/chunk-AQP2D5EJ-Os2Uwqya.js +0 -1387
  74. package/dist/chunk-FMBD7UC4-B3CSVzS4.js +0 -19
  75. package/dist/chunk-ND2GUHAM-CNj_s1aK.js +0 -68
  76. package/dist/chunk-QZHKN3VN-DoV8iUKo.js +0 -15
  77. package/dist/classDiagram-4FO5ZUOK-Dr9C18x4.js +0 -16
  78. package/dist/classDiagram-v2-Q7XG4LA2-Dr9C18x4.js +0 -16
  79. package/dist/components/Controls/ModeSlider.d.ts +0 -2
  80. package/dist/cose-bilkent-S5V4N54A-CgQlI-io.js +0 -2609
  81. package/dist/cytoscape.esm-kVAWcYoG.js +0 -18755
  82. package/dist/dagre-BM42HDAG-CFMIuOmS.js +0 -445
  83. package/dist/defaultLocale-BgPVtth8.js +0 -171
  84. package/dist/diagram-2AECGRRQ-C5jZp2YX.js +0 -217
  85. package/dist/diagram-5GNKFQAL-DRUVcHpp.js +0 -123
  86. package/dist/diagram-KO2AKTUF-BOl4aaej.js +0 -461
  87. package/dist/diagram-LMA3HP47-ZeckPR2Q.js +0 -142
  88. package/dist/diagram-OG6HWLK6-qUWeLfa-.js +0 -528
  89. package/dist/erDiagram-TEJ5UH35-Bw_CWS13.js +0 -899
  90. package/dist/flowDiagram-I6XJVG4X-D3xEvQA-.js +0 -1628
  91. package/dist/ganttDiagram-6RSMTGT7-D8GvenY3.js +0 -2707
  92. package/dist/gitGraphDiagram-PVQCEYII-BWrN_HOm.js +0 -815
  93. package/dist/graph-BRoPeNF3.js +0 -1545
  94. package/dist/infoDiagram-5YYISTIA-Da8FG5tB.js +0 -24
  95. package/dist/init-DjUOC4st.js +0 -16
  96. package/dist/ishikawaDiagram-YF4QCWOH-Bg2_mKEc.js +0 -621
  97. package/dist/journeyDiagram-JHISSGLW-sFIxGfua.js +0 -834
  98. package/dist/kanban-definition-UN3LZRKU-CGmopzHd.js +0 -724
  99. package/dist/katex-DoRnZ_sp.js +0 -11682
  100. package/dist/layout-D9EpM4Fg.js +0 -1728
  101. package/dist/linear-BA49eco4.js +0 -259
  102. package/dist/mermaid.core-XSpZEAKP.js +0 -16137
  103. package/dist/mindmap-definition-RKZ34NQL-Bqf76QGB.js +0 -827
  104. package/dist/ordinal-B6-f3MAq.js +0 -61
  105. package/dist/pieDiagram-4H26LBE5-hHiP8HzL.js +0 -163
  106. package/dist/quadrantDiagram-W4KKPZXB-DSccwH8B.js +0 -1024
  107. package/dist/requirementDiagram-4Y6WPE33-DIpyoYZ_.js +0 -882
  108. package/dist/sankeyDiagram-5OEKKPKP-DsaPqq8D.js +0 -847
  109. package/dist/sequenceDiagram-3UESZ5HK-BNg7orie.js +0 -2891
  110. package/dist/stateDiagram-AJRCARHV-Rv1mSmnJ.js +0 -263
  111. package/dist/stateDiagram-v2-BHNVJYJU-BME16k02.js +0 -16
  112. package/dist/timeline-definition-PNZ67QCA-CmmzdVk-.js +0 -1055
  113. package/dist/vennDiagram-CIIHVFJN-BQt00w9Q.js +0 -1557
  114. package/dist/wardley-L42UT6IY-D7b2ujEZ.js +0 -22512
  115. package/dist/wardleyDiagram-YWT4CUSO-LZpiODGN.js +0 -675
  116. package/dist/xychartDiagram-2RQKCTM6-BpJlv_mc.js +0 -1342
package/README.md CHANGED
@@ -1,62 +1,70 @@
1
- # Conductor Workflow IDE (ReactFlow UI)
2
-
3
- 基于 React 19、ReactFlow 和 Vite 构建的企业级 [Netflix Conductor](https://conductor-oss.org/) 工作流可视化设计器。
4
-
5
- 提供两个可独立集成的核心组件:
6
- - **`WorkflowIDE`**(主入口)— 面向专业编排人员的完整可视化设计器
7
- - **`AiWorkflowIDE`**(`/ai` 子路径)— 对话优先、AI 驱动,面向非技术业务用户
8
-
9
- ## ✨ 核心特性
10
-
11
- ### 🎨 可视化建模
12
- - **从零创建**:无需预先提供 JSON,通过空状态引导面板新建空白工作流,配合中心 **[+]** 引导按钮快速开始建模
13
- - **完整任务类型**:支持 HTTP、SIMPLE、INLINE/LAMBDA、SWITCH、FORK_JOIN、DO_WHILE、SUB_WORKFLOW、SET_VARIABLE、TERMINATE 等全量 Conductor 任务类型
14
- - **极简视图**:移除冗余的 START/END 虚拟节点,工作流图更加聚焦业务逻辑
15
- - **智能布局**:自动 Dagre 布局(TB/LR),超大流程自动触发蛇形布局,编辑/只读模式行为一致
16
-
17
- ### 🔀 复杂结构编辑
18
- - **SWITCH 分支管理**:在节点上直接添加、重命名、删除分支,全部通过页面内 Modal,无浏览器原生弹框
19
- - **DO_WHILE 循环体**:循环任务以容器方式展示,支持在循环体内任意位置插入任务(含首位)
20
- - **FORK_JOIN 并行分支**:支持动态分支添加和管理
21
-
22
- ### ✏️ 编辑体验
23
- - **全屏代码编辑器**:点击任意表达式/脚本/JSON 字段右上角 **⛶** 按钮,展开全屏编辑器,支持 Ctrl+S 保存、Esc 取消,底部状态栏显示行数和字符数
24
- - **任务引用名实时编辑**:引用名输入框支持流畅输入,失焦/回车后提交,避免逐字符刷新
25
- - **撤销/重做**:完整的编辑历史,支持 Ctrl+Z / Ctrl+Shift+Z
26
- - **智能剪贴板**:任务复制粘贴
27
-
28
- ### 👁️ 视图模式
29
- - **Business 模式**:仅展示核心业务节点,控制/数据节点折叠为边标签
30
- - **Standard 模式**:业务 + 控制流节点(默认)
31
- - **Developer 模式**:显示全部节点,含数据转换等辅助节点,节点上展示表达式预览
32
-
33
- ### 🚀 运行态监控
34
- - 节点根据执行状态(Scheduled / In Progress / Completed / Failed / Timed Out / Skipped)实时变色
35
- - 已完成路径连线高亮,进行中路径动态动画,编辑/只读模式使用静态实线
36
- - 点击节点展示执行详情面板(输入/输出/耗时/重试次数)
37
- - **运行态操作**:暂停、继续、终止、重试、重启(支持选择定义版本)、从指定任务重跑、跳过任务
38
- - `allowOperations` 全局权限开关,快速控制操作按钮是否可用
39
-
40
- ### 🤖 AI Copilot(智能辅助)
41
- - 自然语言描述生成完整工作流,支持对话式迭代修改
42
- - 差异卡片(Diff Card)预览变更内容,一键应用/撤销
43
- - **✨ AI 参数填充(v0.4.0 新增)**:节点编辑面板一键调用 AI 生成完整 `inputParameters`,基于任务类型、上游任务列表和工作流入参自动推断,diff 预览后一键应用
44
-
45
- ### 🔬 执行验证闭环(v0.4.0 新增)
46
- - **执行验证面板**:在 edit 模式下点击"▶ 执行验证"按钮,填写工作流入参(表单/JSON 双模式),一键触发真实 Conductor 执行
47
- - **自动切换 run 模式**:执行触发后 IDE 自动切换到运行态,通过指数退避轮询实时更新执行状态
48
- - **结构化入参声明**:`WorkflowSettingsPanel` 支持可视化编辑入参名称、类型、是否必填、描述和示例值
49
-
50
- ### 📊 执行结果分析(v0.4.0 新增)
51
- - **执行概览面板**:run 模式下点击"📊 分析",展示总任务数/成功率/失败数/总耗时概览卡片
52
- - **步骤时序表**:按 `startTime` 排序显示所有任务的执行状态、耗时和重试次数,点击行可高亮对应节点
53
- - **智能故障诊断**:自动识别 10+ 种常见 Conductor 错误模式(JSONPath 失败、HTTP 错误码、超时、认证、脚本异常等),在诊断卡片中给出可操作的修复建议
54
- - **"去修复"跳转**:点击诊断卡片的"去修复"按钮,一键切换到 edit 模式并选中问题任务
55
-
56
- ### 🏢 企业级能力
57
- - TypeScript 全量类型定义(WorkflowDef、TaskDef、WorkflowInputParam、ExecutionActions…)
58
- - 命令式 API(`ref`)支持程序化创建、保存、导出
59
- - 强类型 Ref API:`getWorkflowDef()`、`save()`、`createBlankWorkflow()`
1
+ # Conductor Workflow IDE (`@yiyi_zhang/reactflow-ui` v1.1.0)
2
+
3
+ 基于 **React 19、ReactFlow 与 Zustand** 构建的下一代企业级 [Netflix Conductor](https://conductor-oss.org/) 工作流可视化设计器与 AI 原生编排 IDE。
4
+
5
+ 提供两个可独立按需集成的核心组件入口:
6
+ - **`WorkflowIDE`**(主入口 `@yiyi_zhang/reactflow-ui`)— 双模全融合,支持面向业务与运维的**业务卡片流 (StepFlow)**,以及面向架构研发的**专业开发者 DAG 拓扑**同屏热切换
7
+ - **`AiWorkflowIDE`**(子路径 `@yiyi_zhang/reactflow-ui/ai`)— 对话优先、AI 驱动,支持多轮 Agentic 编排、子工作流库复用与混合交互
8
+
9
+ ---
10
+
11
+ ## ⚡ v1.1.0 业务与技术全融合核心新特性 (New in v1.1.0)
12
+
13
+ ### 👔 支柱一:业务卡片流设计器 (Business StepFlow) 与双模同屏无损热切换
14
+ - **双模毫秒级热切换**:工具栏一键切换 `👔 业务模式` ⇄ `💻 开发者模式`。业务模式下将复杂的微服务连线拓扑解构为清晰直观的业务卡片流,支持任意位置插入步骤、上下重排与内联表单配置。
15
+ - **StepModel 双向无损编译引擎**:提供递归编译器与反编译器,保证卡片流与原生 Conductor DAG 之间 100% 状态保真转换,非标任务通过 `isProFallback` 严格兜底。
16
+
17
+ ### ☁️ 支柱二:内置云平台动作库与动态参数胶囊
18
+ - **首发生态对接类阿里云云主机 (ECS) 全生命周期动作**:创建云主机、启停机、磁盘快照备份、平滑升降规格、释放实例等。
19
+ - **动态参数胶囊与智能上游引用**:表单输入项胶囊化呈现,一键联想并安全绑定上游步骤产出的参数引用。
20
+
21
+ ### 🔀 支柱三:业务容器化高级控制流卡片
22
+ - **分支路由卡片 (`DecisionBranchCard`)**:分支 Tabs 导航、条件参数配置、分支内多步骤嵌套编排。
23
+ - **并行任务泳道卡片 (`ForkJoinCard`)**:多泳道并发设计器,动态增删泳道。
24
+ - **循环迭代容器卡片 (`LoopDoWhileCard`)**:循环体内嵌任务序列、继续条件表达式与防死循环熔断保护。
25
+
26
+ ### 🪄 支柱四:生产实例一键脱敏提炼为模板工具链 (Template Extractor)
27
+ - **生产资产一键沉淀**:将生产环境或演练场调试好的工作流一键提炼为公共模板,智能隐私脱敏引擎自动擦除内网 IP、密钥、密码与机密 ID。
28
+ - **8 大开箱即用场景模板中心**:覆盖云主机自动化、扩容容灾、定时省电关机等高频场景,支持全流程浏览器沙箱试跑验证。
29
+
30
+ ### 📖 支柱五:运行故事线时间轴与生活化诊断自愈建议
31
+ - **流水账故事线展开 (`RunStoryTimeline`)**:运行态以自然语言叙述工作流执行过程,直观呈现每一步耗时与数据快照。
32
+ - **生活化故障诊断自愈**:告别晦涩堆栈报错,提供通俗易懂的根因诊断与可直接操作的自愈行动建议。
33
+
34
+ ---
35
+
36
+ ## 🌟 v1.0.0 四大确定性工程底座 (Foundation)
37
+
38
+ ### 🧬 支柱一:确定性工作流语言服务 (W-LSP) 与数据血缘图谱
39
+ - **0ms 确定性 JSONPath 补全**:在节点配置面板输入 `${` 时,W-LSP 引擎实时遍历当前节点的所有**合法上游祖先节点**,融合五类数据源(运行态真实 Output、人工 Mock Output、`TaskSchema` 注册表、节点配置自省、类型默认字段)弹出零延迟自动补全,并附带 `⚡ 实时值预览`。
40
+ - **Portal 视口自适应锚定**:补全浮层挂载至 `document.body` 并自动感知视口边界翻转,彻底解决侧边抽屉滚动截断问题。
41
+ - **🔗 数据流血缘图谱 (Data Lineage Graph)**:一键开启画布级蓝色虚线动画边,直观展示跨节点 `${taskRef.output.xxx}` 的参数引用依赖与字段流向。
42
+ - **跨节点安全重构 (Refactor Rename)**:修改任意节点的 `taskReferenceName` 时,自动扫描并重写全图所有下游节点的 `${oldRef.output...}` 表达式,杜绝断链。
43
+
44
+ ### ⚡ 支柱二:浏览器本地沙箱试跑 (0ms Dry-Run) 与时间旅行调试器
45
+ - **无需后端的确定性沙箱引擎 (`localSandboxEngine`)**:支持 `SIMPLE`、`HTTP`、`INLINE`(安全沙箱求值)、`SWITCH`(真实计算 `caseValueParam` / `expression` 路由)、`FORK_JOIN`(并发波次耗时推演)、`DO_WHILE`(多轮循环迭代生成 `__1`、`__2`、`__3`)、`SET_VARIABLE`、`TERMINATE` 等全量控制流。
46
+ - **🧪 人工模拟数据配置台 (`SandboxConfigModal`)**:
47
+ - **Tab 1 — 全局入参 (`workflow.input`)**:自动提取工作流声明入参与全图 `${workflow.input.xxx}` 隐式引用,一键生成可编辑 JSON 模板。
48
+ - **Tab 2 — 节点 Mock、故障注入与分支路由**:按节点自定义 Mock Output JSON、模拟耗时 (`durationMs`)、为 `SWITCH` 强制指定命中分支,或注入 `FAILED` / `TIMED_OUT` 异常以验证高可用容错链路。
49
+ - **📊 并发甘特瀑布流与时间旅行回放 (`ExecutionWaterfallPanel`)**:
50
+ - 底部可展开并发执行甘特图,直观呈现并行分支耗时瓶颈。
51
+ - 拖动**时间旅行滑块 (`Time-Travel Scrubber`)** 或点击 `▶ 0.5x / 1x / 2x` 回放,画布节点与连线按毫秒级时间戳实时还原任意历史时刻的执行状态。
52
+ - **🔄 循环迭代切片器 (`LoopIterationPill`) & 结构化 JSON 树 (`StructuredJsonViewer`)**:
53
+ - `DO_WHILE` 节点内嵌 `[1] [2] [3]` 迭代切换胶囊,点击即可切换对应轮次的子任务快照。
54
+ - 运行态详情面板支持字段搜索高亮、折叠展开与**一键复制 JSONPath (`${taskRef.output.xxx}`)**。
55
+
56
+ ### 🤖 支柱三:画布原生 AI Co-Pilot (`Cmd+K`) 与 Shadow Graph 视觉 Diff
57
+ - **画布内联微调指令栏 (`InlineCanvasCopilot`)**:选中任意节点或直接在画布按下 `Cmd+K` / `Ctrl+K`,原位唤起毛玻璃 AI 指令浮层,支持局部新增下游节点、包裹重试循环、插入条件分支与自动补全参数。
58
+ - **👻 Shadow Graph 架构级 Diff 预览**:AI 生成或修改工作流提案时,画布直接渲染虚拟变更预览图(`+新增` 翠绿高亮、`~修改` 琥珀高亮、`-移除` 绯红虚线),支持顶部胶囊栏一键采纳或按节点部分采纳 (`Partial Accept`)。
59
+ - **零外部运行时依赖的轻量级流程图渲染**:内置基于 Dagre 的原生 SVG 流程图渲染引擎,无需体积庞大的外部 Mermaid 运行时即可在对话流中极速渲染架构图。
60
+
61
+ ### 🎛️ 支柱四:双向实时代码同步、语义级缩放 (Semantic LOD) 与统一工作台
62
+ - **双向实时分屏 JSON 编辑器 (`JsonPreviewPanel`)**:底部 Dock 栏点击 **`{ } JSON`** 即可展开左画布 + 右代码的双栏分屏视图,修改 JSON 经过 300ms 防抖与结构校验后实时驱动画布重绘,画布拖拽/增删节点亦实时同步至代码。
63
+ - **三级语义缩放 (Semantic Zoom LOD)**:
64
+ - **宏观鸟瞰 (`zoom < 0.55`)**:自动收起次要技术文本,渲染高对比度色块胶囊,百节点大图依然丝滑。
65
+ - **标准编排 (`0.55 <= zoom <= 1.15`)**:展示节点标题、类型徽章、引用名与运行耗时。
66
+ - **微距透视 (`zoom > 1.15`)**:节点卡片内直接透视展示核心入参摘要(如 `GET/POST URL`、`SWITCH` 路由表达式等),免去频繁开关抽屉。
67
+ - **统一毛玻璃胶囊工具栏 (`ActionBar`)**:将视图层级分段滑块(**📋 业务 / 🔧 标准 / 💻 全开发**)、**🔗 数据血缘**、**⌘K AI微调**、**↺/↻ 历史栈**、**🩺 诊断**、**⚙️ 配置**、**⚡ 沙箱试运行 | 🧪** 统一收纳于右上角流式 Dock。
60
68
 
61
69
  ---
62
70
 
@@ -66,121 +74,146 @@
66
74
  npm install @yiyi_zhang/reactflow-ui reactflow react react-dom
67
75
  ```
68
76
 
77
+ > **环境要求**:`react >= 18.0.0`(完全兼容 React 18 与 React 19),`reactflow >= 11.11.0`。
78
+
79
+ ---
80
+
69
81
  ## 🚀 快速开始
70
82
 
71
- ### WorkflowIDE(专业编排人员)
83
+ ### 1. `WorkflowIDE`(面向专业编排与研发人员)
72
84
 
73
85
  ```tsx
74
86
  import { useRef } from 'react';
75
87
  import { WorkflowIDE, WorkflowIDERef } from '@yiyi_zhang/reactflow-ui';
76
88
  import '@yiyi_zhang/reactflow-ui/style.css';
77
89
 
78
- function App() {
90
+ export default function App() {
79
91
  const ideRef = useRef<WorkflowIDERef>(null);
80
92
 
81
93
  return (
82
- <div style={{ height: '100vh' }}>
83
- <button onClick={() => ideRef.current?.createBlankWorkflow('my_flow')}>新建</button>
94
+ <div style={{ height: '100vh', width: '100%' }}>
84
95
  <WorkflowIDE
85
96
  ref={ideRef}
86
97
  theme="dark"
87
98
  themeColor="blue"
88
- onSave={(workflow) => console.log('保存:', workflow)}
89
- onRequestImport={() => { /* 打开文件选择器 */ }}
99
+ onSave={(workflow) => console.log('保存工作流:', workflow)}
100
+ onWorkflowChange={(workflow) => console.log('变更回调:', workflow)}
90
101
  />
91
102
  </div>
92
103
  );
93
104
  }
94
105
  ```
95
106
 
96
- 不传 `workflowDef` 时画布显示引导面板,支持空白创建、AI 生成或导入 JSON。
97
-
98
- ### AiWorkflowIDE(业务用户,AI 驱动)
107
+ ### 2. `AiWorkflowIDE`(面向业务与架构人员,AI 原生双栏编排)
99
108
 
100
- 从独立子路径导入,避免主入口承担 AI 协议/工具执行等代码体积:
109
+ 从独立子路径 `@yiyi_zhang/reactflow-ui/ai` 导入:
101
110
 
102
111
  ```tsx
103
112
  import { AiWorkflowIDE } from '@yiyi_zhang/reactflow-ui/ai';
104
113
  import '@yiyi_zhang/reactflow-ui/style.css';
105
114
 
106
- function App() {
115
+ export default function AiApp() {
107
116
  return (
108
- <div style={{ height: '100vh' }}>
109
- <AiWorkflowIDE aiConfig={{ apiKey: 'your-key' }} onSave={(def) => console.log('保存:', def)} />
117
+ <div style={{ height: '100vh', width: '100%' }}>
118
+ <AiWorkflowIDE
119
+ aiConfig={{
120
+ // 生产环境推荐使用后端代理模式,避免暴露模型 API Key
121
+ transport: { mode: 'endpoint', endpoint: '/api/ai/workflow-agent' },
122
+ }}
123
+ draftPersist={{ key: 'my-workflow-ide-draft' }}
124
+ onSave={(def) => console.log('保存:', def)}
125
+ />
110
126
  </div>
111
127
  );
112
128
  }
113
129
  ```
114
130
 
115
- > ⚠️ 生产环境请勿将真实模型密钥直接下发到前端,详见 [集成指南](./INTEGRATION.md) 中 AiWorkflowIDE 章节的安全提示。
131
+ ### 3. 编程式调用 W-LSP 与本地沙箱引擎 (v1.0.0 新增)
116
132
 
117
- 详细集成步骤和 API 参考:**[集成指南 →](./INTEGRATION.md)**
133
+ ```tsx
134
+ import {
135
+ executeLocalSandboxDryRun,
136
+ buildDataFlowGraph,
137
+ getCompletionItems,
138
+ } from '@yiyi_zhang/reactflow-ui';
139
+
140
+ // 1. 0ms 浏览器本地确定性沙箱试跑(支持自定义入参与故障注入)
141
+ const { instance } = executeLocalSandboxDryRun(workflowDef, {
142
+ workflowInput: { orderId: 'ORD-2026', vipLevel: 3 },
143
+ taskOverrides: {
144
+ charge_card: { status: 'FAILED', errorMessage: '模拟支付网关 502 超时' },
145
+ },
146
+ });
147
+
148
+ // 2. 构建工作流全局数据血缘图谱
149
+ const lineageGraph = buildDataFlowGraph(workflowDef);
150
+ ```
118
151
 
119
152
  ---
120
153
 
121
- ## 🛠️ 开发指南
122
-
123
- ### 环境要求
124
- - Node.js >= 18.0.0
125
- - npm 或 yarn
126
-
127
- ### 本地开发
154
+ ## 🛠️ 本地开发与验证
128
155
 
129
156
  ```bash
130
- # 克隆仓库
131
- git clone https://github.com/yiyisf/reactflow-ui.git
132
- cd reactflow-ui
133
-
134
157
  # 安装依赖
135
158
  npm install
136
159
 
137
- # 启动开发服务器(含演示应用)
160
+ # 启动本地开发调试环境(含完整演示工作台)
138
161
  npm run dev
139
- # 访问 http://localhost:5173
140
- ```
141
162
 
142
- ### 构建
163
+ # 运行单元测试(Vitest)
164
+ npm test
143
165
 
144
- ```bash
166
+ # 代码规范检查
167
+ npm run lint
168
+
169
+ # 构建 NPM 发布产物(dist/)
145
170
  npm run build
146
- # 产物生成在 dist/ 目录
147
171
  ```
148
172
 
149
- ### 项目结构
173
+ ---
174
+
175
+ ## 📁 项目结构
150
176
 
151
177
  ```
152
178
  src/
153
- ├── index.ts # 主入口:WorkflowIDE + 共享类型
154
- ├── ai.ts # AI 入口(/ai 子路径):AiWorkflowIDE + AI 配套类型
155
- ├── WorkflowIDE.tsx # 专业编排组件外壳
156
- ├── AiWorkflowIDE.tsx # AI 驱动组件外壳
157
- ├── components/ # UI 核心组件(设计器、属性面板、节点…)
158
- │ ├── nodes/ # 各类型节点组件(TaskNode、DecisionNode、LoopNode…)
159
- │ ├── AICopilot/ # WorkflowIDE 内置 AI 助手面板
160
- │ ├── AiNative/ # AiWorkflowIDE 对话/画布/审查等组件
161
- │ ├── Controls/ # 工具栏、模式切换器
162
- │ ├── WorkflowRunPanel.tsx # P4.2: 执行验证入参面板
163
- │ └── ExecutionSummaryPanel.tsx # P4.3: 执行结果分析面板
164
- ├── services/ai/ # AI 协议适配、工具执行、system prompt 构建
165
- ├── store/ # Zustand 状态管理(workflowStore、aiStore、libraryStore)
166
- ├── parser/ # Conductor JSON ↔ ReactFlow 节点/边转换
167
- ├── layout/ # Dagre 自动布局(含蛇形布局)
168
- ├── types/ # TypeScript 类型定义
169
- ├── styles/ # CSS 变量和执行状态样式
170
- ├── utils/ # 校验器、executionAnalyzer(P4.3 诊断引擎)
171
- └── demo/ # 演示应用(开发调试用)
179
+ ├── index.ts # 主入口:WorkflowIDE + W-LSP + 沙箱引擎导出
180
+ ├── ai.ts # AI 入口(/ai 子路径):AiWorkflowIDE + Agent 工具链导出
181
+ ├── WorkflowIDE.tsx # 专业编排组件外壳
182
+ ├── AiWorkflowIDE.tsx # AI 原生编排组件外壳
183
+ ├── components/
184
+ │ ├── WorkflowDesigner.tsx # 核心画布(集成血缘连线、Shadow Graph、时间旅行)
185
+ │ ├── TaskDetailPanel.tsx # 节点属性抽屉(集成 W-LSP 补全与重构提示)
186
+ │ ├── ExecutionTaskPanel.tsx # 运行态详情抽屉(集成 StructuredJsonViewer)
187
+ │ ├── SandboxConfigModal.tsx # 🧪 沙箱人工模拟数据与故障注入配置台
188
+ │ ├── ExecutionWaterfallPanel.tsx # 📊 并发甘特瀑布流与时间旅行回放面板
189
+ │ ├── JsonPreviewPanel.tsx # { } 双向实时分屏 JSON 编辑器
190
+ │ ├── StructuredJsonViewer.tsx # 树形 JSON 检索与一键复制 JSONPath 组件
191
+ │ ├── nodes/ # 节点渲染层(含 Semantic LOD 三级语义缩放与 Loop 切片器)
192
+ │ ├── Controls/ # 统一毛玻璃胶囊工具栏 ActionBar、ModeSlider、ControlHub
193
+ │ ├── AICopilot/ # W-LSP ParameterSuggester 补全浮层与对话面板
194
+ │ └── AiNative/ # AiCommandCenter、InlineCanvasCopilot (Cmd+K)、MermaidBlock
195
+ ├── services/
196
+ │ ├── wlsp/workflowLsp.ts # W-LSP 工作流语言服务(祖先推导、Schema 推断、血缘、重构)
197
+ │ └── ai/ # 多模型协议适配、Agent 循环、工具注册表、规则引擎
198
+ ├── utils/
199
+ │ ├── localSandboxEngine.ts # 浏览器本地确定性沙箱执行引擎
200
+ │ ├── validator.ts # 静态拓扑与引用校验器
201
+ │ └── executionAnalyzer.ts # 运行态智能故障诊断引擎
202
+ ├── store/ # Zustand 状态管理(workflowStore、aiStore、libraryStore)
203
+ ├── parser/ # Conductor DSL ↔ ReactFlow 节点/边双向解析器
204
+ └── layout/ # Dagre 自动布局与超大流程蛇形布局引擎
172
205
  ```
173
206
 
174
207
  ---
175
208
 
176
- ## 📚 文档资源
209
+ ## 📚 文档导航
177
210
 
178
- - [集成指南 (Integration Guide)](./INTEGRATION.md)
179
- - [最佳实践 (Best Practices)](./docs/best-practices.md)
180
- - [路线图 (Roadmap)](./ROADMAP.md)
181
- - [v0.4.0 发布计划](./docs/v0.4.0-release-plan.md)
211
+ - **[🚀 v1.0.0 产品发布宣传首页 (Product Launch Showcase)](./docs/product-launch-v1.0.0.html)** — 100% 单文件零依赖 HTML,含首屏 Before/After 耗时对比、一行命令极速体验、可拖动双滑块团队 ROI 收益计算器与交互式沙箱演练
212
+ - **[集成指南 (INTEGRATION.md)](./INTEGRATION.md)** — Props 详解、运行态接入、AI 代理配置、W-LSP 与沙箱 API
213
+ - **[版本更新日志 (CHANGELOG.md)](./CHANGELOG.md)** — `v1.0.0` 及历次版本完整变更记录
214
+ - **[发展路线图 (ROADMAP.md)](./ROADMAP.md)** — 演进里程碑与未来规划
215
+ - **[最佳实践 (docs/best-practices.md)](./docs/best-practices.md)** — 常见业务拓扑建模规范
182
216
 
183
217
  ## 📄 许可证
184
218
 
185
219
  MIT
186
-
@@ -16,6 +16,8 @@ import type { CustomValidationRule } from './services/ai/ruleEngine';
16
16
  import type { TaskSchema } from './services/ai/schemaRegistry';
17
17
  import type { AiEvent } from './types/aiEvents';
18
18
  import type { IdeDraft } from './services/ai/draftPersistence';
19
+ import './styles/tokens.css';
20
+ import './styles/executionStyles.css';
19
21
  import './components/AiNative/AiNative.css';
20
22
  export interface AiWorkflowIDEProps {
21
23
  /** 初始工作流定义(编辑态) */
@@ -1,7 +1,7 @@
1
- import React from 'react';
2
1
  import { ThemeMode, ThemeColor, LayoutDirection, ValidationResults, ExecutionActions, ViewMode, WorkflowExecutionInput } from './types/workflow';
3
2
  import { WorkflowDef, WorkflowInstance } from './types/conductor';
4
3
  import { AIServiceConfig } from './services/aiService';
4
+ import { ActionDefinition } from './actions/types';
5
5
  import './styles/tokens.css';
6
6
  import './styles/executionStyles.css';
7
7
  /**
@@ -93,6 +93,18 @@ export interface WorkflowIDEProps {
93
93
  * AI 配置。通过 Props 注入优先于 localStorage 配置。
94
94
  */
95
95
  aiConfig?: Partial<AIServiceConfig>;
96
+ /**
97
+ * UI 体验模式:
98
+ * - `pro` (默认): 专业开发者模式,展示完整 DAG 画布、底层参数、Monaco JSON
99
+ * - `business`: 面向普通使用者的业务模式,提供卡片步骤流、业务动作与数据胶囊
100
+ * @default 'pro'
101
+ */
102
+ uiMode?: 'pro' | 'business';
103
+ /**
104
+ * 自定义扩展的业务动作定义列表。
105
+ * 宿主可传入自定义业务动作(如私有云/特定系统连接器)。
106
+ */
107
+ actions?: ActionDefinition[];
96
108
  /**
97
109
  * 组件容器高度。
98
110
  * @default '100%'
@@ -132,4 +144,4 @@ export interface WorkflowIDEProps {
132
144
  * />
133
145
  * ```
134
146
  */
135
- export declare const WorkflowIDE: React.ForwardRefExoticComponent<WorkflowIDEProps & React.RefAttributes<WorkflowIDERef>>;
147
+ export declare const WorkflowIDE: import("react").ForwardRefExoticComponent<WorkflowIDEProps & import("react").RefAttributes<WorkflowIDERef>>;
@@ -0,0 +1,8 @@
1
+ import type { ActionDefinition } from '../types';
2
+ export declare const notifySendMessageAction: ActionDefinition;
3
+ export declare const humanApprovalAction: ActionDefinition;
4
+ export declare const controlWaitAction: ActionDefinition;
5
+ export declare const controlDecisionAction: ActionDefinition;
6
+ export declare const controlForkAction: ActionDefinition;
7
+ export declare const controlLoopAction: ActionDefinition;
8
+ export declare const BUILTIN_COMMON_ACTIONS: ActionDefinition[];
@@ -0,0 +1,12 @@
1
+ import type { ActionDefinition } from '../types';
2
+ export declare const ecsCreateInstanceAction: ActionDefinition;
3
+ export declare const ecsQueryInstanceAction: ActionDefinition;
4
+ export declare const ecsStartInstanceAction: ActionDefinition;
5
+ export declare const ecsStopInstanceAction: ActionDefinition;
6
+ export declare const ecsRestartInstanceAction: ActionDefinition;
7
+ export declare const ecsModifySpecAction: ActionDefinition;
8
+ export declare const ecsCreateSnapshotAction: ActionDefinition;
9
+ export declare const ecsRunCommandAction: ActionDefinition;
10
+ export declare const ecsGetMonitorMetricsAction: ActionDefinition;
11
+ export declare const ecsReleaseInstanceAction: ActionDefinition;
12
+ export declare const BUILTIN_ECS_ACTIONS: ActionDefinition[];
@@ -0,0 +1,23 @@
1
+ import type { ActionDefinition, ActionCategory } from './types';
2
+ import type { TaskDef } from '../types/conductor';
3
+ export declare class ActionRegistry {
4
+ private actions;
5
+ constructor(initialActions?: ActionDefinition[]);
6
+ register(action: ActionDefinition): void;
7
+ registerAll(actions: ActionDefinition[]): void;
8
+ getAction(id: string): ActionDefinition | undefined;
9
+ getAllActions(): ActionDefinition[];
10
+ getActionsByCategory(category?: ActionCategory): ActionDefinition[];
11
+ /**
12
+ * Given a Conductor TaskDef, attempt to find a matching ActionDefinition
13
+ * and decompile it into friendly form values.
14
+ */
15
+ findActionForTask(task: TaskDef): {
16
+ action: ActionDefinition;
17
+ values: Record<string, any>;
18
+ } | null;
19
+ }
20
+ /**
21
+ * Global default ActionRegistry pre-populated with Cloud Host (ECS) and Common actions
22
+ */
23
+ export declare const defaultActionRegistry: ActionRegistry;
@@ -0,0 +1,45 @@
1
+ import type { TaskDef } from '../types/conductor';
2
+ export type ActionCategory = 'compute' | 'storage' | 'network' | 'monitor' | 'notify' | 'logic' | 'human' | 'custom';
3
+ export type ActionFieldType = 'text' | 'textarea' | 'number' | 'select' | 'boolean' | 'account' | 'cron-friendly';
4
+ export interface ActionFieldOption {
5
+ label: string;
6
+ value: any;
7
+ description?: string;
8
+ }
9
+ export interface ActionField {
10
+ key: string;
11
+ label: string;
12
+ type: ActionFieldType;
13
+ help?: string;
14
+ placeholder?: string;
15
+ required?: boolean;
16
+ defaultValue?: any;
17
+ options?: ActionFieldOption[];
18
+ acceptsPills?: boolean;
19
+ }
20
+ export interface ActionOutputField {
21
+ key: string;
22
+ label: string;
23
+ type: 'string' | 'number' | 'boolean' | 'object' | 'array';
24
+ example?: any;
25
+ description?: string;
26
+ }
27
+ export interface CompileCtx {
28
+ taskReferenceName: string;
29
+ stepIndex: number;
30
+ workflowName?: string;
31
+ }
32
+ export interface ActionDefinition {
33
+ id: string;
34
+ name: string;
35
+ category: ActionCategory;
36
+ icon: string;
37
+ description: string;
38
+ connector?: string;
39
+ riskLevel: 'safe' | 'sensitive';
40
+ fields: ActionField[];
41
+ outputs: ActionOutputField[];
42
+ compile: (values: Record<string, any>, ctx: CompileCtx) => TaskDef;
43
+ decompile?: (task: TaskDef) => Record<string, any> | null;
44
+ mockOutput?: (values: Record<string, any>) => Record<string, any>;
45
+ }
package/dist/ai.d.ts CHANGED
@@ -27,4 +27,8 @@ export { applyPartialProposal, describeDiff, computeDiff } from './services/ai/t
27
27
  export type { AiMetrics } from './store/aiStore';
28
28
  export type { WorkflowDef, TaskDef, WorkflowInputParam, WorkflowInstance } from './types/conductor';
29
29
  export { parseWorkflowInputParams } from './types/conductor';
30
- export type { ExecutionActions, ThemeMode, ThemeColor, LayoutDirection, ViewMode, TaskExecutionData } from './types/workflow';
30
+ export type { ExecutionActions, ThemeMode, ThemeColor, LayoutDirection, ViewMode, TaskExecutionData, WorkflowExecutionInput } from './types/workflow';
31
+ export { getCompletionItems, buildDataFlowGraph, refactorTaskReferenceName, getUpstreamAncestors, inferTaskOutputSchema, } from './services/wlsp/workflowLsp';
32
+ export type { WlspCompletionItem, DataFlowGraph, DataFlowEdge, InferredField, UpstreamTaskInfo, } from './services/wlsp/workflowLsp';
33
+ export { executeLocalSandboxDryRun, buildDefaultWorkflowMockInput, generateDefaultTaskOutputPreview, } from './utils/localSandboxEngine';
34
+ export type { SandboxDryRunOptions, TaskMockOverride, } from './utils/localSandboxEngine';
@@ -1,16 +1,25 @@
1
1
  import React from 'react';
2
2
  import './ParameterSuggester.css';
3
+ import { WlspCompletionItem, ValueType } from '../../services/wlsp/workflowLsp';
3
4
  export interface Suggestion {
4
5
  label: string;
5
6
  value: string;
6
7
  description: string;
8
+ category?: 'upstream' | 'workflow_input' | 'variable' | 'system' | 'ai';
9
+ valueType?: ValueType;
10
+ sourceLabel?: string;
11
+ sampleValue?: string;
12
+ isConditional?: boolean;
7
13
  }
8
14
  interface ParameterSuggesterProps {
9
15
  isOpen: boolean;
10
16
  onClose: () => void;
11
17
  onSelect: (value: string) => void;
12
18
  suggestions: Suggestion[];
19
+ wlspItems?: WlspCompletionItem[];
13
20
  anchorRect?: DOMRect;
21
+ onRequestAiHint?: () => void;
22
+ aiLoading?: boolean;
14
23
  }
15
24
  declare const ParameterSuggester: React.FC<ParameterSuggesterProps>;
16
25
  export default ParameterSuggester;
@@ -1,18 +1,23 @@
1
1
  /**
2
- * AgentTimeline — visible work-in-progress log for the current agent turn (M2.2)
2
+ * AgentTimeline — visible work-in-progress log for the current agent turn (M2.2 + PI Durable 4-Phase Stepper)
3
3
  *
4
- * Replaces the single toolStatus line with a growing list of completed steps
5
- * ("✓ 已搜索工作流库", "⚠ 发现 2 处校验问题,正在自动修正…") plus the current
6
- * in-flight step as a spinner row. Self-heal retries log their own entry instead
7
- * of silently redoing the request, so users see the AI catch and fix its own
8
- * mistakes rather than experiencing an unexplained pause.
4
+ * Replaces the single toolStatus line with:
5
+ * 1. A 4-Phase Synthesis Progress Bar ("① 蓝图定义 → ② 拓扑编排 → ③ 参数与数据流 → ④ 整体校验") when progressive synthesis is active
6
+ * 2. A growing list of completed steps ("✓ 已搜索工作流库", "✓ 阶段 2/4:已编排 5 个任务拓扑骨架")
7
+ * 3. The current in-flight step as a spinner row
9
8
  */
10
9
  import React from 'react';
11
10
  import type { TimelineEntry } from '../../store/aiStore';
11
+ import type { SynthesisPhase } from '../../services/ai/workflowSynthesizer';
12
+ import type { WorkflowDef } from '../../types/conductor';
12
13
  interface AgentTimelineProps {
13
14
  entries: TimelineEntry[];
14
15
  /** Current in-flight step label, or '' when nothing is actively running */
15
16
  activeLabel: string;
17
+ /** Optional current 4-phase synthesis stage */
18
+ synthesisPhase?: SynthesisPhase;
19
+ /** Optional in-progress working draft */
20
+ workingDraft?: WorkflowDef | null;
16
21
  }
17
22
  declare const AgentTimeline: React.FC<AgentTimelineProps>;
18
23
  export default AgentTimeline;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { AIServiceConfig } from '../../services/aiService';
3
+ interface InlineCanvasCopilotProps {
4
+ aiConfig?: Partial<AIServiceConfig>;
5
+ }
6
+ export declare const InlineCanvasCopilot: React.FC<InlineCanvasCopilotProps>;
7
+ export default InlineCanvasCopilot;
@@ -1,11 +1,11 @@
1
1
  /**
2
- * ProposalPreviewCard — business step preview for AI proposals (UX Phase A / M2.2)
2
+ * ProposalPreviewCard — business step preview for AI proposals (UX Phase A / M2.2 + Semantic Verification Badge)
3
3
  *
4
4
  * Replaces the old "+N 新增 ~N 修改" number-chip summary with an actual preview of
5
5
  * what the workflow will look like: every step in business language, added steps
6
6
  * highlighted green, modified steps yellow with a one-line change description,
7
- * removed steps struck through in place. The goal is that a non-technical user can
8
- * tell what changed in ~10 seconds without opening the canvas.
7
+ * removed steps struck through in place, plus a holistic semantic & data-flow
8
+ * verification badge.
9
9
  */
10
10
  import React from 'react';
11
11
  import type { ProposedChange } from '../../store/aiStore';
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ interface BrandLogoProps {
3
+ size?: number;
4
+ className?: string;
5
+ style?: React.CSSProperties;
6
+ }
7
+ /**
8
+ * Conductor Workflow IDE 极简几何品牌 Logo
9
+ *
10
+ * 设计语言:深空圆角矩形底座 + 贝塞尔双分支编排流向 + 三色确定性拓扑节点(靛紫起点 → 青蓝分支 / 翠绿沙箱通过节点)
11
+ */
12
+ export declare const BrandLogo: React.FC<BrandLogoProps>;
13
+ export default BrandLogo;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare const ExecutionWaterfallPanel: React.FC;
3
+ export default ExecutionWaterfallPanel;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ interface SandboxConfigModalProps {
3
+ isOpen: boolean;
4
+ onClose: () => void;
5
+ }
6
+ export declare const SandboxConfigModal: React.FC<SandboxConfigModalProps>;
7
+ export default SandboxConfigModal;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ interface StructuredJsonViewerProps {
3
+ data: any;
4
+ /** Optional taskReferenceName to generate `${taskRef.output.xxx}` expressions on hover */
5
+ taskReferenceName?: string;
6
+ /** Either 'output' or 'input' (or 'workflow.input') for expression path generation */
7
+ expressionScope?: 'output' | 'input' | 'workflow.input';
8
+ maxHeight?: string;
9
+ }
10
+ export declare const StructuredJsonViewer: React.FC<StructuredJsonViewerProps>;
11
+ export default StructuredJsonViewer;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import type { BusinessStep } from '../../stepmodel/types';
3
+ import { ActionRegistry } from '../../actions/registry';
4
+ export interface ActionFormProps {
5
+ step: BusinessStep;
6
+ upstreamSteps: BusinessStep[];
7
+ workflowInputParams?: any[];
8
+ registry?: ActionRegistry;
9
+ onChange: (updatedStep: BusinessStep) => void;
10
+ disabled?: boolean;
11
+ }
12
+ export declare const ActionForm: React.FC<ActionFormProps>;