@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.2

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 (235) hide show
  1. package/CHANGELOG.md +508 -0
  2. package/MIGRATION-2.0.md +629 -0
  3. package/README.md +23 -23
  4. package/dist/adapters/WorkflowAdapter.d.ts +1 -1
  5. package/dist/adapters/WorkflowAdapter.js +14 -8
  6. package/dist/adapters/agentspec/AgentSpecAdapter.js +7 -7
  7. package/dist/api/enhanced-client.js +6 -11
  8. package/dist/chat/batchFeedback.d.ts +39 -0
  9. package/dist/chat/batchFeedback.js +51 -0
  10. package/dist/commands/executor.js +15 -1
  11. package/dist/commands/storeIntegration.svelte.d.ts +4 -1
  12. package/dist/commands/storeIntegration.svelte.js +26 -21
  13. package/dist/commands/types.d.ts +2 -0
  14. package/dist/components/App.svelte +163 -192
  15. package/dist/components/App.svelte.d.ts +47 -8
  16. package/dist/components/ConfigForm.svelte +77 -49
  17. package/dist/components/ConfigModal.svelte +7 -2
  18. package/dist/components/ConnectionLine.svelte +4 -2
  19. package/dist/components/Navbar.svelte +61 -1
  20. package/dist/components/NodeSidebar.svelte +27 -45
  21. package/dist/components/NodeStatusOverlay.svelte +94 -6
  22. package/dist/components/NodeSwapPicker.svelte +10 -8
  23. package/dist/components/PipelineStatus.svelte +22 -68
  24. package/dist/components/PipelineStatus.svelte.d.ts +3 -0
  25. package/dist/components/PortCoordinateTracker.svelte +5 -6
  26. package/dist/components/SchemaForm.stories.svelte +1 -3
  27. package/dist/components/SchemaForm.svelte +22 -27
  28. package/dist/components/SchemaForm.svelte.d.ts +0 -8
  29. package/dist/components/SettingsModal.svelte +8 -3
  30. package/dist/components/SettingsPanel.svelte +20 -4
  31. package/dist/components/SwapMappingEditor.svelte +67 -49
  32. package/dist/components/SwapMappingEditor.svelte.d.ts +0 -2
  33. package/dist/components/UniversalNode.svelte +9 -7
  34. package/dist/components/WorkflowEditor.svelte +121 -111
  35. package/dist/components/WorkflowEditor.svelte.d.ts +21 -10
  36. package/dist/components/chat/AIChatPanel.svelte +98 -89
  37. package/dist/components/chat/AIChatPanel.svelte.d.ts +0 -4
  38. package/dist/components/chat/CommandPreview.svelte +2 -1
  39. package/dist/components/console/CommandConsole.svelte +7 -5
  40. package/dist/components/console/ConsoleAutocomplete.svelte +10 -11
  41. package/dist/components/console/ConsoleAutocomplete.svelte.d.ts +6 -0
  42. package/dist/components/console/ConsoleInput.svelte +15 -6
  43. package/dist/components/console/ConsoleOutput.svelte +2 -1
  44. package/dist/components/form/FormArray.svelte +5 -9
  45. package/dist/components/form/FormArray.svelte.d.ts +2 -1
  46. package/dist/components/form/FormAutocomplete.svelte +16 -15
  47. package/dist/components/form/FormField.svelte +4 -2
  48. package/dist/components/form/FormFieldLight.svelte +34 -3
  49. package/dist/components/form/FormFieldLight.svelte.d.ts +12 -0
  50. package/dist/components/form/FormMarkdownEditor.svelte +9 -4
  51. package/dist/components/form/FormRangeField.svelte +1 -0
  52. package/dist/components/form/FormTemplateEditor.svelte +11 -3
  53. package/dist/components/form/FormToggle.svelte +5 -12
  54. package/dist/components/form/FormToggle.svelte.d.ts +4 -2
  55. package/dist/components/form/FormUISchemaRenderer.svelte +3 -1
  56. package/dist/components/form/templateAutocomplete.js +1 -5
  57. package/dist/components/form/types.d.ts +1 -14
  58. package/dist/components/interrupt/FormPrompt.svelte +3 -2
  59. package/dist/components/interrupt/InterruptBubble.svelte +25 -17
  60. package/dist/components/interrupt/ReviewPrompt.svelte +10 -3
  61. package/dist/components/interrupt/TextInputPrompt.svelte +2 -1
  62. package/dist/components/layouts/MainLayout.svelte +20 -13
  63. package/dist/components/layouts/MainLayout.svelte.d.ts +4 -0
  64. package/dist/components/nodes/AtomNode.svelte +17 -5
  65. package/dist/components/nodes/GatewayNode.svelte +19 -10
  66. package/dist/components/nodes/IdeaNode.svelte +7 -0
  67. package/dist/components/nodes/SimpleNode.svelte +11 -6
  68. package/dist/components/nodes/SquareNode.svelte +15 -8
  69. package/dist/components/nodes/TerminalNode.svelte +9 -4
  70. package/dist/components/nodes/ToolNode.svelte +7 -1
  71. package/dist/components/nodes/WorkflowNode.svelte +16 -7
  72. package/dist/components/playground/ChatInput.svelte +11 -14
  73. package/dist/components/playground/ChatPanel.svelte +6 -49
  74. package/dist/components/playground/ChatPanel.svelte.d.ts +0 -14
  75. package/dist/components/playground/ControlPanel.svelte +134 -123
  76. package/dist/components/playground/ControlPanel.svelte.d.ts +3 -0
  77. package/dist/components/playground/ExecutionLogs.svelte +11 -9
  78. package/dist/components/playground/InputCollector.svelte +11 -9
  79. package/dist/components/playground/MessageStream.svelte +17 -23
  80. package/dist/components/playground/PipelineKanbanView.svelte +69 -8
  81. package/dist/components/playground/PipelineKanbanView.svelte.d.ts +2 -0
  82. package/dist/components/playground/PipelinePanel.svelte +31 -8
  83. package/dist/components/playground/PipelinePanel.svelte.d.ts +2 -0
  84. package/dist/components/playground/PipelineTableView.svelte +188 -44
  85. package/dist/components/playground/PipelineTableView.svelte.d.ts +2 -0
  86. package/dist/components/playground/Playground.svelte +154 -105
  87. package/dist/components/playground/Playground.svelte.d.ts +5 -0
  88. package/dist/components/playground/PlaygroundApp.svelte +11 -1
  89. package/dist/components/playground/PlaygroundApp.svelte.d.ts +6 -0
  90. package/dist/components/playground/PlaygroundModal.svelte +18 -3
  91. package/dist/components/playground/PlaygroundModal.svelte.d.ts +6 -0
  92. package/dist/components/playground/PlaygroundStudio.svelte +40 -32
  93. package/dist/components/playground/PlaygroundStudio.svelte.d.ts +6 -0
  94. package/dist/components/playground/SessionManager.svelte +9 -12
  95. package/dist/components/playground/pipelineViewUtils.svelte.d.ts +30 -1
  96. package/dist/components/playground/pipelineViewUtils.svelte.js +40 -3
  97. package/dist/config/endpoints.d.ts +23 -7
  98. package/dist/config/endpoints.js +30 -10
  99. package/dist/core/index.d.ts +5 -6
  100. package/dist/core/index.js +8 -12
  101. package/dist/display/index.d.ts +6 -3
  102. package/dist/display/index.js +7 -5
  103. package/dist/editor/index.d.ts +20 -21
  104. package/dist/editor/index.js +26 -36
  105. package/dist/form/code.d.ts +25 -15
  106. package/dist/form/code.js +44 -41
  107. package/dist/form/fieldRegistry.d.ts +17 -13
  108. package/dist/form/fieldRegistry.js +32 -12
  109. package/dist/form/full.d.ts +19 -14
  110. package/dist/form/full.js +26 -28
  111. package/dist/form/index.d.ts +3 -4
  112. package/dist/form/index.js +6 -5
  113. package/dist/form/markdown.d.ts +13 -8
  114. package/dist/form/markdown.js +22 -23
  115. package/dist/helpers/proximityConnect.d.ts +3 -2
  116. package/dist/helpers/proximityConnect.js +2 -5
  117. package/dist/helpers/workflowEditorHelper.d.ts +14 -5
  118. package/dist/helpers/workflowEditorHelper.js +28 -25
  119. package/dist/index.d.ts +28 -24
  120. package/dist/index.js +27 -50
  121. package/dist/messages/defaults.d.ts +2 -5
  122. package/dist/messages/defaults.js +3 -6
  123. package/dist/messages/index.d.ts +0 -1
  124. package/dist/messages/index.js +0 -1
  125. package/dist/mocks/app-forms.d.ts +6 -2
  126. package/dist/mocks/app-forms.js +11 -4
  127. package/dist/openapi/v1/openapi.yaml +3 -3
  128. package/dist/playground/index.d.ts +4 -5
  129. package/dist/playground/index.js +4 -32
  130. package/dist/playground/mount.d.ts +25 -0
  131. package/dist/playground/mount.js +50 -20
  132. package/dist/registry/{BaseRegistry.d.ts → BaseRegistry.svelte.d.ts} +22 -1
  133. package/dist/registry/{BaseRegistry.js → BaseRegistry.svelte.js} +37 -1
  134. package/dist/registry/builtinFormats.d.ts +9 -18
  135. package/dist/registry/builtinFormats.js +9 -39
  136. package/dist/registry/builtinNodeTypes.d.ts +53 -0
  137. package/dist/registry/builtinNodeTypes.js +67 -0
  138. package/dist/registry/builtinNodes.d.ts +2 -64
  139. package/dist/registry/builtinNodes.js +7 -103
  140. package/dist/registry/index.d.ts +3 -4
  141. package/dist/registry/index.js +4 -6
  142. package/dist/registry/nodeComponentRegistry.d.ts +182 -15
  143. package/dist/registry/nodeComponentRegistry.js +235 -17
  144. package/dist/registry/workflowFormatRegistry.d.ts +14 -9
  145. package/dist/registry/workflowFormatRegistry.js +24 -8
  146. package/dist/{schema → schemas}/index.d.ts +2 -2
  147. package/dist/{schema → schemas}/index.js +2 -2
  148. package/dist/schemas/v1/workflow.schema.json +3 -3
  149. package/dist/services/agentSpecExecutionService.d.ts +0 -2
  150. package/dist/services/agentSpecExecutionService.js +0 -3
  151. package/dist/services/apiVariableService.d.ts +2 -1
  152. package/dist/services/apiVariableService.js +16 -47
  153. package/dist/services/autoSaveService.d.ts +7 -0
  154. package/dist/services/autoSaveService.js +6 -4
  155. package/dist/services/categoriesApi.js +3 -6
  156. package/dist/services/chatService.d.ts +9 -4
  157. package/dist/services/chatService.js +23 -28
  158. package/dist/services/draftStorage.d.ts +129 -13
  159. package/dist/services/draftStorage.js +185 -37
  160. package/dist/services/dynamicSchemaService.d.ts +2 -1
  161. package/dist/services/dynamicSchemaService.js +5 -22
  162. package/dist/services/globalSave.d.ts +13 -12
  163. package/dist/services/globalSave.js +29 -51
  164. package/dist/services/historyService.d.ts +9 -3
  165. package/dist/services/historyService.js +9 -3
  166. package/dist/services/interruptService.d.ts +15 -9
  167. package/dist/services/interruptService.js +35 -37
  168. package/dist/services/nodeExecutionService.d.ts +18 -3
  169. package/dist/services/nodeExecutionService.js +71 -45
  170. package/dist/services/playgroundService.d.ts +16 -10
  171. package/dist/services/playgroundService.js +42 -43
  172. package/dist/services/portConfigApi.js +3 -6
  173. package/dist/services/settingsService.d.ts +9 -4
  174. package/dist/services/settingsService.js +23 -12
  175. package/dist/services/variableService.d.ts +2 -1
  176. package/dist/services/variableService.js +2 -2
  177. package/dist/services/workflowStorage.js +6 -6
  178. package/dist/stores/apiContext.d.ts +56 -0
  179. package/dist/stores/apiContext.js +80 -0
  180. package/dist/stores/categoriesStore.svelte.d.ts +28 -23
  181. package/dist/stores/categoriesStore.svelte.js +69 -64
  182. package/dist/stores/getInstance.svelte.d.ts +39 -0
  183. package/dist/stores/getInstance.svelte.js +65 -0
  184. package/dist/stores/historyStore.svelte.d.ts +77 -93
  185. package/dist/stores/historyStore.svelte.js +134 -160
  186. package/dist/stores/instanceContainer.svelte.d.ts +111 -0
  187. package/dist/stores/instanceContainer.svelte.js +114 -0
  188. package/dist/stores/interruptStore.svelte.d.ts +112 -82
  189. package/dist/stores/interruptStore.svelte.js +253 -226
  190. package/dist/stores/pipelinePanelStore.svelte.d.ts +27 -3
  191. package/dist/stores/pipelinePanelStore.svelte.js +61 -14
  192. package/dist/stores/playgroundStore.svelte.d.ts +169 -222
  193. package/dist/stores/playgroundStore.svelte.js +513 -580
  194. package/dist/stores/portCoordinateStore.svelte.d.ts +57 -51
  195. package/dist/stores/portCoordinateStore.svelte.js +109 -98
  196. package/dist/stores/settingsStore.svelte.d.ts +4 -1
  197. package/dist/stores/settingsStore.svelte.js +47 -12
  198. package/dist/stores/workflowStore.svelte.d.ts +178 -213
  199. package/dist/stores/workflowStore.svelte.js +449 -501
  200. package/dist/stories/EdgeDecorator.svelte +5 -2
  201. package/dist/stories/NodeDecorator.svelte +5 -3
  202. package/dist/svelte-app.d.ts +60 -10
  203. package/dist/svelte-app.js +159 -54
  204. package/dist/types/auth.d.ts +9 -51
  205. package/dist/types/auth.js +4 -54
  206. package/dist/types/events.d.ts +6 -3
  207. package/dist/types/index.d.ts +37 -5
  208. package/dist/types/index.js +0 -1
  209. package/dist/types/navbar.d.ts +7 -0
  210. package/dist/types/playground.d.ts +18 -3
  211. package/dist/types/settings.d.ts +13 -0
  212. package/dist/types/settings.js +1 -0
  213. package/dist/utils/colors.d.ts +47 -21
  214. package/dist/utils/colors.js +69 -68
  215. package/dist/utils/connections.d.ts +9 -15
  216. package/dist/utils/connections.js +13 -32
  217. package/dist/utils/duration.d.ts +13 -0
  218. package/dist/utils/duration.js +45 -0
  219. package/dist/utils/edgeStyling.js +9 -5
  220. package/dist/utils/fetchWithAuth.d.ts +36 -15
  221. package/dist/utils/fetchWithAuth.js +53 -23
  222. package/dist/utils/icons.d.ts +5 -2
  223. package/dist/utils/icons.js +6 -5
  224. package/dist/utils/nodeSwap.d.ts +6 -2
  225. package/dist/utils/nodeSwap.js +62 -126
  226. package/dist/utils/nodeTypes.d.ts +17 -8
  227. package/dist/utils/nodeTypes.js +27 -20
  228. package/dist/utils/performanceUtils.js +7 -0
  229. package/package.json +7 -5
  230. package/dist/messages/deprecation.d.ts +0 -20
  231. package/dist/messages/deprecation.js +0 -33
  232. package/dist/registry/plugin.d.ts +0 -215
  233. package/dist/registry/plugin.js +0 -249
  234. package/dist/services/api.d.ts +0 -129
  235. package/dist/services/api.js +0 -217
