@flowdrop/flowdrop 1.0.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 (403) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +252 -0
  3. package/dist/adapters/WorkflowAdapter.d.ts +167 -0
  4. package/dist/adapters/WorkflowAdapter.js +368 -0
  5. package/dist/adapters/agentspec/AgentSpecAdapter.d.ts +96 -0
  6. package/dist/adapters/agentspec/AgentSpecAdapter.js +626 -0
  7. package/dist/adapters/agentspec/agentAdapter.d.ts +59 -0
  8. package/dist/adapters/agentspec/agentAdapter.js +91 -0
  9. package/dist/adapters/agentspec/autoLayout.d.ts +34 -0
  10. package/dist/adapters/agentspec/autoLayout.js +127 -0
  11. package/dist/adapters/agentspec/componentTypeDefaults.d.ts +73 -0
  12. package/dist/adapters/agentspec/componentTypeDefaults.js +238 -0
  13. package/dist/adapters/agentspec/defaultNodeTypes.d.ts +53 -0
  14. package/dist/adapters/agentspec/defaultNodeTypes.js +561 -0
  15. package/dist/adapters/agentspec/index.d.ts +37 -0
  16. package/dist/adapters/agentspec/index.js +39 -0
  17. package/dist/adapters/agentspec/validator.d.ts +34 -0
  18. package/dist/adapters/agentspec/validator.js +169 -0
  19. package/dist/api/enhanced-client.d.ts +183 -0
  20. package/dist/api/enhanced-client.js +430 -0
  21. package/dist/components/App.svelte +981 -0
  22. package/dist/components/App.svelte.d.ts +54 -0
  23. package/dist/components/CanvasBanner.stories.svelte +29 -0
  24. package/dist/components/CanvasBanner.stories.svelte.d.ts +27 -0
  25. package/dist/components/CanvasBanner.svelte +57 -0
  26. package/dist/components/CanvasBanner.svelte.d.ts +8 -0
  27. package/dist/components/ConfigForm.svelte +1138 -0
  28. package/dist/components/ConfigForm.svelte.d.ts +44 -0
  29. package/dist/components/ConfigModal.svelte +188 -0
  30. package/dist/components/ConfigModal.svelte.d.ts +13 -0
  31. package/dist/components/ConfigPanel.stories.svelte +47 -0
  32. package/dist/components/ConfigPanel.stories.svelte.d.ts +27 -0
  33. package/dist/components/ConfigPanel.svelte +182 -0
  34. package/dist/components/ConfigPanel.svelte.d.ts +32 -0
  35. package/dist/components/ConnectionLine.svelte +32 -0
  36. package/dist/components/ConnectionLine.svelte.d.ts +3 -0
  37. package/dist/components/EdgeRefresher.svelte +41 -0
  38. package/dist/components/EdgeRefresher.svelte.d.ts +9 -0
  39. package/dist/components/FlowDropZone.svelte +83 -0
  40. package/dist/components/FlowDropZone.svelte.d.ts +13 -0
  41. package/dist/components/LoadingSpinner.stories.svelte +30 -0
  42. package/dist/components/LoadingSpinner.stories.svelte.d.ts +27 -0
  43. package/dist/components/LoadingSpinner.svelte +36 -0
  44. package/dist/components/LoadingSpinner.svelte.d.ts +8 -0
  45. package/dist/components/Logo.stories.svelte +22 -0
  46. package/dist/components/Logo.stories.svelte.d.ts +27 -0
  47. package/dist/components/Logo.svelte +102 -0
  48. package/dist/components/Logo.svelte.d.ts +26 -0
  49. package/dist/components/LogsSidebar.svelte +563 -0
  50. package/dist/components/LogsSidebar.svelte.d.ts +17 -0
  51. package/dist/components/MarkdownDisplay.stories.svelte +36 -0
  52. package/dist/components/MarkdownDisplay.stories.svelte.d.ts +27 -0
  53. package/dist/components/MarkdownDisplay.svelte +29 -0
  54. package/dist/components/MarkdownDisplay.svelte.d.ts +7 -0
  55. package/dist/components/Navbar.stories.svelte +53 -0
  56. package/dist/components/Navbar.stories.svelte.d.ts +27 -0
  57. package/dist/components/Navbar.svelte +726 -0
  58. package/dist/components/Navbar.svelte.d.ts +29 -0
  59. package/dist/components/NodeSidebar.svelte +762 -0
  60. package/dist/components/NodeSidebar.svelte.d.ts +9 -0
  61. package/dist/components/NodeStatusOverlay.stories.svelte +85 -0
  62. package/dist/components/NodeStatusOverlay.stories.svelte.d.ts +27 -0
  63. package/dist/components/NodeStatusOverlay.svelte +327 -0
  64. package/dist/components/NodeStatusOverlay.svelte.d.ts +11 -0
  65. package/dist/components/PipelineStatus.svelte +314 -0
  66. package/dist/components/PipelineStatus.svelte.d.ts +20 -0
  67. package/dist/components/PortCoordinateTracker.svelte +58 -0
  68. package/dist/components/PortCoordinateTracker.svelte.d.ts +12 -0
  69. package/dist/components/ReadOnlyDetails.svelte +170 -0
  70. package/dist/components/ReadOnlyDetails.svelte.d.ts +25 -0
  71. package/dist/components/SchemaForm.stories.svelte +116 -0
  72. package/dist/components/SchemaForm.stories.svelte.d.ts +27 -0
  73. package/dist/components/SchemaForm.svelte +536 -0
  74. package/dist/components/SchemaForm.svelte.d.ts +83 -0
  75. package/dist/components/SettingsModal.svelte +279 -0
  76. package/dist/components/SettingsModal.svelte.d.ts +23 -0
  77. package/dist/components/SettingsPanel.svelte +638 -0
  78. package/dist/components/SettingsPanel.svelte.d.ts +21 -0
  79. package/dist/components/StatusIcon.stories.svelte +60 -0
  80. package/dist/components/StatusIcon.stories.svelte.d.ts +27 -0
  81. package/dist/components/StatusIcon.svelte +119 -0
  82. package/dist/components/StatusIcon.svelte.d.ts +10 -0
  83. package/dist/components/StatusLabel.stories.svelte +17 -0
  84. package/dist/components/StatusLabel.stories.svelte.d.ts +27 -0
  85. package/dist/components/StatusLabel.svelte +33 -0
  86. package/dist/components/StatusLabel.svelte.d.ts +7 -0
  87. package/dist/components/ThemeToggle.stories.svelte +25 -0
  88. package/dist/components/ThemeToggle.stories.svelte.d.ts +27 -0
  89. package/dist/components/ThemeToggle.svelte +185 -0
  90. package/dist/components/ThemeToggle.svelte.d.ts +14 -0
  91. package/dist/components/UniversalNode.svelte +155 -0
  92. package/dist/components/UniversalNode.svelte.d.ts +15 -0
  93. package/dist/components/WorkflowEditor.svelte +1035 -0
  94. package/dist/components/WorkflowEditor.svelte.d.ts +23 -0
  95. package/dist/components/form/FormArray.svelte +1049 -0
  96. package/dist/components/form/FormArray.svelte.d.ts +22 -0
  97. package/dist/components/form/FormAutocomplete.svelte +1009 -0
  98. package/dist/components/form/FormAutocomplete.svelte.d.ts +25 -0
  99. package/dist/components/form/FormCheckboxGroup.stories.svelte +28 -0
  100. package/dist/components/form/FormCheckboxGroup.stories.svelte.d.ts +27 -0
  101. package/dist/components/form/FormCheckboxGroup.svelte +155 -0
  102. package/dist/components/form/FormCheckboxGroup.svelte.d.ts +17 -0
  103. package/dist/components/form/FormCodeEditor.svelte +458 -0
  104. package/dist/components/form/FormCodeEditor.svelte.d.ts +25 -0
  105. package/dist/components/form/FormField.svelte +417 -0
  106. package/dist/components/form/FormField.svelte.d.ts +29 -0
  107. package/dist/components/form/FormFieldLight.svelte +425 -0
  108. package/dist/components/form/FormFieldLight.svelte.d.ts +18 -0
  109. package/dist/components/form/FormFieldWrapper.stories.svelte +53 -0
  110. package/dist/components/form/FormFieldWrapper.stories.svelte.d.ts +27 -0
  111. package/dist/components/form/FormFieldWrapper.svelte +125 -0
  112. package/dist/components/form/FormFieldWrapper.svelte.d.ts +18 -0
  113. package/dist/components/form/FormFieldset.svelte +142 -0
  114. package/dist/components/form/FormFieldset.svelte.d.ts +11 -0
  115. package/dist/components/form/FormMarkdownEditor.svelte +752 -0
  116. package/dist/components/form/FormMarkdownEditor.svelte.d.ts +33 -0
  117. package/dist/components/form/FormNumberField.stories.svelte +36 -0
  118. package/dist/components/form/FormNumberField.stories.svelte.d.ts +27 -0
  119. package/dist/components/form/FormNumberField.svelte +112 -0
  120. package/dist/components/form/FormNumberField.svelte.d.ts +25 -0
  121. package/dist/components/form/FormRangeField.stories.svelte +31 -0
  122. package/dist/components/form/FormRangeField.stories.svelte.d.ts +27 -0
  123. package/dist/components/form/FormRangeField.svelte +246 -0
  124. package/dist/components/form/FormRangeField.svelte.d.ts +23 -0
  125. package/dist/components/form/FormSelect.stories.svelte +50 -0
  126. package/dist/components/form/FormSelect.stories.svelte.d.ts +27 -0
  127. package/dist/components/form/FormSelect.svelte +129 -0
  128. package/dist/components/form/FormSelect.svelte.d.ts +20 -0
  129. package/dist/components/form/FormTemplateEditor.svelte +825 -0
  130. package/dist/components/form/FormTemplateEditor.svelte.d.ts +41 -0
  131. package/dist/components/form/FormTextField.stories.svelte +30 -0
  132. package/dist/components/form/FormTextField.stories.svelte.d.ts +27 -0
  133. package/dist/components/form/FormTextField.svelte +91 -0
  134. package/dist/components/form/FormTextField.svelte.d.ts +19 -0
  135. package/dist/components/form/FormTextarea.stories.svelte +34 -0
  136. package/dist/components/form/FormTextarea.stories.svelte.d.ts +27 -0
  137. package/dist/components/form/FormTextarea.svelte +97 -0
  138. package/dist/components/form/FormTextarea.svelte.d.ts +21 -0
  139. package/dist/components/form/FormToggle.stories.svelte +30 -0
  140. package/dist/components/form/FormToggle.stories.svelte.d.ts +27 -0
  141. package/dist/components/form/FormToggle.svelte +126 -0
  142. package/dist/components/form/FormToggle.svelte.d.ts +19 -0
  143. package/dist/components/form/FormUISchemaRenderer.svelte +136 -0
  144. package/dist/components/form/FormUISchemaRenderer.svelte.d.ts +32 -0
  145. package/dist/components/form/index.d.ts +50 -0
  146. package/dist/components/form/index.js +54 -0
  147. package/dist/components/form/templateAutocomplete.d.ts +29 -0
  148. package/dist/components/form/templateAutocomplete.js +254 -0
  149. package/dist/components/form/types.d.ts +485 -0
  150. package/dist/components/form/types.js +73 -0
  151. package/dist/components/interrupt/ChoicePrompt.stories.svelte +52 -0
  152. package/dist/components/interrupt/ChoicePrompt.stories.svelte.d.ts +27 -0
  153. package/dist/components/interrupt/ChoicePrompt.svelte +401 -0
  154. package/dist/components/interrupt/ChoicePrompt.svelte.d.ts +23 -0
  155. package/dist/components/interrupt/ConfirmationPrompt.stories.svelte +71 -0
  156. package/dist/components/interrupt/ConfirmationPrompt.stories.svelte.d.ts +27 -0
  157. package/dist/components/interrupt/ConfirmationPrompt.svelte +292 -0
  158. package/dist/components/interrupt/ConfirmationPrompt.svelte.d.ts +25 -0
  159. package/dist/components/interrupt/FormPrompt.svelte +236 -0
  160. package/dist/components/interrupt/FormPrompt.svelte.d.ts +23 -0
  161. package/dist/components/interrupt/InterruptBubble.svelte +601 -0
  162. package/dist/components/interrupt/InterruptBubble.svelte.d.ts +16 -0
  163. package/dist/components/interrupt/ReviewPrompt.stories.svelte +67 -0
  164. package/dist/components/interrupt/ReviewPrompt.stories.svelte.d.ts +27 -0
  165. package/dist/components/interrupt/ReviewPrompt.svelte +861 -0
  166. package/dist/components/interrupt/ReviewPrompt.svelte.d.ts +23 -0
  167. package/dist/components/interrupt/TextInputPrompt.stories.svelte +47 -0
  168. package/dist/components/interrupt/TextInputPrompt.stories.svelte.d.ts +27 -0
  169. package/dist/components/interrupt/TextInputPrompt.svelte +346 -0
  170. package/dist/components/interrupt/TextInputPrompt.svelte.d.ts +23 -0
  171. package/dist/components/interrupt/index.d.ts +13 -0
  172. package/dist/components/interrupt/index.js +15 -0
  173. package/dist/components/layouts/MainLayout.svelte +718 -0
  174. package/dist/components/layouts/MainLayout.svelte.d.ts +62 -0
  175. package/dist/components/nodes/GatewayNode.stories.svelte +108 -0
  176. package/dist/components/nodes/GatewayNode.stories.svelte.d.ts +26 -0
  177. package/dist/components/nodes/GatewayNode.svelte +591 -0
  178. package/dist/components/nodes/GatewayNode.svelte.d.ts +15 -0
  179. package/dist/components/nodes/IdeaNode.stories.svelte +52 -0
  180. package/dist/components/nodes/IdeaNode.stories.svelte.d.ts +26 -0
  181. package/dist/components/nodes/IdeaNode.svelte +455 -0
  182. package/dist/components/nodes/IdeaNode.svelte.d.ts +24 -0
  183. package/dist/components/nodes/NotesNode.stories.svelte +76 -0
  184. package/dist/components/nodes/NotesNode.stories.svelte.d.ts +26 -0
  185. package/dist/components/nodes/NotesNode.svelte +378 -0
  186. package/dist/components/nodes/NotesNode.svelte.d.ts +24 -0
  187. package/dist/components/nodes/SimpleNode.stories.svelte +159 -0
  188. package/dist/components/nodes/SimpleNode.stories.svelte.d.ts +26 -0
  189. package/dist/components/nodes/SimpleNode.svelte +451 -0
  190. package/dist/components/nodes/SimpleNode.svelte.d.ts +25 -0
  191. package/dist/components/nodes/SquareNode.stories.svelte +82 -0
  192. package/dist/components/nodes/SquareNode.stories.svelte.d.ts +26 -0
  193. package/dist/components/nodes/SquareNode.svelte +407 -0
  194. package/dist/components/nodes/SquareNode.svelte.d.ts +25 -0
  195. package/dist/components/nodes/TerminalNode.stories.svelte +25 -0
  196. package/dist/components/nodes/TerminalNode.stories.svelte.d.ts +26 -0
  197. package/dist/components/nodes/TerminalNode.svelte +690 -0
  198. package/dist/components/nodes/TerminalNode.svelte.d.ts +25 -0
  199. package/dist/components/nodes/ToolNode.stories.svelte +189 -0
  200. package/dist/components/nodes/ToolNode.stories.svelte.d.ts +26 -0
  201. package/dist/components/nodes/ToolNode.svelte +471 -0
  202. package/dist/components/nodes/ToolNode.svelte.d.ts +36 -0
  203. package/dist/components/nodes/WorkflowNode.stories.svelte +55 -0
  204. package/dist/components/nodes/WorkflowNode.stories.svelte.d.ts +26 -0
  205. package/dist/components/nodes/WorkflowNode.svelte +571 -0
  206. package/dist/components/nodes/WorkflowNode.svelte.d.ts +15 -0
  207. package/dist/components/playground/ChatPanel.svelte +905 -0
  208. package/dist/components/playground/ChatPanel.svelte.d.ts +46 -0
  209. package/dist/components/playground/ExecutionLogs.svelte +488 -0
  210. package/dist/components/playground/ExecutionLogs.svelte.d.ts +14 -0
  211. package/dist/components/playground/InputCollector.svelte +444 -0
  212. package/dist/components/playground/InputCollector.svelte.d.ts +16 -0
  213. package/dist/components/playground/MessageBubble.stories.svelte +62 -0
  214. package/dist/components/playground/MessageBubble.stories.svelte.d.ts +27 -0
  215. package/dist/components/playground/MessageBubble.svelte +633 -0
  216. package/dist/components/playground/MessageBubble.svelte.d.ts +24 -0
  217. package/dist/components/playground/Playground.svelte +1075 -0
  218. package/dist/components/playground/Playground.svelte.d.ts +25 -0
  219. package/dist/components/playground/PlaygroundModal.svelte +220 -0
  220. package/dist/components/playground/PlaygroundModal.svelte.d.ts +25 -0
  221. package/dist/components/playground/SessionManager.svelte +538 -0
  222. package/dist/components/playground/SessionManager.svelte.d.ts +20 -0
  223. package/dist/config/agentSpecEndpoints.d.ts +70 -0
  224. package/dist/config/agentSpecEndpoints.js +65 -0
  225. package/dist/config/constants.d.ts +43 -0
  226. package/dist/config/constants.js +31 -0
  227. package/dist/config/defaultCategories.d.ts +7 -0
  228. package/dist/config/defaultCategories.js +126 -0
  229. package/dist/config/defaultPortConfig.d.ts +6 -0
  230. package/dist/config/defaultPortConfig.js +201 -0
  231. package/dist/config/endpoints.d.ts +160 -0
  232. package/dist/config/endpoints.js +146 -0
  233. package/dist/config/runtimeConfig.d.ts +47 -0
  234. package/dist/config/runtimeConfig.js +80 -0
  235. package/dist/core/index.d.ts +75 -0
  236. package/dist/core/index.js +92 -0
  237. package/dist/display/index.d.ts +29 -0
  238. package/dist/display/index.js +36 -0
  239. package/dist/editor/index.d.ts +95 -0
  240. package/dist/editor/index.js +138 -0
  241. package/dist/form/code.d.ts +101 -0
  242. package/dist/form/code.js +168 -0
  243. package/dist/form/fieldRegistry.d.ts +169 -0
  244. package/dist/form/fieldRegistry.js +152 -0
  245. package/dist/form/full.d.ts +56 -0
  246. package/dist/form/full.js +80 -0
  247. package/dist/form/index.d.ts +77 -0
  248. package/dist/form/index.js +91 -0
  249. package/dist/form/markdown.d.ts +69 -0
  250. package/dist/form/markdown.js +103 -0
  251. package/dist/helpers/nodeLayoutHelper.d.ts +14 -0
  252. package/dist/helpers/nodeLayoutHelper.js +19 -0
  253. package/dist/helpers/proximityConnect.d.ts +94 -0
  254. package/dist/helpers/proximityConnect.js +314 -0
  255. package/dist/helpers/workflowEditorHelper.d.ts +183 -0
  256. package/dist/helpers/workflowEditorHelper.js +595 -0
  257. package/dist/index.d.ts +37 -0
  258. package/dist/index.js +64 -0
  259. package/dist/mocks/app-environment.d.ts +8 -0
  260. package/dist/mocks/app-environment.js +16 -0
  261. package/dist/mocks/app-forms.d.ts +2 -0
  262. package/dist/mocks/app-forms.js +22 -0
  263. package/dist/mocks/app-navigation.d.ts +5 -0
  264. package/dist/mocks/app-navigation.js +36 -0
  265. package/dist/mocks/app-stores.d.ts +14 -0
  266. package/dist/mocks/app-stores.js +26 -0
  267. package/dist/playground/index.d.ts +131 -0
  268. package/dist/playground/index.js +172 -0
  269. package/dist/playground/mount.d.ts +203 -0
  270. package/dist/playground/mount.js +235 -0
  271. package/dist/registry/BaseRegistry.d.ts +92 -0
  272. package/dist/registry/BaseRegistry.js +124 -0
  273. package/dist/registry/builtinFormats.d.ts +23 -0
  274. package/dist/registry/builtinFormats.js +70 -0
  275. package/dist/registry/builtinNodes.d.ts +77 -0
  276. package/dist/registry/builtinNodes.js +211 -0
  277. package/dist/registry/index.d.ts +8 -0
  278. package/dist/registry/index.js +12 -0
  279. package/dist/registry/nodeComponentRegistry.d.ts +276 -0
  280. package/dist/registry/nodeComponentRegistry.js +262 -0
  281. package/dist/registry/plugin.d.ts +215 -0
  282. package/dist/registry/plugin.js +249 -0
  283. package/dist/registry/workflowFormatRegistry.d.ts +122 -0
  284. package/dist/registry/workflowFormatRegistry.js +96 -0
  285. package/dist/schema/index.d.ts +23 -0
  286. package/dist/schema/index.js +23 -0
  287. package/dist/schemas/v1/workflow.schema.json +1078 -0
  288. package/dist/services/agentSpecExecutionService.d.ts +106 -0
  289. package/dist/services/agentSpecExecutionService.js +334 -0
  290. package/dist/services/api.d.ts +115 -0
  291. package/dist/services/api.js +214 -0
  292. package/dist/services/apiVariableService.d.ts +114 -0
  293. package/dist/services/apiVariableService.js +338 -0
  294. package/dist/services/autoSaveService.d.ts +112 -0
  295. package/dist/services/autoSaveService.js +227 -0
  296. package/dist/services/categoriesApi.d.ts +14 -0
  297. package/dist/services/categoriesApi.js +49 -0
  298. package/dist/services/draftStorage.d.ts +171 -0
  299. package/dist/services/draftStorage.js +299 -0
  300. package/dist/services/dynamicSchemaService.d.ts +108 -0
  301. package/dist/services/dynamicSchemaService.js +444 -0
  302. package/dist/services/globalSave.d.ts +69 -0
  303. package/dist/services/globalSave.js +248 -0
  304. package/dist/services/historyService.d.ts +208 -0
  305. package/dist/services/historyService.js +321 -0
  306. package/dist/services/interruptService.d.ts +133 -0
  307. package/dist/services/interruptService.js +280 -0
  308. package/dist/services/nodeExecutionService.d.ts +63 -0
  309. package/dist/services/nodeExecutionService.js +266 -0
  310. package/dist/services/playgroundService.d.ts +130 -0
  311. package/dist/services/playgroundService.js +321 -0
  312. package/dist/services/portConfigApi.d.ts +14 -0
  313. package/dist/services/portConfigApi.js +54 -0
  314. package/dist/services/settingsService.d.ts +92 -0
  315. package/dist/services/settingsService.js +196 -0
  316. package/dist/services/toastService.d.ts +156 -0
  317. package/dist/services/toastService.js +265 -0
  318. package/dist/services/variableService.d.ts +141 -0
  319. package/dist/services/variableService.js +463 -0
  320. package/dist/services/workflowStorage.d.ts +37 -0
  321. package/dist/services/workflowStorage.js +116 -0
  322. package/dist/settings/index.d.ts +25 -0
  323. package/dist/settings/index.js +33 -0
  324. package/dist/stores/categoriesStore.svelte.d.ts +32 -0
  325. package/dist/stores/categoriesStore.svelte.js +77 -0
  326. package/dist/stores/editorStateMachine.svelte.d.ts +42 -0
  327. package/dist/stores/editorStateMachine.svelte.js +132 -0
  328. package/dist/stores/historyStore.svelte.d.ts +136 -0
  329. package/dist/stores/historyStore.svelte.js +207 -0
  330. package/dist/stores/interruptStore.svelte.d.ts +179 -0
  331. package/dist/stores/interruptStore.svelte.js +346 -0
  332. package/dist/stores/playgroundStore.svelte.d.ts +230 -0
  333. package/dist/stores/playgroundStore.svelte.js +515 -0
  334. package/dist/stores/portCoordinateStore.svelte.d.ts +66 -0
  335. package/dist/stores/portCoordinateStore.svelte.js +186 -0
  336. package/dist/stores/settingsStore.svelte.d.ts +158 -0
  337. package/dist/stores/settingsStore.svelte.js +544 -0
  338. package/dist/stores/workflowStore.svelte.d.ts +260 -0
  339. package/dist/stores/workflowStore.svelte.js +649 -0
  340. package/dist/stories/CanvasDecorator.svelte +49 -0
  341. package/dist/stories/CanvasDecorator.svelte.d.ts +8 -0
  342. package/dist/stories/NodeDecorator.svelte +73 -0
  343. package/dist/stories/NodeDecorator.svelte.d.ts +8 -0
  344. package/dist/stories/utils.d.ts +93 -0
  345. package/dist/stories/utils.js +122 -0
  346. package/dist/styles/base.css +1300 -0
  347. package/dist/styles/toast.css +35 -0
  348. package/dist/styles/tokens.css +475 -0
  349. package/dist/svelte-app.d.ts +150 -0
  350. package/dist/svelte-app.js +295 -0
  351. package/dist/types/agentspec.d.ts +318 -0
  352. package/dist/types/agentspec.js +48 -0
  353. package/dist/types/auth.d.ts +263 -0
  354. package/dist/types/auth.js +229 -0
  355. package/dist/types/config.d.ts +151 -0
  356. package/dist/types/config.js +7 -0
  357. package/dist/types/events.d.ts +190 -0
  358. package/dist/types/events.js +30 -0
  359. package/dist/types/index.d.ts +1234 -0
  360. package/dist/types/index.js +27 -0
  361. package/dist/types/interrupt.d.ts +390 -0
  362. package/dist/types/interrupt.js +145 -0
  363. package/dist/types/interruptState.d.ts +211 -0
  364. package/dist/types/interruptState.js +308 -0
  365. package/dist/types/playground.d.ts +351 -0
  366. package/dist/types/playground.js +95 -0
  367. package/dist/types/settings.d.ts +189 -0
  368. package/dist/types/settings.js +97 -0
  369. package/dist/types/uischema.d.ts +144 -0
  370. package/dist/types/uischema.js +51 -0
  371. package/dist/utils/colors.d.ts +288 -0
  372. package/dist/utils/colors.js +548 -0
  373. package/dist/utils/config.d.ts +37 -0
  374. package/dist/utils/config.js +226 -0
  375. package/dist/utils/connections.d.ts +125 -0
  376. package/dist/utils/connections.js +414 -0
  377. package/dist/utils/errors.d.ts +28 -0
  378. package/dist/utils/errors.js +44 -0
  379. package/dist/utils/fetchWithAuth.d.ts +25 -0
  380. package/dist/utils/fetchWithAuth.js +34 -0
  381. package/dist/utils/handleIds.d.ts +35 -0
  382. package/dist/utils/handleIds.js +58 -0
  383. package/dist/utils/handlePositioning.d.ts +31 -0
  384. package/dist/utils/handlePositioning.js +35 -0
  385. package/dist/utils/icons.d.ts +106 -0
  386. package/dist/utils/icons.js +157 -0
  387. package/dist/utils/logger.d.ts +47 -0
  388. package/dist/utils/logger.js +72 -0
  389. package/dist/utils/nodeStatus.d.ts +53 -0
  390. package/dist/utils/nodeStatus.js +183 -0
  391. package/dist/utils/nodeTypes.d.ts +117 -0
  392. package/dist/utils/nodeTypes.js +244 -0
  393. package/dist/utils/nodeWrapper.d.ts +39 -0
  394. package/dist/utils/nodeWrapper.js +62 -0
  395. package/dist/utils/performanceUtils.d.ts +30 -0
  396. package/dist/utils/performanceUtils.js +108 -0
  397. package/dist/utils/sanitize.d.ts +19 -0
  398. package/dist/utils/sanitize.js +31 -0
  399. package/dist/utils/uischema.d.ts +52 -0
  400. package/dist/utils/uischema.js +88 -0
  401. package/dist/utils/validation.d.ts +29 -0
  402. package/dist/utils/validation.js +39 -0
  403. package/package.json +292 -0
