@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

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 (218) hide show
  1. package/CHANGELOG.md +475 -0
  2. package/MIGRATION-2.0.md +472 -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/chat/batchFeedback.d.ts +39 -0
  8. package/dist/chat/batchFeedback.js +51 -0
  9. package/dist/commands/executor.js +15 -1
  10. package/dist/commands/storeIntegration.svelte.d.ts +4 -1
  11. package/dist/commands/storeIntegration.svelte.js +26 -21
  12. package/dist/commands/types.d.ts +2 -0
  13. package/dist/components/App.svelte +162 -192
  14. package/dist/components/App.svelte.d.ts +47 -8
  15. package/dist/components/ConfigForm.svelte +110 -66
  16. package/dist/components/ConfigModal.svelte +7 -2
  17. package/dist/components/ConnectionLine.svelte +4 -2
  18. package/dist/components/Navbar.svelte +61 -1
  19. package/dist/components/NodeSidebar.svelte +27 -45
  20. package/dist/components/NodeStatusOverlay.svelte +94 -6
  21. package/dist/components/NodeSwapPicker.svelte +10 -8
  22. package/dist/components/PipelineStatus.svelte +16 -67
  23. package/dist/components/PortCoordinateTracker.svelte +5 -6
  24. package/dist/components/SchemaForm.stories.svelte +1 -3
  25. package/dist/components/SchemaForm.svelte +45 -40
  26. package/dist/components/SchemaForm.svelte.d.ts +0 -8
  27. package/dist/components/SettingsModal.svelte +8 -3
  28. package/dist/components/SettingsPanel.svelte +20 -4
  29. package/dist/components/SwapMappingEditor.svelte +67 -49
  30. package/dist/components/SwapMappingEditor.svelte.d.ts +0 -2
  31. package/dist/components/UniversalNode.svelte +9 -7
  32. package/dist/components/WorkflowEditor.svelte +118 -111
  33. package/dist/components/WorkflowEditor.svelte.d.ts +18 -10
  34. package/dist/components/chat/AIChatPanel.svelte +93 -89
  35. package/dist/components/chat/AIChatPanel.svelte.d.ts +0 -4
  36. package/dist/components/chat/CommandPreview.svelte +2 -1
  37. package/dist/components/console/CommandConsole.svelte +7 -5
  38. package/dist/components/console/ConsoleAutocomplete.svelte +10 -11
  39. package/dist/components/console/ConsoleAutocomplete.svelte.d.ts +6 -0
  40. package/dist/components/console/ConsoleInput.svelte +15 -6
  41. package/dist/components/console/ConsoleOutput.svelte +2 -1
  42. package/dist/components/form/FormArray.svelte +5 -9
  43. package/dist/components/form/FormArray.svelte.d.ts +2 -1
  44. package/dist/components/form/FormAutocomplete.svelte +29 -13
  45. package/dist/components/form/FormField.svelte +4 -2
  46. package/dist/components/form/FormFieldLight.svelte +4 -2
  47. package/dist/components/form/FormMarkdownEditor.svelte +9 -4
  48. package/dist/components/form/FormRangeField.svelte +1 -0
  49. package/dist/components/form/FormTemplateEditor.svelte +11 -3
  50. package/dist/components/form/FormToggle.svelte +5 -12
  51. package/dist/components/form/FormToggle.svelte.d.ts +4 -2
  52. package/dist/components/form/templateAutocomplete.js +1 -5
  53. package/dist/components/form/types.d.ts +1 -14
  54. package/dist/components/interrupt/FormPrompt.svelte +3 -2
  55. package/dist/components/interrupt/InterruptBubble.svelte +16 -17
  56. package/dist/components/interrupt/ReviewPrompt.svelte +10 -3
  57. package/dist/components/interrupt/TextInputPrompt.svelte +2 -1
  58. package/dist/components/layouts/MainLayout.svelte +20 -13
  59. package/dist/components/layouts/MainLayout.svelte.d.ts +4 -0
  60. package/dist/components/nodes/AtomNode.svelte +292 -0
  61. package/dist/components/nodes/AtomNode.svelte.d.ts +26 -0
  62. package/dist/components/nodes/GatewayNode.svelte +19 -10
  63. package/dist/components/nodes/IdeaNode.svelte +7 -0
  64. package/dist/components/nodes/SimpleNode.svelte +11 -6
  65. package/dist/components/nodes/SquareNode.svelte +15 -8
  66. package/dist/components/nodes/TerminalNode.svelte +9 -4
  67. package/dist/components/nodes/ToolNode.svelte +7 -1
  68. package/dist/components/nodes/WorkflowNode.svelte +16 -7
  69. package/dist/components/playground/ChatInput.svelte +11 -14
  70. package/dist/components/playground/ChatPanel.svelte +6 -49
  71. package/dist/components/playground/ChatPanel.svelte.d.ts +0 -14
  72. package/dist/components/playground/ControlPanel.svelte +134 -123
  73. package/dist/components/playground/ControlPanel.svelte.d.ts +3 -0
  74. package/dist/components/playground/ExecutionLogs.svelte +11 -9
  75. package/dist/components/playground/InputCollector.svelte +11 -9
  76. package/dist/components/playground/MessageStream.svelte +17 -23
  77. package/dist/components/playground/PipelineKanbanView.svelte +65 -6
  78. package/dist/components/playground/PipelinePanel.svelte +11 -5
  79. package/dist/components/playground/PipelineTableView.svelte +186 -44
  80. package/dist/components/playground/Playground.svelte +95 -92
  81. package/dist/components/playground/Playground.svelte.d.ts +2 -0
  82. package/dist/components/playground/PlaygroundApp.svelte +6 -1
  83. package/dist/components/playground/PlaygroundApp.svelte.d.ts +3 -0
  84. package/dist/components/playground/PlaygroundModal.svelte +13 -3
  85. package/dist/components/playground/PlaygroundModal.svelte.d.ts +3 -0
  86. package/dist/components/playground/PlaygroundStudio.svelte +34 -32
  87. package/dist/components/playground/PlaygroundStudio.svelte.d.ts +3 -0
  88. package/dist/components/playground/SessionManager.svelte +9 -12
  89. package/dist/components/playground/pipelineViewUtils.svelte.d.ts +28 -0
  90. package/dist/components/playground/pipelineViewUtils.svelte.js +38 -1
  91. package/dist/config/endpoints.d.ts +0 -7
  92. package/dist/config/endpoints.js +2 -10
  93. package/dist/core/index.d.ts +4 -4
  94. package/dist/core/index.js +6 -6
  95. package/dist/display/index.d.ts +0 -2
  96. package/dist/display/index.js +0 -6
  97. package/dist/editor/index.d.ts +19 -20
  98. package/dist/editor/index.js +25 -35
  99. package/dist/form/code.d.ts +25 -15
  100. package/dist/form/code.js +44 -41
  101. package/dist/form/fieldRegistry.d.ts +17 -13
  102. package/dist/form/fieldRegistry.js +32 -12
  103. package/dist/form/full.d.ts +17 -13
  104. package/dist/form/full.js +22 -27
  105. package/dist/form/index.d.ts +3 -3
  106. package/dist/form/index.js +3 -3
  107. package/dist/form/markdown.d.ts +13 -8
  108. package/dist/form/markdown.js +22 -23
  109. package/dist/helpers/proximityConnect.d.ts +7 -3
  110. package/dist/helpers/proximityConnect.js +19 -6
  111. package/dist/helpers/workflowEditorHelper.d.ts +12 -5
  112. package/dist/helpers/workflowEditorHelper.js +27 -25
  113. package/dist/index.d.ts +28 -24
  114. package/dist/index.js +27 -50
  115. package/dist/messages/defaults.d.ts +2 -5
  116. package/dist/messages/defaults.js +3 -6
  117. package/dist/messages/index.d.ts +0 -1
  118. package/dist/messages/index.js +0 -1
  119. package/dist/mocks/app-forms.d.ts +6 -2
  120. package/dist/mocks/app-forms.js +11 -4
  121. package/dist/openapi/v1/openapi.yaml +227 -164
  122. package/dist/playground/index.d.ts +2 -3
  123. package/dist/playground/index.js +2 -30
  124. package/dist/playground/mount.d.ts +15 -0
  125. package/dist/playground/mount.js +46 -20
  126. package/dist/registry/{BaseRegistry.d.ts → BaseRegistry.svelte.d.ts} +22 -1
  127. package/dist/registry/{BaseRegistry.js → BaseRegistry.svelte.js} +37 -1
  128. package/dist/registry/builtinFormats.d.ts +9 -18
  129. package/dist/registry/builtinFormats.js +9 -39
  130. package/dist/registry/builtinNodes.d.ts +1 -26
  131. package/dist/registry/builtinNodes.js +14 -50
  132. package/dist/registry/index.d.ts +3 -4
  133. package/dist/registry/index.js +4 -6
  134. package/dist/registry/nodeComponentRegistry.d.ts +182 -15
  135. package/dist/registry/nodeComponentRegistry.js +235 -17
  136. package/dist/registry/workflowFormatRegistry.d.ts +14 -9
  137. package/dist/registry/workflowFormatRegistry.js +24 -8
  138. package/dist/{schema → schemas}/index.d.ts +2 -2
  139. package/dist/{schema → schemas}/index.js +2 -2
  140. package/dist/schemas/v1/workflow.schema.json +53 -6
  141. package/dist/services/agentSpecExecutionService.js +0 -1
  142. package/dist/services/apiVariableService.d.ts +2 -1
  143. package/dist/services/apiVariableService.js +5 -22
  144. package/dist/services/autoSaveService.d.ts +7 -0
  145. package/dist/services/autoSaveService.js +6 -4
  146. package/dist/services/chatService.d.ts +8 -4
  147. package/dist/services/chatService.js +15 -15
  148. package/dist/services/draftStorage.d.ts +129 -13
  149. package/dist/services/draftStorage.js +185 -37
  150. package/dist/services/dynamicSchemaService.d.ts +2 -1
  151. package/dist/services/dynamicSchemaService.js +5 -22
  152. package/dist/services/globalSave.d.ts +13 -12
  153. package/dist/services/globalSave.js +29 -51
  154. package/dist/services/historyService.d.ts +9 -3
  155. package/dist/services/historyService.js +9 -3
  156. package/dist/services/interruptService.d.ts +14 -9
  157. package/dist/services/interruptService.js +27 -27
  158. package/dist/services/nodeExecutionService.d.ts +18 -3
  159. package/dist/services/nodeExecutionService.js +71 -45
  160. package/dist/services/playgroundService.d.ts +14 -9
  161. package/dist/services/playgroundService.js +31 -30
  162. package/dist/services/variableService.d.ts +2 -1
  163. package/dist/services/variableService.js +2 -2
  164. package/dist/services/workflowStorage.js +6 -6
  165. package/dist/stores/apiContext.d.ts +45 -0
  166. package/dist/stores/apiContext.js +65 -0
  167. package/dist/stores/categoriesStore.svelte.d.ts +28 -23
  168. package/dist/stores/categoriesStore.svelte.js +70 -64
  169. package/dist/stores/getInstance.svelte.d.ts +39 -0
  170. package/dist/stores/getInstance.svelte.js +65 -0
  171. package/dist/stores/historyStore.svelte.d.ts +77 -93
  172. package/dist/stores/historyStore.svelte.js +134 -160
  173. package/dist/stores/instanceContainer.svelte.d.ts +111 -0
  174. package/dist/stores/instanceContainer.svelte.js +114 -0
  175. package/dist/stores/interruptStore.svelte.d.ts +112 -82
  176. package/dist/stores/interruptStore.svelte.js +253 -226
  177. package/dist/stores/pipelinePanelStore.svelte.d.ts +27 -3
  178. package/dist/stores/pipelinePanelStore.svelte.js +61 -14
  179. package/dist/stores/playgroundStore.svelte.d.ts +169 -216
  180. package/dist/stores/playgroundStore.svelte.js +515 -572
  181. package/dist/stores/portCoordinateStore.svelte.d.ts +57 -51
  182. package/dist/stores/portCoordinateStore.svelte.js +109 -98
  183. package/dist/stores/settingsStore.svelte.d.ts +4 -1
  184. package/dist/stores/settingsStore.svelte.js +47 -12
  185. package/dist/stores/workflowStore.svelte.d.ts +178 -213
  186. package/dist/stores/workflowStore.svelte.js +449 -501
  187. package/dist/stories/EdgeDecorator.svelte +5 -2
  188. package/dist/stories/NodeDecorator.svelte +5 -3
  189. package/dist/svelte-app.d.ts +60 -10
  190. package/dist/svelte-app.js +157 -53
  191. package/dist/types/events.d.ts +6 -3
  192. package/dist/types/index.d.ts +71 -6
  193. package/dist/types/navbar.d.ts +7 -0
  194. package/dist/types/playground.d.ts +18 -3
  195. package/dist/types/settings.d.ts +13 -0
  196. package/dist/types/settings.js +1 -0
  197. package/dist/utils/colors.d.ts +47 -21
  198. package/dist/utils/colors.js +69 -68
  199. package/dist/utils/connections.d.ts +9 -15
  200. package/dist/utils/connections.js +13 -32
  201. package/dist/utils/duration.d.ts +13 -0
  202. package/dist/utils/duration.js +45 -0
  203. package/dist/utils/formMerge.d.ts +36 -0
  204. package/dist/utils/formMerge.js +70 -0
  205. package/dist/utils/icons.d.ts +5 -2
  206. package/dist/utils/icons.js +6 -5
  207. package/dist/utils/nodeSwap.d.ts +6 -2
  208. package/dist/utils/nodeSwap.js +62 -126
  209. package/dist/utils/nodeTypes.d.ts +17 -8
  210. package/dist/utils/nodeTypes.js +27 -19
  211. package/dist/utils/performanceUtils.js +7 -0
  212. package/package.json +6 -5
  213. package/dist/messages/deprecation.d.ts +0 -20
  214. package/dist/messages/deprecation.js +0 -33
  215. package/dist/registry/plugin.d.ts +0 -215
  216. package/dist/registry/plugin.js +0 -249
  217. package/dist/services/api.d.ts +0 -129
  218. 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), 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());