@@ -49,9 +49,8 @@ import PlaygroundModal from '../components/playground/PlaygroundModal.svelte';
49
49
  import PlaygroundStudio from '../components/playground/PlaygroundStudio.svelte';
50
50
  import PlaygroundApp from '../components/playground/PlaygroundApp.svelte';
51
51
  import { initializeSettings } from '../stores/settingsStore.svelte.js';
52
- import { setEndpointConfig } from '../services/api.js';
53
52
  import { playgroundService } from '../services/playgroundService.js';
54
- import { getCurrentSession, getSessions, getMessages, getIsExecuting, playgroundActions, applyServerResponse, subscribeToSessionStatus } from '../stores/playgroundStore.svelte.js';
53
+ import { createFlowDropInstance, getDefaultInstance } from '../stores/instanceContainer.svelte.js';
55
54
  async function resolveEndpointConfig(endpointConfig) {
56
55
  if (!endpointConfig)
57
56
  return undefined;
@@ -61,7 +60,8 @@ async function resolveEndpointConfig(endpointConfig) {
61
60
  ...endpointConfig,
62
61
  endpoints: { ...defaultEndpointConfig.endpoints, ...endpointConfig.endpoints }
63
62
  };
64
- setEndpointConfig(resolved);
63
+ // The resolved config is passed to the Playground component, which configures
64
+ // its instance's ApiContext (fd.api) — no module-level state to set here.
65
65
  return resolved;
66
66
  }