package/dist/styles/toast.css ADDED
@@ -0,0 +1,35 @@
1
+ /**
2
+ * FlowDrop Toast Theme
3
+ *
4
+ * Themes svelte-5-french-toast to match FlowDrop design tokens.
5
+ * Apply containerClassName="flowdrop-toaster" and default toastOptions.className="flowdrop-toast-bar"
6
+ * so these selectors apply. Icon colors are set via toastOptions.iconTheme using CSS variables.
7
+ *
8
+ * Uses !important so our token-based styles win over the library's default styles,
9
+ * which are injected when the Toaster mounts (after this stylesheet).
10
+ */
11
+
12
+ /* Toaster container: use design token for offset from viewport edges */
13
+ .flowdrop-toaster.flowdrop-toaster {
14
+ --default-offset: var(--fd-space-xl, 16px);
15
+ }
16
+
17
+ /*
18
+ * Toast bar: card surface, border, radius, shadow, typography and spacing from design tokens.
19
+ * Plain descendant selector (no :global - that's Svelte-only and invalid in plain CSS).
20
+ */
21
+ .flowdrop-toaster.flowdrop-toaster .flowdrop-toast-bar {
22
+ background: var(--fd-card) !important;
23
+ color: var(--fd-card-foreground) !important;
24
+ border: 1px solid var(--fd-border) !important;
25
+ border-radius: var(--fd-radius-lg) !important;
26
+ box-shadow: var(--fd-shadow-md) !important;
27
+ padding: var(--fd-space-xs) var(--fd-space-md) !important;
28
+ max-width: 350px;
29
+ font-size: var(--fd-text-sm);
30
+ line-height: 1.3;
31
+ transition:
32
+ background var(--fd-transition-fast),
33
+ border-color var(--fd-transition-fast),
34
+ box-shadow var(--fd-transition-fast);
35
+ }
package/dist/styles/tokens.css ADDED
@@ -0,0 +1,475 @@
1
+ /**
2
+ * FlowDrop Design Tokens
3
+ *
4
+ * A semantic-first token system with three tiers:
5
+ * 1. Internal palette (--_*) - Raw color values, not documented for users
6
+ * 2. Semantic tokens (--fd-*) - The public API for theming
7
+ * 3. Component tokens - Built using semantic tokens
8
+ *
9
+ * Users customize FlowDrop by overriding --fd-* tokens.
10
+ *
11
+ * @example Quick theming
12
+ * :root {
13
+ * --fd-primary: #8b5cf6;
14
+ * --fd-primary-hover: #7c3aed;
15
+ * --fd-radius-md: 0.5rem;
16
+ * }
17
+ *
18
+ * =============================================================================
19
+ * THEMING CONTRACT
20
+ * =============================================================================
21
+ *
22
+ * Tokens in this file are annotated with one of two stability markers:
23
+ *
24
+ * @public — Stable API. These tokens are safe to override in consumer
25
+ * stylesheets. Breaking changes to public tokens are only made
26
+ * in major (semver) releases and are announced in the changelog.
27
+ *
28
+ * @internal — Private implementation detail. These tokens may be renamed,
29
+ * removed, or have their values changed in any release without
30
+ * notice. Do NOT reference them in consumer stylesheets.
31
+ *
32
+ * Overriding tokens
33
+ * -----------------
34
+ * Override @public tokens by targeting `:root` in your own stylesheet:
35
+ *
36
+ * :root {
37
+ * --fd-primary: #7c3aed;
38
+ * --fd-radius-md: 8px;
39
+ * }
40
+ *
41
+ * Dark mode support
42
+ * -----------------
43
+ * FlowDrop respects `data-theme="dark"` on the <html> element. Override the
44
+ * same @public tokens inside `[data-theme="dark"]` to customise dark mode:
45
+ *
46
+ * [data-theme="dark"] {
47
+ * --fd-primary: #a78bfa;
48
+ * }
49
+ *
50
+ * Token categories
51
+ * ----------------
52
+ * @public tokens include:
53
+ * - Semantic surface tokens: --fd-surface-*, --fd-background, --fd-foreground,
54
+ * --fd-muted*, --fd-card*, --fd-header*
55
+ * - Border tokens: --fd-border-*, --fd-ring
56
+ * - Primary/brand tokens: --fd-primary-*, --fd-secondary-*, --fd-accent-*
57
+ * - Status tokens: --fd-success-*, --fd-warning-*, --fd-error-*,
58
+ * --fd-info-*
59
+ * - Text/font-size tokens: --fd-text-*
60
+ * - Spacing tokens: --fd-space-*
61
+ * - Border-radius tokens: --fd-radius-*
62
+ * - Shadow tokens: --fd-shadow-*
63
+ * - Component tokens: --fd-node-*, --fd-edge-*, --fd-handle-*
64
+ *
65
+ * @internal tokens include:
66
+ * - Raw palette values: --_gray-*, --_blue-*, --_green-*, --_red-*,
67
+ * --_amber-*, --_violet-*
68
+ * (Any token prefixed with --_ is internal by convention.)
69
+ * =============================================================================
70
+ */
71
+
72
+ :root {
73
+ /* =========================================================================
74
+ INTERNAL PALETTE (Private - not documented for users)
75
+ Prefix: --_ indicates internal/private tokens
76
+ @internal — Do NOT override these in consumer stylesheets.
77
+ ========================================================================= */
78
+
79
+ /* Grays - Tinted scale with subtle blue undertone for modern feel, 9 steps */
80
+ --_gray-1: #fafafc; /* @internal */
81
+ --_gray-2: #f5f5f8; /* @internal */
82
+ --_gray-3: #eaeaef; /* @internal */
83
+ --_gray-4: #dcdce4; /* @internal */
84
+ --_gray-5: #a3a3ad; /* @internal */
85
+ --_gray-6: #71717b; /* @internal */
86
+ --_gray-7: #52525c; /* @internal */
87
+ --_gray-8: #27272b; /* @internal */
88
+ --_gray-9: #18181c; /* @internal */
89
+
90
+ /* Blue - Primary/interactive color */
91
+ --_blue-1: #eff6ff; /* @internal */
92
+ --_blue-2: #3b82f6; /* @internal */
93
+ --_blue-3: #1d4ed8; /* @internal */
94
+
95
+ /* Green - Success states */
96
+ --_green-1: #f0fdf4; /* @internal */
97
+ --_green-2: #22c55e; /* @internal */
98
+ --_green-3: #15803d; /* @internal */
99
+
100
+ /* Red - Error/destructive states */
101
+ --_red-1: #fef2f2; /* @internal */
102
+ --_red-2: #ef4444; /* @internal */
103
+ --_red-3: #b91c1c; /* @internal */
104
+
105
+ /* Amber - Warning states */
106
+ --_amber-1: #fffbeb; /* @internal */
107
+ --_amber-2: #f59e0b; /* @internal */
108
+ --_amber-3: #b45309; /* @internal */
109
+
110
+ /* Violet - Selection/accent */
111
+ --_violet-1: #f5f3ff; /* @internal */
112
+ --_violet-2: #8b5cf6; /* @internal */
113
+ --_violet-3: #6d28d9; /* @internal */
114
+
115
+ /* =========================================================================
116
+ SEMANTIC TOKENS (Public API)
117
+ These are the tokens users override for theming.
118
+ @public — All tokens in this section are safe to override.
119
+ ========================================================================= */
120
+
121
+ /* ----- SURFACES (Backgrounds) ----- */
122
+ --fd-background: #ffffff; /* @public */
123
+ --fd-foreground: var(--_gray-9); /* @public */
124
+ --fd-muted: #f8f8fb; /* @public */
125
+ --fd-muted-foreground: var(--_gray-6); /* @public */
126
+ --fd-subtle: #f0f0f5; /* @public */
127
+ --fd-card: #ffffff; /* @public */
128
+ --fd-card-foreground: var(--_gray-9); /* @public */
129
+
130
+ /* ----- HEADER (Distinct header styling) ----- */
131
+ --fd-header: #f5f7fa; /* @public */
132
+ --fd-header-foreground: var(--_gray-8); /* @public */
133
+ --fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%); /* @public */
134
+
135
+ /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
136
+ --fd-surface-tint: rgba(99, 102, 241, 0.02); /* @public */
137
+
138
+ /* ----- BORDERS ----- */
139
+ --fd-border: var(--_gray-4); /* @public */
140
+ --fd-border-muted: var(--_gray-3); /* @public */
141
+ --fd-border-strong: var(--_gray-5); /* @public */
142
+ --fd-ring: var(--_blue-2); /* @public */
143
+
144
+ /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
145
+ --fd-node-border: var(--_gray-5); /* @public */
146
+ --fd-node-border-hover: var(--_gray-6); /* @public */
147
+
148
+ /* ----- PRIMARY (Interactive/Brand) ----- */
149
+ --fd-primary: var(--_blue-2); /* @public */
150
+ --fd-primary-hover: var(--_blue-3); /* @public */
151
+ --fd-primary-foreground: #ffffff; /* @public */
152
+ --fd-primary-muted: var(--_blue-1); /* @public */
153
+
154
+ /* ----- SECONDARY ----- */
155
+ --fd-secondary: var(--_gray-2); /* @public */
156
+ --fd-secondary-hover: var(--_gray-3); /* @public */
157
+ --fd-secondary-foreground: var(--_gray-9); /* @public */
158
+
159
+ /* ----- ACCENT ----- */
160
+ --fd-accent: var(--_violet-2); /* @public */
161
+ --fd-accent-hover: var(--_violet-3); /* @public */
162
+ --fd-accent-foreground: #ffffff; /* @public */
163
+ --fd-accent-muted: var(--_violet-1); /* @public */
164
+
165
+ /* ----- STATUS: SUCCESS ----- */
166
+ --fd-success: var(--_green-2); /* @public */
167
+ --fd-success-hover: var(--_green-3); /* @public */
168
+ --fd-success-foreground: #ffffff; /* @public */
169
+ --fd-success-muted: var(--_green-1); /* @public */
170
+
171
+ /* ----- STATUS: WARNING ----- */
172
+ --fd-warning: var(--_amber-2); /* @public */
173
+ --fd-warning-hover: var(--_amber-3); /* @public */
174
+ --fd-warning-foreground: var(--_gray-9); /* @public */
175
+ --fd-warning-muted: var(--_amber-1); /* @public */
176
+
177
+ /* ----- STATUS: ERROR/DESTRUCTIVE ----- */
178
+ --fd-error: var(--_red-2); /* @public */
179
+ --fd-error-hover: var(--_red-3); /* @public */
180
+ --fd-error-foreground: #ffffff; /* @public */
181
+ --fd-error-muted: var(--_red-1); /* @public */
182
+
183
+ /* ----- STATUS: INFO ----- */
184
+ --fd-info: var(--_blue-2); /* @public */
185
+ --fd-info-hover: var(--_blue-3); /* @public */
186
+ --fd-info-foreground: #ffffff; /* @public */
187
+ --fd-info-muted: var(--_blue-1); /* @public */
188
+
189
+ /* ----- SPACING SCALE (Named sizes) ----- */
190
+ --fd-space-0: 0; /* @public */
191
+ --fd-space-3xs: 0.25rem; /* @public 4px */
192
+ --fd-space-2xs: 0.375rem; /* @public 6px */
193
+ --fd-space-xs: 0.5rem; /* @public 8px */
194
+ --fd-space-sm: 0.625rem; /* @public 10px */
195
+ --fd-space-md: 0.75rem; /* @public 12px */
196
+ --fd-space-lg: 0.875rem; /* @public 14px */
197
+ --fd-space-xl: 1rem; /* @public 16px */
198
+ --fd-space-2xl: 1.25rem; /* @public 20px */
199
+ --fd-space-3xl: 1.5rem; /* @public 24px */
200
+ --fd-space-4xl: 2rem; /* @public 32px */
201
+ --fd-space-5xl: 2.5rem; /* @public 40px */
202
+ --fd-space-6xl: 3rem; /* @public 48px */
203
+ --fd-space-7xl: 4rem; /* @public 64px */
204
+
205
+ /* ----- BORDER RADIUS ----- */
206
+ --fd-radius-none: 0; /* @public */
207
+ --fd-radius-sm: 0.25rem; /* @public 4px */
208
+ --fd-radius-md: 0.375rem; /* @public 6px */
209
+ --fd-radius-lg: 0.5rem; /* @public 8px */
210
+ --fd-radius-xl: 0.75rem; /* @public 12px */
211
+ --fd-radius-2xl: 1rem; /* @public 16px */
212
+ --fd-radius-full: 9999px; /* @public */
213
+
214
+ /* ----- SHADOWS (Refined layered shadows for modern depth) ----- */
215
+ --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06); /* @public */
216
+ --fd-shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04); /* @public */
217
+ --fd-shadow-lg: 0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04); /* @public */
218
+ --fd-shadow-xl: 0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06); /* @public */
219
+
220
+ /* ----- FONT SIZES ----- */
221
+ --fd-text-2xs: 0.6875rem; /* @public 11px */
222
+ --fd-text-xs: 0.75rem; /* @public 12px */
223
+ --fd-text-xsm: 0.8125rem; /* @public 13px */
224
+ --fd-text-sm: 0.875rem; /* @public 14px */
225
+ --fd-text-md: 0.9375rem; /* @public 15px */
226
+ --fd-text-base: 1rem; /* @public 16px */
227
+ --fd-text-lg: 1.125rem; /* @public 18px */
228
+ --fd-text-xl: 1.25rem; /* @public 20px */
229
+ --fd-text-2xl: 1.5rem; /* @public 24px */
230
+
231
+ /* ----- LINE HEIGHTS ----- */
232
+ --fd-leading-tight: 1.4; /* @public */
233
+ --fd-leading-normal: 1.5; /* @public */
234
+ --fd-leading-relaxed: 1.6; /* @public */
235
+
236
+ /* ----- FONT FAMILIES ----- */
237
+ --fd-font-mono:
238
+ ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* @public */
239
+
240
+ /* ----- COMPONENT SIZES ----- */
241
+ --fd-size-icon-btn: 1.75rem; /* @internal 28px — may change with component redesigns */
242
+ --fd-size-btn-min: 2.5rem; /* @internal 40px — may change with component redesigns */
243
+ --fd-size-avatar: 2.25rem; /* @internal 36px — may change with component redesigns */
244
+ --fd-size-spinner: 1rem; /* @internal 16px — may change with component redesigns */
245
+
246
+ /* ----- TRANSITIONS ----- */
247
+ --fd-transition-fast: 150ms ease; /* @public */
248
+ --fd-transition-normal: 200ms ease; /* @public */
249
+ --fd-transition-slow: 300ms ease; /* @public */
250
+
251
+ /* =========================================================================
252
+ COMPONENT TOKENS
253
+ These provide fine-grained control while defaulting to semantic tokens.
254
+ @public tokens in this section are safe to override.
255
+ @internal tokens may change without notice.
256
+ ========================================================================= */
257
+
258
+ /* ----- LAYOUT ----- */
259
+ --fd-sidebar-width: 320px; /* @internal — controlled programmatically */
260
+ --fd-navbar-height: 60px; /* @internal — controlled programmatically */
261
+ --fd-toolbar-height: 40px; /* @internal — controlled programmatically */
262
+
263
+ /* ----- NODE COLORS (for workflow editor) ----- */
264
+ --fd-node-emerald: #10b981; /* @public */
265
+ --fd-node-blue: #2563eb; /* @public */
266
+ --fd-node-amber: #f59e0b; /* @public */
267
+ --fd-node-orange: #f97316; /* @public */
268
+ --fd-node-red: #ef4444; /* @public */
269
+ --fd-node-pink: #ec4899; /* @public */
270
+ --fd-node-indigo: #6366f1; /* @public */
271
+ --fd-node-teal: #14b8a6; /* @public */
272
+ --fd-node-cyan: #06b6d4; /* @public */
273
+ --fd-node-lime: #84cc16; /* @public */
274
+ --fd-node-slate: #64748b; /* @public */
275
+ --fd-node-purple: #9333ea; /* @public */
276
+
277
+ /** Icon on node squircle: dark in light theme, white in dark theme */
278
+ --fd-node-icon: var(--_gray-9); /* @public */
279
+ /** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */
280
+ --fd-node-icon-bg-opacity: 20%; /* @public */
281
+ --fd-node-icon-bg-opacity-hover: 50%; /* @public */
282
+
283
+ /* ----- EDGE TOKENS ----- */
284
+ --fd-edge-trigger: var(--_gray-9); /* @public */
285
+ --fd-edge-trigger-hover: var(--_gray-9); /* @public */
286
+ --fd-edge-trigger-selected: var(--_violet-2); /* @public */
287
+ --fd-edge-trigger-width: 2px; /* @public */
288
+ --fd-edge-trigger-width-hover: 3px; /* @public */
289
+
290
+ --fd-edge-tool: var(--_amber-2); /* @public */
291
+ --fd-edge-tool-hover: var(--_amber-3); /* @public */
292
+ --fd-edge-tool-selected: var(--_violet-2); /* @public */
293
+
294
+ --fd-edge-data: var(--_gray-5); /* @public */
295
+ --fd-edge-data-hover: var(--_gray-6); /* @public */
296
+ --fd-edge-data-selected: var(--_violet-2); /* @public */
297
+
298
+ --fd-edge-loopback: var(--_gray-6); /* @public */
299
+ --fd-edge-loopback-hover: var(--_gray-7); /* @public */
300
+ --fd-edge-loopback-selected: var(--_violet-2); /* @public */
301
+ --fd-edge-loopback-width: 1.5px; /* @public */
302
+ --fd-edge-loopback-width-hover: 2.5px; /* @public */
303
+ --fd-edge-loopback-dasharray: 5 5; /* @public */
304
+ --fd-edge-loopback-opacity: 0.85; /* @public */
305
+
306
+ /* ----- SCROLLBAR COLORS ----- */
307
+ --fd-scrollbar-thumb: var(--_gray-4); /* @internal */
308
+ --fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */
309
+ --fd-scrollbar-track: var(--_gray-2); /* @internal */
310
+
311
+ /* ----- BACKDROP/OVERLAY ----- */
312
+ --fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */
313
+ --fd-backdrop-blur: blur(8px); /* @internal */
314
+
315
+ /* ----- HANDLE (Node connection points) ----- */
316
+ /* White ring around handles for contrast against node backgrounds */
317
+ --fd-handle-border: #ffffff; /* @public */
318
+ /* Outer size = connection/hit area (px); visual = visible circle (px) */
319
+ --fd-handle-size: 20px; /* @public */
320
+ --fd-handle-visual-size: 12px; /* @public */
321
+ --fd-handle-offset: calc(
322
+ -1 * var(--fd-handle-size) / 2
323
+ ); /* @internal — half handle size for edge positioning */
324
+
325
+ /* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
326
+ --fd-node-grid-step: 10; /* @internal — layout algorithm detail */
327
+ --fd-node-default-width: 290px; /* @public */
328
+ --fd-node-header-height: 60px; /* @public */
329
+ --fd-node-header-title-height: 40px; /* @internal */
330
+ --fd-node-header-desc-line: 20px; /* @internal */
331
+ --fd-node-header-gap: 10px; /* @internal */
332
+ --fd-node-port-row-height: 20px; /* @internal */
333
+ --fd-node-terminal-size: 80px; /* @public */
334
+ --fd-node-square-size: 80px; /* @public */
335
+ --fd-node-simple-height: 80px; /* @public */
336
+ --fd-node-tool-min-height: 80px; /* @public */
337
+
338
+ /* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */
339
+ --fd-layout-background: linear-gradient(
340
+ 135deg,
341
+ #f9fafb 0%,
342
+ #e0e7ff 50%,
343
+ #c7d2fe 100%
344
+ ); /* @public */
345
+ }
346
+
347
+ /* =========================================================================
348
+ DARK MODE
349
+ Users enable with: <html data-theme="dark">
350
+ Designed for softer contrast and reduced eye strain
351
+ ========================================================================= */
352
+
353
+ [data-theme='dark'] {
354
+ /* ----- SURFACES (Backgrounds) - Softer contrast ----- */
355
+ --fd-background: #1a1a1e;
356
+ --fd-foreground: var(--_gray-2);
357
+ --fd-muted: #242428;
358
+ --fd-muted-foreground: var(--_gray-4);
359
+ --fd-subtle: #2a2a30;
360
+ --fd-card: #222226;
361
+ --fd-card-foreground: var(--_gray-2);
362
+
363
+ /* ----- HEADER (Distinct header styling for dark mode) ----- */
364
+ --fd-header: #1f1f24;
365
+ --fd-header-foreground: var(--_gray-3);
366
+ --fd-header-gradient: linear-gradient(180deg, #222228 0%, #1e1e24 100%);
367
+
368
+ /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
369
+ --fd-surface-tint: rgba(99, 102, 241, 0.03);
370
+
371
+ /* ----- HANDLE (Node connection points) ----- */
372
+ /* White ring around handles provides contrast on dark node backgrounds */
373
+ --fd-handle-border: rgba(255, 255, 255, 0.9);
374
+
375
+ /* ----- BORDERS - Subtle in dark mode for softer contrast ----- */
376
+ --fd-border: #3a3a40;
377
+ --fd-border-muted: #2e2e33;
378
+ --fd-border-strong: #4a4a52;
379
+ --fd-ring: #60a5fa;
380
+
381
+ /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
382
+ --fd-node-border: #4a4a52;
383
+ --fd-node-border-hover: #5a5a62;
384
+
385
+ /* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
386
+ --fd-node-emerald: #34d399;
387
+ --fd-node-blue: #60a5fa;
388
+ --fd-node-amber: #fbbf24;
389
+ --fd-node-orange: #fb923c;
390
+ --fd-node-red: #f87171;
391
+ --fd-node-pink: #f472b6;
392
+ --fd-node-indigo: #818cf8;
393
+ --fd-node-teal: #2dd4bf;
394
+ --fd-node-cyan: #22d3ee;
395
+ --fd-node-lime: #a3e635;
396
+ --fd-node-slate: #94a3b8;
397
+ --fd-node-purple: #c084fc;
398
+
399
+ /** Icon on node squircle: white in dark theme */
400
+ --fd-node-icon: #ffffff;
401
+ /** Icon squircle background opacity: higher in dark mode for visibility on dark surfaces */
402
+ --fd-node-icon-bg-opacity: 50%;
403
+ --fd-node-icon-bg-opacity-hover: 80%;
404
+
405
+ /* ----- PRIMARY (Interactive/Brand) ----- */
406
+ --fd-primary: #60a5fa;
407
+ --fd-primary-hover: #93c5fd;
408
+ --fd-primary-foreground: var(--_gray-9);
409
+ --fd-primary-muted: rgba(59, 130, 246, 0.12);
410
+
411
+ /* ----- SECONDARY ----- */
412
+ --fd-secondary: #2d2d32;
413
+ --fd-secondary-hover: #3a3a3f;
414
+ --fd-secondary-foreground: var(--_gray-2);
415
+
416
+ /* ----- ACCENT ----- */
417
+ --fd-accent: #a78bfa;
418
+ --fd-accent-hover: #c4b5fd;
419
+ --fd-accent-foreground: var(--_gray-9);
420
+ --fd-accent-muted: rgba(139, 92, 246, 0.12);
421
+
422
+ /* ----- STATUS: SUCCESS ----- */
423
+ --fd-success: #4ade80;
424
+ --fd-success-hover: #86efac;
425
+ --fd-success-foreground: var(--_gray-9);
426
+ --fd-success-muted: rgba(34, 197, 94, 0.12);
427
+
428
+ /* ----- STATUS: WARNING ----- */
429
+ --fd-warning: #fbbf24;
430
+ --fd-warning-hover: #fcd34d;
431
+ --fd-warning-foreground: var(--_gray-9);
432
+ --fd-warning-muted: rgba(245, 158, 11, 0.12);
433
+
434
+ /* ----- STATUS: ERROR/DESTRUCTIVE ----- */
435
+ --fd-error: #f87171;
436
+ --fd-error-hover: #fca5a5;
437
+ --fd-error-foreground: var(--_gray-9);
438
+ --fd-error-muted: rgba(239, 68, 68, 0.12);
439
+
440
+ /* ----- STATUS: INFO ----- */
441
+ --fd-info: #60a5fa;
442
+ --fd-info-hover: #93c5fd;
443
+ --fd-info-foreground: var(--_gray-9);
444
+ --fd-info-muted: rgba(59, 130, 246, 0.12);
445
+
446
+ /* ----- SHADOWS (softer for dark mode) ----- */
447
+ --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
448
+ --fd-shadow-md: 0 4px 6px rgb(0 0 0 / 0.25);
449
+ --fd-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3);
450
+ --fd-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.4);
451
+
452
+ /* ----- SCROLLBAR COLORS ----- */
453
+ --fd-scrollbar-thumb: var(--_gray-5);
454
+ --fd-scrollbar-thumb-hover: var(--_gray-4);
455
+ --fd-scrollbar-track: #242428;
456
+
457
+ /* ----- BACKDROP/OVERLAY ----- */
458
+ --fd-backdrop: rgba(26, 26, 30, 0.85);
459
+
460
+ /* ----- EDGE TOKENS (adjusted for dark mode visibility) ----- */
461
+ --fd-edge-trigger: var(--_gray-3);
462
+ --fd-edge-trigger-hover: var(--_gray-2);
463
+ --fd-edge-trigger-selected: #a78bfa;
464
+ --fd-edge-data: var(--_gray-5);
465
+ --fd-edge-data-hover: var(--_gray-4);
466
+ --fd-edge-data-selected: #a78bfa;
467
+ --fd-edge-tool-hover: #fbbf24;
468
+ --fd-edge-tool-selected: #a78bfa;
469
+ --fd-edge-loopback: var(--_gray-5);
470
+ --fd-edge-loopback-hover: var(--_gray-4);
471
+ --fd-edge-loopback-selected: #a78bfa;
472
+
473
+ /* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
474
+ --fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
475
+ }
package/dist/svelte-app.d.ts ADDED
@@ -0,0 +1,150 @@
1
+ /**
2
+ * Svelte App Wrapper for Framework Integration
3
+ *
4
+ * Provides mount/unmount functions for integrating FlowDrop into any web application.
5
+ * Particularly useful for integration with vanilla JS, Drupal, WordPress, or other frameworks.
6
+ *
7
+ * @module svelte-app
8
+ */
9
+ import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from './types/index.js';
10
+ import type { EndpointConfig } from './config/endpoints.js';
11
+ import type { AuthProvider } from './types/auth.js';
12
+ import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
13
+ import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
14
+ import './registry/builtinFormats.js';
15
+ import type { PartialSettings } from './types/settings.js';
16
+ /**
17
+ * Navbar action configuration
18
+ */
19
+ export interface NavbarAction {
20
+ label: string;
21
+ href: string;
22
+ icon?: string;
23
+ variant?: 'primary' | 'secondary' | 'outline';
24
+ onclick?: (event: Event) => void;
25
+ }
26
+ /**
27
+ * Mount options for FlowDrop App
28
+ */
29
+ export interface FlowDropMountOptions {
30
+ /** Initial workflow to load */
31
+ workflow?: Workflow;
32
+ /** Available node types */
33
+ nodes?: NodeMetadata[];
34
+ /** API endpoint configuration */
35
+ endpointConfig?: EndpointConfig;
36
+ /** Port configuration for connections */
37
+ portConfig?: PortConfig;
38
+ /** Category definitions for node categories */
39
+ categories?: CategoryDefinition[];
40
+ /** Editor height */
41
+ height?: string | number;
42
+ /** Editor width */
43
+ width?: string | number;
44
+ /** Show the navbar */
45
+ showNavbar?: boolean;
46
+ /** Disable the node sidebar */
47
+ disableSidebar?: boolean;
48
+ /** Lock the workflow (prevent changes) */
49
+ lockWorkflow?: boolean;
50
+ /** Read-only mode */
51
+ readOnly?: boolean;
52
+ /** Pipeline ID for status display */
53
+ pipelineId?: string;
54
+ /** Node execution statuses */
55
+ nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
56
+ /** Custom navbar title */
57
+ navbarTitle?: string;
58
+ /** Custom navbar actions */
59
+ navbarActions?: NavbarAction[];
60
+ /** Show settings gear icon in navbar */
61
+ showSettings?: boolean;
62
+ /** Authentication provider for API requests */
63
+ authProvider?: AuthProvider;
64
+ /** Event handlers for workflow lifecycle */
65
+ eventHandlers?: FlowDropEventHandlers;
66
+ /** Feature configuration */
67
+ features?: FlowDropFeatures;
68
+ /** Initial settings overrides (theme, behavior, editor, ui, api) */
69
+ settings?: PartialSettings;
70
+ /** Custom storage key for localStorage drafts */
71
+ draftStorageKey?: string;
72
+ /** Custom workflow format adapters to register */
73
+ formatAdapters?: WorkflowFormatAdapter[];
74
+ }
75
+ /**
76
+ * Return type for mounted FlowDrop app
77
+ */
78
+ export interface MountedFlowDropApp {
79
+ /**
80
+ * Destroy the app and clean up resources
81
+ */
82
+ destroy: () => void;
83
+ /**
84
+ * Check if there are unsaved changes
85
+ */
86
+ isDirty: () => boolean;
87
+ /**
88
+ * Mark the workflow as saved (clears dirty state)
89
+ */
90
+ markAsSaved: () => void;
91
+ /**
92
+ * Get the current workflow data
93
+ */
94
+ getWorkflow: () => Workflow | null;
95
+ /**
96
+ * Trigger save operation
97
+ */
98
+ save: () => Promise<void>;
99
+ /**
100
+ * Trigger export operation (downloads JSON)
101
+ */
102
+ export: () => void;
103
+ }
104
+ /**
105
+ * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
106
+ *
107
+ * Use this for a complete workflow editing experience with all UI components.
108
+ *
109
+ * @param container - DOM element to mount the app into
110
+ * @param options - Configuration options for the app
111
+ * @returns Promise resolving to a MountedFlowDropApp instance
112
+ *
113
+ * @example
114
+ * ```typescript
115
+ * const app = await mountFlowDropApp(document.getElementById("editor"), {
116
+ * workflow: myWorkflow,
117
+ * endpointConfig: createEndpointConfig("/api/flowdrop"),
118
+ * authProvider: new CallbackAuthProvider({
119
+ * getToken: () => authService.getAccessToken()
120
+ * }),
121
+ * eventHandlers: {
122
+ * onDirtyStateChange: (isDirty) => updateSaveButton(isDirty),
123
+ * onAfterSave: () => showSuccess("Saved!")
124
+ * }
125
+ * });
126
+ * ```
127
+ */
128
+ export declare function mountFlowDropApp(container: HTMLElement, options?: FlowDropMountOptions): Promise<MountedFlowDropApp>;
129
+ /**
130
+ * Mount the WorkflowEditor component in a container
131
+ *
132
+ * Simpler alternative to mountFlowDropApp - only mounts the editor without navbar.
133
+ *
134
+ * @param container - DOM element to mount the editor into
135
+ * @param options - Configuration options
136
+ * @returns Promise resolving to a MountedFlowDropApp instance
137
+ */
138
+ export declare function mountWorkflowEditor(container: HTMLElement, options?: {
139
+ workflow?: Workflow;
140
+ nodes?: NodeMetadata[];
141
+ endpointConfig?: EndpointConfig;
142
+ portConfig?: PortConfig;
143
+ categories?: CategoryDefinition[];
144
+ }): Promise<MountedFlowDropApp>;
145
+ /**
146
+ * Unmount a FlowDrop app
147
+ *
148
+ * @param app - The mounted app to unmount
149
+ */
150
+ export declare function unmountFlowDropApp(app: MountedFlowDropApp): void;