110
129
  }
111
130
  },
112
- pushMessages: (response) => applyServerResponse(response),
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, 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,6 +195,7 @@ 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,
@@ -192,6 +213,7 @@ export async function mountPlayground(container, options) {
192
213
  svelteApp = mount(Playground, {
193
214
  target: targetContainer,
194
215
  props: {
216
+ instance: fd,
195
217
  workflowId,
196
218
  workflow,
197
219
  mode,
@@ -202,7 +224,7 @@ export async function mountPlayground(container, options) {
202
224
  }
203
225
  });
204
226
  }
205
- return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
227
+ return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
206
228
  }
207
229
  /**
208
230
  * Unmount a Playground instance
@@ -225,7 +247,7 @@ export function unmountPlayground(app) {
225
247
  }
226
248
  }
227
249
  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;
250
+ const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, config = {}, height, width, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, pipelineViews, instanceId } = options;
229
251
  if (!workflowId) {
230
252
  throw new Error('workflowId is required for mountPlaygroundStudio()');
231
253
  }
@@ -239,10 +261,12 @@ export async function mountPlaygroundStudio(container, options) {
239
261
  endpointConfig,
240
262
  settings: initialSettings
241
263
  });
264
+ const { fd, ownsInstance } = acquirePlaygroundInstance(instanceId);
242
265
  sizeContainer(container, height, width);
243
266
  const svelteApp = mount(PlaygroundStudio, {
244
267
  target: container,
245
268
  props: {
269
+ instance: fd,
246
270
  workflowId,
247
271
  workflow,
248
272
  mode,
@@ -257,7 +281,7 @@ export async function mountPlaygroundStudio(container, options) {
257
281
  extraPipelineViews: pipelineViews
258
282
  }
259
283
  });
260
- return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
284
+ return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
261
285
  }
262
286
  /**
263
287
  * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
@@ -280,7 +304,7 @@ export async function mountPlaygroundStudio(container, options) {
280
304
  * ```
281
305
  */