67
67
  /**
@@ -86,33 +86,52 @@ function sizeContainer(container, height, width) {
86
86
  if (width !== undefined)
87
87
  container.style.width = width;
88
88
  }
89
- function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange) {
89
+ /**
90
+ * Resolve the FlowDrop instance for a playground mount. No `instanceId` →
91
+ * the page-default instance (legacy shared-store behavior); an explicit id →
92
+ * a fresh isolated instance owned (and destroyed) by this mount.
93
+ */
94
+ function acquirePlaygroundInstance(instanceId) {
95
+ if (instanceId) {
96
+ return { fd: createFlowDropInstance({ id: instanceId }), ownsInstance: true };
97
+ }
98
+ return { fd: getDefaultInstance(), ownsInstance: false };
99
+ }
100
+ function buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange) {
90
101
  const pollingInterval = config.pollingInterval ?? 1500;
91
102
  const unsubscribeStatus = onSessionStatusChange
92
- ? subscribeToSessionStatus(onSessionStatusChange)
103
+ ? fd.playground.subscribeToSessionStatus(onSessionStatusChange)
93
104
  : undefined;
94
105
  return {
95
106
  destroy: () => {
96
107
  unsubscribeStatus?.();
108
+ // Caution (shared default instance): stopPolling is page-global and
109
+ // reset() clears state other default-mounted playgrounds rely on —
110
+ // pass `instanceId` to isolate. Preserved legacy behavior.
97
111
  playgroundService.stopPolling();
98
- playgroundActions.reset();
112
+ fd.playground.reset();
113
+ // Fully dispose instances created for this mount; the shared default
114
+ // instance only gets the reset above (legacy behavior).
115
+ if (ownsInstance) {
116
+ fd.destroy();
117
+ }
99
118
  unmount(svelteApp);
100
119
  },
101
- getCurrentSession: () => getCurrentSession(),
102
- getSessions: () => getSessions(),
103
- getMessageCount: () => getMessages().length,
104
- isExecuting: () => getIsExecuting(),
120
+ getCurrentSession: () => fd.playground.currentSession,
121
+ getSessions: () => fd.playground.sessions,
122
+ getMessageCount: () => fd.playground.messageCount,
123
+ isExecuting: () => fd.playground.isExecuting,
105
124
  stopPolling: () => playgroundService.stopPolling(),
106
125
  startPolling: () => {
107
- const session = getCurrentSession();
126
+ const session = fd.playground.currentSession;
108
127
  if (session) {
109
- playgroundService.startPolling(session.id, (response) => applyServerResponse(response, session.id), pollingInterval, config.shouldStopPolling, playgroundService.getLastSequenceNumber());
128
+ playgroundService.startPolling(fd.api.config, session.id, (response) => fd.playground.applyServerResponse(response, session.id), pollingInterval, config.shouldStopPolling, playgroundService.getLastSequenceNumber(), fd.api.authProvider);
110
129
  }
111
130
  },
112
- pushMessages: (response) => applyServerResponse(response, null),
131
+ pushMessages: (response) => fd.playground.applyServerResponse(response, null),
113
132
  reset: () => {
114
133
  playgroundService.stopPolling();
115
- playgroundActions.reset();
134
+ fd.playground.reset();
116
135
  }
117
136
  };
118
137
  }