282
306
  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;
307
+ 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, instanceId } = options;
284
308
  if (!workflowId) {
285
309
  throw new Error('workflowId is required for mountPlaygroundApp()');
286
310
  }
@@ -297,10 +321,12 @@ export async function mountPlaygroundApp(container, options) {
297
321
  endpointConfig,
298
322
  settings: initialSettings
299
323
  });
324
+ const { fd, ownsInstance } = acquirePlaygroundInstance(instanceId);
300
325
  sizeContainer(container, height, width);
301
326
  const svelteApp = mount(PlaygroundApp, {
302
327
  target: container,
303
328
  props: {
329
+ instance: fd,
304
330
  workflowId,
305
331
  workflow,
306
332
  mode,
@@ -321,5 +347,5 @@ export async function mountPlaygroundApp(container, options) {
321
347
  onSessionNavigate
322
348
  }
323
349
  });
324
- return buildMountedPlayground(svelteApp, workflowId, config, onSessionStatusChange);
350
+ return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
325
351
  }
@@ -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();
@@ -20,31 +20,6 @@ export declare const BUILTIN_NODE_COMPONENTS: NodeComponentRegistration[];
20
20
  * Maps alternative type names to their canonical registration.
21
21
  */
22
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
23
  /**
49
24
  * Get the canonical type for a given type string.
50
25
  * Handles aliases like "default" -> "workflowNode".
@@ -70,7 +45,7 @@ export declare function getBuiltinTypes(): string[];
70
45
  * Type for built-in node types.
71
46
  * Use this when you specifically need a built-in type.
72
47
  */