@@ -146,7 +165,7 @@ function buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusCh
146
165
  * ```
147
166
  */
148
167
  export async function mountPlayground(container, options) {
149
- const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, settings: initialSettings, onClose, onSessionStatusChange } = options;
168
+ const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, settings: initialSettings, onClose, onSessionStatusChange, instanceId } = options;
150
169
  // Validate required parameters
151
170
  if (!workflowId) {
152
171
  throw new Error('workflowId is required for mountPlayground()');
@@ -162,6 +181,7 @@ export async function mountPlayground(container, options) {
162
181
  endpointConfig,
163
182
  settings: initialSettings
164
183
  });
184
+ const { fd, ownsInstance } = acquirePlaygroundInstance(instanceId);
165
185
  let targetContainer = container;
166
186
  if (mode === 'modal') {
167
187
  targetContainer = document.body;
@@ -175,10 +195,12 @@ export async function mountPlayground(container, options) {
175
195
  target: targetContainer,
176
196
  props: {
177
197
  isOpen: true,
198
+ instance: fd,
178
199
  workflowId,
179
200
  workflow,
180
201
  initialSessionId,
181
202
  endpointConfig: finalEndpointConfig,
203
+ authProvider,
182
204
  config,
183
205
  onClose: () => {
184
206
  if (onClose) {
@@ -192,17 +214,19 @@ export async function mountPlayground(container, options) {
192
214
  svelteApp = mount(Playground, {
193
215
  target: targetContainer,
194
216
  props: {
217
+ instance: fd,
195
218
  workflowId,
196
219
  workflow,
197
220
  mode,
198
221
  initialSessionId,
199
222
  endpointConfig: finalEndpointConfig,
223
+ authProvider,
200
224
  config,
201
225
  onClose
202
226
  }
203
227
  });
204
228
  }
205
- return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
229
+ return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
206
230
  }
207
231
  /**
208
232
  * Unmount a Playground instance
@@ -225,7 +249,7 @@ export function unmountPlayground(app) {
225
249
  }
226
250
  }
227
251
  export async function mountPlaygroundStudio(container, options) {
228
- const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, pipelineViews } = options;
252
+ const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, pipelineViews, instanceId } = options;
229
253
  if (!workflowId) {
230
254
  throw new Error('workflowId is required for mountPlaygroundStudio()');
231
255
  }
@@ -239,15 +263,18 @@ export async function mountPlaygroundStudio(container, options) {
239
263
  endpointConfig,
240
264
  settings: initialSettings
241
265
  });
266
+ const { fd, ownsInstance } = acquirePlaygroundInstance(instanceId);
242
267
  sizeContainer(container, height, width);
243
268
  const svelteApp = mount(PlaygroundStudio, {
244
269
  target: container,
245
270
  props: {
271
+ instance: fd,
246
272
  workflowId,
247
273
  workflow,
248
274
  mode,
249
275
  initialSessionId,
250
276
  endpointConfig: finalEndpointConfig,
277
+ authProvider,
251
278
  config,
252
279
  onClose,
253
280
  onSessionNavigate,
@@ -257,7 +284,7 @@ export async function mountPlaygroundStudio(container, options) {
257
284
  extraPipelineViews: pipelineViews
258
285
  }
259
286
  });
260
- return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
287
+ return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
261
288
  }
262
289
  /**
263
290
  * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
@@ -280,7 +307,7 @@ export async function mountPlaygroundStudio(container, options) {
280
307
  * ```