73
- export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
48
+ export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'atom' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
74
49
  /**
75
50
  * Array of built-in type strings for runtime validation.
76
51
  */
@@ -5,10 +5,11 @@
5
5
  * This module is automatically loaded when the library initializes,
6
6
  * ensuring all built-in node types are available without user action.
7
7
  */
8
- import { nodeComponentRegistry } from './nodeComponentRegistry.js';
8
+ import {} from './nodeComponentRegistry.js';
9
9
  import WorkflowNode from '../components/nodes/WorkflowNode.svelte';
10
10
  import SimpleNode from '../components/nodes/SimpleNode.svelte';
11
11
  import SquareNode from '../components/nodes/SquareNode.svelte';
12
+ import AtomNode from '../components/nodes/AtomNode.svelte';
12
13
  import ToolNode from '../components/nodes/ToolNode.svelte';
13
14
  import GatewayNode from '../components/nodes/GatewayNode.svelte';
14
15
  import NotesNode from '../components/nodes/NotesNode.svelte';
@@ -56,6 +57,17 @@ export const BUILTIN_NODE_COMPONENTS = [
56
57
  statusPosition: 'top-right',
57
58
  statusSize: 'sm'
58
59
  },
60
+ {
61
+ type: 'atom',
62
+ displayName: 'Atom (Minimal Value/Transform)',
63
+ description: 'Low-chrome label-only node for constants and inline transforms',
64
+ component: AtomNode,
65
+ icon: 'mdi:circle-small',
66
+ category: 'visual',
67
+ source: FLOWDROP_SOURCE,
68
+ statusPosition: 'top-right',
69
+ statusSize: 'sm'
70
+ },
59
71
  {
60
72
  type: 'tool',
61
73
  displayName: 'Tool (Agent Tool)',
@@ -119,49 +131,6 @@ export const BUILTIN_NODE_COMPONENTS = [
119
131
  export const BUILTIN_TYPE_ALIASES = {
120
132
  default: 'workflowNode'
121
133
  };
122
- /**
123
- * Track whether built-in nodes have been registered.
124
- * Prevents duplicate registration on hot reload.
125
- */
126
- let builtinsRegistered = false;
127
- /**
128
- * Initialize the registry with built-in components.
129
- * This is called automatically when the library loads.
130
- *
131
- * Safe to call multiple times - will only register once.
132
- *
133
- * @example
134
- * ```typescript
135
- * // Usually not needed - called automatically
136
- * // But can be called manually if needed
137
- * registerBuiltinNodes();
138
- * ```
139
- */
140
- export function registerBuiltinNodes() {
141
- if (builtinsRegistered) {
142
- return;
143
- }
144
- // Register all built-in components
145
- nodeComponentRegistry.registerAll(BUILTIN_NODE_COMPONENTS, true);
146
- // Set the default type
147
- nodeComponentRegistry.setDefaultType('workflowNode');
148
- builtinsRegistered = true;
149
- }
150
- /**
151
- * Check if built-in nodes have been registered.
152
- *
153
- * @returns true if registerBuiltinNodes() has been called
154
- */
155
- export function areBuiltinsRegistered() {
156
- return builtinsRegistered;
157
- }
158
- /**
159
- * Reset the registration state.
160
- * Primarily useful for testing.
161
- */
162
- export function resetBuiltinRegistration() {
163
- builtinsRegistered = false;
164
- }
165
134
  /**
166
135
  * Get the canonical type for a given type string.
167
136
  * Handles aliases like "default" -> "workflowNode".
@@ -197,15 +166,10 @@ export const BUILTIN_NODE_TYPES = [
197
166
  'workflowNode',
198
167
  'simple',
199
168
  'square',
169
+ 'atom',
200
170
  'tool',
201
171
  'gateway',
202
172
  'note',
203
173
  'terminal',
204
174
  'idea'
205
175
  ];
206
- // Sync registration flag with registry.clear() for test isolation
207
- nodeComponentRegistry.onClear(() => {
208
- builtinsRegistered = false;
209
- });
210
- // Auto-register built-ins when this module is imported
211
- registerBuiltinNodes();
@@ -2,7 +2,6 @@
2
2
  * Node Component Registry Module
3
3
  * Exports all registry-related functionality.
4
4
  */
5
- export { BaseRegistry } from './BaseRegistry.js';
6
- export { nodeComponentRegistry, createNamespacedType, parseNamespacedType, type NodeComponentProps, type NodeTypeInfo, type NodeComponentRegistration, type NodeComponentCategory, type StatusPosition, type StatusSize, type NodeRegistrationFilter } from './nodeComponentRegistry.js';
7
- export { BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, resetBuiltinRegistration, resolveBuiltinAlias, isBuiltinType, getBuiltinTypes, type BuiltinNodeType } from './builtinNodes.js';
8
- export { registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount, type FlowDropPluginConfig, type PluginNodeDefinition, type PluginRegistrationResult } from './plugin.js';
5
+ export { BaseRegistry } from './BaseRegistry.svelte.js';
6
+ export { NodeComponentRegistry, createNamespacedType, parseNamespacedType, createPlugin, isValidNamespace, type NodeComponentProps, type NodeTypeInfo, type NodeComponentRegistration, type NodeComponentCategory, type StatusPosition, type StatusSize, type NodeRegistrationFilter, type FlowDropPluginConfig, type PluginNodeDefinition, type PluginRegistrationResult } from './nodeComponentRegistry.js';
7
+ export { BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, resolveBuiltinAlias, isBuiltinType, getBuiltinTypes, type BuiltinNodeType } from './builtinNodes.js';
@@ -3,10 +3,8 @@
3
3
  * Exports all registry-related functionality.
4
4
  */
5
5
  // Base registry
6
- export { BaseRegistry } from './BaseRegistry.js';
7
- // Core registry
8
- export { nodeComponentRegistry, createNamespacedType, parseNamespacedType } from './nodeComponentRegistry.js';
6
+ export { BaseRegistry } from './BaseRegistry.svelte.js';
7
+ // Core registry (the class — instances live on `fd.nodes`)
8
+ export { NodeComponentRegistry, createNamespacedType, parseNamespacedType, createPlugin, isValidNamespace } from './nodeComponentRegistry.js';
9
9
  // Built-in nodes
10
- export { BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, resetBuiltinRegistration, resolveBuiltinAlias, isBuiltinType, getBuiltinTypes } from './builtinNodes.js';
11
- // Plugin system
12
- export { registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from './plugin.js';
10
+ export { BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, resolveBuiltinAlias, isBuiltinType, getBuiltinTypes } from './builtinNodes.js';