281
308
  */
282
309
  export async function mountPlaygroundApp(container, options) {
283
- const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange } = options;
310
+ const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, instanceId } = options;
284
311
  if (!workflowId) {
285
312
  throw new Error('workflowId is required for mountPlaygroundApp()');
286
313
  }
@@ -297,15 +324,18 @@ export async function mountPlaygroundApp(container, options) {
297
324
  endpointConfig,
298
325
  settings: initialSettings
299
326
  });
327
+ const { fd, ownsInstance } = acquirePlaygroundInstance(instanceId);
300
328
  sizeContainer(container, height, width);
301
329
  const svelteApp = mount(PlaygroundApp, {
302
330
  target: container,
303
331
  props: {
332
+ instance: fd,
304
333
  workflowId,
305
334
  workflow,
306
335
  mode,
307
336
  initialSessionId,
308
337
  endpointConfig: finalEndpointConfig,
338
+ authProvider,
309
339
  config,
310
340
  showNavbar,
311
341
  navbarTitle,
@@ -321,5 +351,5 @@ export async function mountPlaygroundApp(container, options) {
321
351
  onSessionNavigate
322
352
  }
323
353
  });
324
- return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
354
+ return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
325
355
  }
@@ -5,7 +5,15 @@
5
5
  * mechanics: Map storage, subscribe/notify, onClear callbacks, and size tracking.
6
6
  *
7
7
  * Subclasses define their own `register()` method with domain-appropriate
8
- * signatures, using `this.items` and `this.notifyListeners()` directly.
8
+ * signatures, using `this.items`, `this.touch()`, and `this.notifyListeners()`.
9
+ *
10
+ * Reactivity: a `.svelte.ts` module so it can hold a `$state` version counter
11
+ * (`#version`). Every mutating path bumps it via `touch()`; every read method
12
+ * components derive from reads it once at the top. This makes the plain `Map`
13
+ * backing store observable to `$derived`/`$effect`, so registrations made
14
+ * AFTER a component mounts (e.g. `fd.nodes.registerCustom(...)`) invalidate the
15
+ * derived and trigger a re-render. Mirrors WorkflowStore's `#editVersion`
16
+ * monotonic-counter precedent (workflowStore.svelte.ts).
9
17
  *
10
18
  * @example
11
19
  * ```typescript
@@ -15,18 +23,31 @@
15
23
  * throw new Error(`Already registered: ${item.id}`);
16
24
  * }
17
25
  * this.items.set(item.id, item);
26
+ * this.touch();
18
27
  * this.notifyListeners();
19
28
  * }
20
29
  * }
21
30
  * ```
22
31
  */
23
32
  export declare class BaseRegistry<K, V> {
33
+ #private;
24
34
  /** Internal storage map */
25
35
  protected items: Map<K, V>;
26
36
  /** Change listeners */
27
37
  private listeners;
28
38
  /** Callbacks invoked when the registry is cleared (for resetting flags) */
29
39
  private clearCallbacks;
40
+ /**
41
+ * Bump the reactive version counter. Subclasses MUST call this after any
42
+ * mutation of `this.items` so derived reads invalidate.
43
+ */
44
+ protected touch(): void;
45
+ /**
46
+ * Read the reactive version counter. Subclasses that read `this.items`
47
+ * directly (instead of via `get`/`getAll`/etc.) MUST call this so the access
48
+ * is tracked as a reactive dependency.
49
+ */
50
+ protected trackVersion(): void;
30
51
  /**
31
52
  * Unregister an item by key.
32
53
  *
@@ -5,7 +5,15 @@
5
5
  * mechanics: Map storage, subscribe/notify, onClear callbacks, and size tracking.
6
6
  *
7
7
  * Subclasses define their own `register()` method with domain-appropriate
8
- * signatures, using `this.items` and `this.notifyListeners()` directly.
8
+ * signatures, using `this.items`, `this.touch()`, and `this.notifyListeners()`.
9
+ *
10
+ * Reactivity: a `.svelte.ts` module so it can hold a `$state` version counter
11
+ * (`#version`). Every mutating path bumps it via `touch()`; every read method
12
+ * components derive from reads it once at the top. This makes the plain `Map`
13
+ * backing store observable to `$derived`/`$effect`, so registrations made
14
+ * AFTER a component mounts (e.g. `fd.nodes.registerCustom(...)`) invalidate the
15
+ * derived and trigger a re-render. Mirrors WorkflowStore's `#editVersion`
16
+ * monotonic-counter precedent (workflowStore.svelte.ts).
9
17
  *
10
18
  * @example
11
19
  * ```typescript
@@ -15,6 +23,7 @@
15
23
  * throw new Error(`Already registered: ${item.id}`);
16
24
  * }
17
25
  * this.items.set(item.id, item);
26
+ * this.touch();
18
27
  * this.notifyListeners();
19
28
  * }
20
29
  * }
@@ -23,10 +32,30 @@
23
32
  export class BaseRegistry {
24
33
  /** Internal storage map */
25
34
  items = new Map();
35
+ /**
36
+ * Reactive version counter. Bumped by `touch()` on every mutation; read by
37
+ * every observable read method so Svelte tracks the plain Map as a dependency.
38
+ */
39
+ #version = $state(0);
26
40
  /** Change listeners */
27
41
  listeners = new Set();
28
42
  /** Callbacks invoked when the registry is cleared (for resetting flags) */
29
43
  clearCallbacks = new Set();
44
+ /**
45
+ * Bump the reactive version counter. Subclasses MUST call this after any
46
+ * mutation of `this.items` so derived reads invalidate.
47
+ */
48
+ touch() {
49
+ this.#version++;
50
+ }
51
+ /**
52
+ * Read the reactive version counter. Subclasses that read `this.items`
53
+ * directly (instead of via `get`/`getAll`/etc.) MUST call this so the access
54
+ * is tracked as a reactive dependency.
55
+ */
56
+ trackVersion() {
57
+ void this.#version; // reactive dependency
58
+ }
30
59
  /**
31
60
  * Unregister an item by key.
32
61
  *
@@ -36,6 +65,7 @@ export class BaseRegistry {
36
65
  unregister(key) {
37
66
  const result = this.items.delete(key);
38
67
  if (result) {
68
+ this.touch();
39
69
  this.notifyListeners();
40
70
  }
41
71
  return result;
@@ -47,6 +77,7 @@ export class BaseRegistry {
47
77
  * @returns The item if found, undefined otherwise
48
78
  */
49
79
  get(key) {
80
+ this.trackVersion(); // reactive dependency
50
81
  return this.items.get(key);
51
82
  }
52
83
  /**
@@ -56,6 +87,7 @@ export class BaseRegistry {
56
87
  * @returns true if the key is registered
57
88
  */
58
89
  has(key) {
90
+ this.trackVersion(); // reactive dependency
59
91
  return this.items.has(key);
60
92
  }
61
93
  /**
@@ -64,6 +96,7 @@ export class BaseRegistry {
64
96
  * @returns Array of registered keys
65
97
  */
66
98
  getKeys() {
99
+ this.trackVersion(); // reactive dependency
67
100
  return Array.from(this.items.keys());
68
101
  }
69
102
  /**
@@ -72,6 +105,7 @@ export class BaseRegistry {
72
105
  * @returns Array of all registered items
73
106
  */
74
107
  getAll() {
108
+ this.trackVersion(); // reactive dependency
75
109
  return Array.from(this.items.values());
76
110
  }
77
111
  /**
@@ -102,6 +136,7 @@ export class BaseRegistry {
102
136
  */
103
137
  clear() {
104
138
  this.items.clear();
139
+ this.touch();
105
140
  for (const cb of this.clearCallbacks) {
106
141
  cb();
107
142
  }
@@ -111,6 +146,7 @@ export class BaseRegistry {
111
146
  * Get the count of registered items.
112
147
  */
113
148
  get size() {
149
+ this.trackVersion(); // reactive dependency
114
150
  return this.items.size;
115
151
  }
116
152
  /**
@@ -1,23 +1,14 @@
1
1
  /**
2
- * Built-in Workflow Format Registration
2
+ * Built-in Workflow Format Adapters
3
3
  *
4
- * Registers the default FlowDrop and Agent Spec format adapters
5
- * with the workflow format registry.
6
- *
7
- * This module is automatically loaded when imported,
8
- * ensuring built-in formats are available without user action.
9
- */
10
- /**
11
- * Register all built-in workflow format adapters.
12
- * Safe to call multiple times — will only register once.
4
+ * Provides the default FlowDrop and Agent Spec format adapters. These are used
5
+ * to seed each instance's `WorkflowFormatRegistry` (see `instanceContainer`).
13
6
  */
14
- export declare function registerBuiltinFormats(): void;
7
+ import type { WorkflowFormatAdapter } from './workflowFormatRegistry.js';
15
8
  /**
16
- * Check if built-in formats have been registered.
17
- */
18
- export declare function areBuiltinFormatsRegistered(): boolean;
19
- /**
20
- * Reset the registration state.
21
- * Primarily useful for testing.
9
+ * Build the built-in workflow format adapters (FlowDrop native + Agent Spec).
10
+ *
11
+ * Returns a fresh array on each call so every instance owns independent
12
+ * adapter objects (the Agent Spec adapter holds per-conversion state).
22
13
  */
23
- export declare function resetBuiltinFormatRegistration(): void;
14
+ export declare function getBuiltinFormatAdapters(): WorkflowFormatAdapter[];
@@ -1,27 +1,18 @@
1
1
  /**
2
- * Built-in Workflow Format Registration
2
+ * Built-in Workflow Format Adapters
3
3
  *
4
- * Registers the default FlowDrop and Agent Spec format adapters
5
- * with the workflow format registry.
6
- *
7
- * This module is automatically loaded when imported,
8
- * ensuring built-in formats are available without user action.
4
+ * Provides the default FlowDrop and Agent Spec format adapters. These are used
5
+ * to seed each instance's `WorkflowFormatRegistry` (see `instanceContainer`).
9
6
  */
10
- import { workflowFormatRegistry } from './workflowFormatRegistry.js';
11
7
  import { AgentSpecAdapter } from '../adapters/agentspec/AgentSpecAdapter.js';
12
8
  import { validateForAgentSpecExport } from '../adapters/agentspec/validator.js';
13
9
  /**
14
- * Track whether built-in formats have been registered.
15
- * Prevents duplicate registration on hot reload.
16
- */
17
- let registered = false;
18
- /**
19
- * Register all built-in workflow format adapters.
20
- * Safe to call multiple times — will only register once.
10
+ * Build the built-in workflow format adapters (FlowDrop native + Agent Spec).
11
+ *
12
+ * Returns a fresh array on each call so every instance owns independent
13
+ * adapter objects (the Agent Spec adapter holds per-conversion state).
21
14
  */
22
- export function registerBuiltinFormats() {
23
- if (registered)
24
- return;
15
+ export function getBuiltinFormatAdapters() {
25
16
  // FlowDrop native — passthrough (StandardWorkflow ↔ JSON)
26
17
  const flowdropAdapter = {
27
18
  id: 'flowdrop',
@@ -32,7 +23,6 @@ export function registerBuiltinFormats() {
32
23
  export: (workflow) => JSON.stringify(workflow, null, 2),
33
24
  import: (data) => JSON.parse(data)
34
25
  };
35
- workflowFormatRegistry.register(flowdropAdapter);
36
26
  // Agent Spec — wraps existing AgentSpecAdapter
37
27
  // No bundled nodes — Agent Spec node types are user-provided via
38
28
  // getDefaultAgentSpecNodeTypes() or custom definitions passed to mountFlowDropApp()
@@ -46,25 +36,5 @@ export function registerBuiltinFormats() {
46
36
  import: (data) => agentSpecAdapter.importJSON(data),
47
37
  validate: (workflow) => validateForAgentSpecExport(workflow)
48
38
  };
49
- workflowFormatRegistry.register(agentSpecFormatAdapter);
50
- registered = true;
51
- }
52
- /**
53
- * Check if built-in formats have been registered.
54
- */
55
- export function areBuiltinFormatsRegistered() {
56
- return registered;
57
- }
58
- /**
59
- * Reset the registration state.
60
- * Primarily useful for testing.
61
- */
62
- export function resetBuiltinFormatRegistration() {
63
- registered = false;
39
+ return [flowdropAdapter, agentSpecFormatAdapter];
64
40
  }
65
- // Sync registration flag with registry.clear() for test isolation
66
- workflowFormatRegistry.onClear(() => {
67
- registered = false;
68
- });
69
- // Auto-register built-in formats when this module is imported
70
- registerBuiltinFormats();
@@ -0,0 +1,53 @@
1
+ /**
2
+ * Built-in Node Type Metadata (pure — no component imports)
3
+ *
4
+ * The type identifiers, aliases, and resolution helpers for FlowDrop's built-in
5
+ * node types, with ZERO dependency on the Svelte node components. Utilities that
6
+ * only need to reason about type strings (e.g. `utils/nodeTypes.ts`, reachable
7
+ * from `@flowdrop/flowdrop/core`) import from here, so the lightweight `core`
8
+ * entry never statically pulls in node components, marked, or DOMPurify.
9
+ *
10
+ * The component registrations themselves live in `./builtinNodes.ts`, which
11
+ * re-exports everything here for backward compatibility.
12
+ *
13
+ * @module registry/builtinNodeTypes
14
+ */
15
+ /**
16
+ * Source identifier for built-in FlowDrop components.
17
+ */
18
+ export declare const FLOWDROP_SOURCE = "flowdrop";
19
+ /**
20
+ * Type for built-in node types.
21
+ * Use this when you specifically need a built-in type.
22
+ */
23
+ export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'atom' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
24
+ /**
25
+ * Array of built-in type strings for runtime validation.
26
+ */
27
+ export declare const BUILTIN_NODE_TYPES: BuiltinNodeType[];
28
+ /**
29
+ * Alias mapping for type resolution.
30
+ * Maps alternative type names to their canonical registration.
31
+ */
32
+ export declare const BUILTIN_TYPE_ALIASES: Record<string, string>;
33
+ /**
34
+ * Get the canonical type for a given type string.
35
+ * Handles aliases like "default" -> "workflowNode".
36
+ *
37
+ * @param type - The type string to resolve
38
+ * @returns The canonical type string
39
+ */
40
+ export declare function resolveBuiltinAlias(type: string): string;
41
+ /**
42
+ * Check if a type is a built-in FlowDrop type.
43
+ *
44
+ * @param type - The type to check
45
+ * @returns true if this is a built-in type
46
+ */
47
+ export declare function isBuiltinType(type: string): boolean;
48
+ /**
49
+ * Get all built-in type identifiers.
50
+ *
51
+ * @returns Array of built-in type strings
52
+ */
53
+ export declare function getBuiltinTypes(): string[];
@@ -0,0 +1,67 @@
1
+ /**
2
+ * Built-in Node Type Metadata (pure — no component imports)
3
+ *
4
+ * The type identifiers, aliases, and resolution helpers for FlowDrop's built-in
5
+ * node types, with ZERO dependency on the Svelte node components. Utilities that
6
+ * only need to reason about type strings (e.g. `utils/nodeTypes.ts`, reachable
7
+ * from `@flowdrop/flowdrop/core`) import from here, so the lightweight `core`
8
+ * entry never statically pulls in node components, marked, or DOMPurify.
9
+ *
10
+ * The component registrations themselves live in `./builtinNodes.ts`, which
11
+ * re-exports everything here for backward compatibility.
12
+ *
13
+ * @module registry/builtinNodeTypes
14
+ */
15
+ /**
16
+ * Source identifier for built-in FlowDrop components.
17
+ */
18
+ export const FLOWDROP_SOURCE = 'flowdrop';
19
+ /**
20
+ * Array of built-in type strings for runtime validation.
21
+ */
22
+ export const BUILTIN_NODE_TYPES = [
23
+ 'workflowNode',
24
+ 'simple',
25
+ 'square',
26
+ 'atom',
27
+ 'tool',
28
+ 'gateway',
29
+ 'note',
30
+ 'terminal',
31
+ 'idea'
32
+ ];
33
+ /**
34
+ * Alias mapping for type resolution.
35
+ * Maps alternative type names to their canonical registration.
36
+ */
37
+ export const BUILTIN_TYPE_ALIASES = {
38
+ default: 'workflowNode'
39
+ };
40
+ /**
41
+ * Get the canonical type for a given type string.
42
+ * Handles aliases like "default" -> "workflowNode".
43
+ *
44
+ * @param type - The type string to resolve
45
+ * @returns The canonical type string
46
+ */
47
+ export function resolveBuiltinAlias(type) {
48
+ return BUILTIN_TYPE_ALIASES[type] ?? type;
49
+ }
50
+ /**
51
+ * Check if a type is a built-in FlowDrop type.
52
+ *
53
+ * @param type - The type to check
54
+ * @returns true if this is a built-in type
55
+ */
56
+ export function isBuiltinType(type) {
57
+ const canonicalType = resolveBuiltinAlias(type);
58
+ return BUILTIN_NODE_TYPES.includes(canonicalType);
59
+ }
60
+ /**
61
+ * Get all built-in type identifiers.
62
+ *
63
+ * @returns Array of built-in type strings
64
+ */
65
+ export function getBuiltinTypes() {
66
+ return [...BUILTIN_NODE_TYPES];
67
+ }
@@ -6,72 +6,10 @@
6
6
  * ensuring all built-in node types are available without user action.
7
7
  */
8
8
  import { type NodeComponentRegistration } from './nodeComponentRegistry.js';
9
- /**
10
- * Source identifier for built-in FlowDrop components
11
- */
12
- export declare const FLOWDROP_SOURCE = "flowdrop";
9
+ export { FLOWDROP_SOURCE, BUILTIN_TYPE_ALIASES, BUILTIN_NODE_TYPES, resolveBuiltinAlias, isBuiltinType, getBuiltinTypes } from './builtinNodeTypes.js';
10
+ export type { BuiltinNodeType } from './builtinNodeTypes.js';
13
11
  /**
14
12
  * Built-in FlowDrop node component registrations.
15
13
  * These are the default node types that ship with FlowDrop.
16
14
  */
17
15
  export declare const BUILTIN_NODE_COMPONENTS: NodeComponentRegistration[];
18
- /**
19
- * Alias mapping for type resolution.
20
- * Maps alternative type names to their canonical registration.
21
- */
22
- export declare const BUILTIN_TYPE_ALIASES: Record<string, string>;
23
- /**
24
- * Initialize the registry with built-in components.
25
- * This is called automatically when the library loads.
26
- *
27
- * Safe to call multiple times - will only register once.
28
- *
29
- * @example
30
- * ```typescript
31
- * // Usually not needed - called automatically
32
- * // But can be called manually if needed
33
- * registerBuiltinNodes();
34
- * ```
35
- */
36
- export declare function registerBuiltinNodes(): void;
37
- /**
38
- * Check if built-in nodes have been registered.
39
- *
40
- * @returns true if registerBuiltinNodes() has been called
41
- */
42
- export declare function areBuiltinsRegistered(): boolean;
43
- /**
44
- * Reset the registration state.
45
- * Primarily useful for testing.
46
- */
47
- export declare function resetBuiltinRegistration(): void;
48
- /**
49
- * Get the canonical type for a given type string.
50
- * Handles aliases like "default" -> "workflowNode".
51
- *
52
- * @param type - The type string to resolve
53
- * @returns The canonical type string
54
- */
55
- export declare function resolveBuiltinAlias(type: string): string;
56
- /**
57
- * Check if a type is a built-in FlowDrop type.
58
- *
59
- * @param type - The type to check
60
- * @returns true if this is a built-in type
61
- */
62
- export declare function isBuiltinType(type: string): boolean;
63
- /**
64
- * Get all built-in type identifiers.
65
- *
66
- * @returns Array of built-in type strings
67
- */
68
- export declare function getBuiltinTypes(): string[];
69
- /**
70
- * Type for built-in node types.
71
- * Use this when you specifically need a built-in type.
72
- */
73
- export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'atom' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
74
- /**
75
- * Array of built-in type strings for runtime validation.
76
- */
77
- export declare const BUILTIN_NODE_TYPES: BuiltinNodeType[];