@d34dman/flowdrop 0.0.61 → 0.0.62

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 (204) hide show
  1. package/README.md +6 -0
  2. package/dist/adapters/WorkflowAdapter.d.ts +1 -1
  3. package/dist/adapters/agentspec/AgentSpecAdapter.js +3 -1
  4. package/dist/api/client.d.ts +4 -0
  5. package/dist/api/client.js +6 -1
  6. package/dist/api/enhanced-client.js +7 -6
  7. package/dist/components/App.svelte +143 -219
  8. package/dist/components/CanvasBanner.stories.svelte +25 -0
  9. package/dist/components/CanvasBanner.stories.svelte.d.ts +27 -0
  10. package/dist/components/CanvasBanner.svelte +2 -2
  11. package/dist/components/ConfigForm.svelte +37 -36
  12. package/dist/components/ConfigPanel.stories.svelte +38 -0
  13. package/dist/components/ConfigPanel.stories.svelte.d.ts +27 -0
  14. package/dist/components/ConfigPanel.svelte +2 -2
  15. package/dist/components/ConnectionLine.svelte +2 -2
  16. package/dist/components/FlowDropZone.svelte +18 -2
  17. package/dist/components/FlowDropZone.svelte.d.ts +2 -0
  18. package/dist/components/LoadingSpinner.stories.svelte +30 -0
  19. package/dist/components/LoadingSpinner.stories.svelte.d.ts +27 -0
  20. package/dist/components/Logo.stories.svelte +22 -0
  21. package/dist/components/Logo.stories.svelte.d.ts +27 -0
  22. package/dist/components/Logo.svelte +33 -13
  23. package/dist/components/Logo.svelte.d.ts +1 -1
  24. package/dist/components/MarkdownDisplay.stories.svelte +21 -0
  25. package/dist/components/MarkdownDisplay.stories.svelte.d.ts +27 -0
  26. package/dist/components/MarkdownDisplay.svelte +4 -3
  27. package/dist/components/Navbar.stories.svelte +41 -0
  28. package/dist/components/Navbar.stories.svelte.d.ts +27 -0
  29. package/dist/components/Navbar.svelte +4 -4
  30. package/dist/components/NodeSidebar.svelte +12 -12
  31. package/dist/components/NodeStatusOverlay.stories.svelte +74 -0
  32. package/dist/components/NodeStatusOverlay.stories.svelte.d.ts +27 -0
  33. package/dist/components/PipelineStatus.svelte +11 -4
  34. package/dist/components/PortCoordinateTracker.svelte +1 -1
  35. package/dist/components/SchemaForm.stories.svelte +101 -0
  36. package/dist/components/SchemaForm.stories.svelte.d.ts +27 -0
  37. package/dist/components/SchemaForm.svelte +17 -12
  38. package/dist/components/SettingsModal.svelte +3 -3
  39. package/dist/components/SettingsPanel.svelte +23 -22
  40. package/dist/components/StatusIcon.stories.svelte +60 -0
  41. package/dist/components/StatusIcon.stories.svelte.d.ts +27 -0
  42. package/dist/components/StatusIcon.svelte +7 -0
  43. package/dist/components/StatusLabel.stories.svelte +17 -0
  44. package/dist/components/StatusLabel.stories.svelte.d.ts +27 -0
  45. package/dist/components/ThemeToggle.stories.svelte +25 -0
  46. package/dist/components/ThemeToggle.stories.svelte.d.ts +27 -0
  47. package/dist/components/ThemeToggle.svelte +8 -8
  48. package/dist/components/UniversalNode.svelte +1 -1
  49. package/dist/components/WorkflowEditor.svelte +298 -294
  50. package/dist/components/form/FormAutocomplete.svelte +20 -19
  51. package/dist/components/form/FormCheckboxGroup.stories.svelte +28 -0
  52. package/dist/components/form/FormCheckboxGroup.stories.svelte.d.ts +27 -0
  53. package/dist/components/form/FormField.svelte +3 -3
  54. package/dist/components/form/FormFieldLight.svelte +2 -2
  55. package/dist/components/form/FormFieldWrapper.stories.svelte +31 -0
  56. package/dist/components/form/FormFieldWrapper.stories.svelte.d.ts +27 -0
  57. package/dist/components/form/FormFieldset.svelte +7 -7
  58. package/dist/components/form/FormNumberField.stories.svelte +33 -0
  59. package/dist/components/form/FormNumberField.stories.svelte.d.ts +27 -0
  60. package/dist/components/form/FormRangeField.stories.svelte +31 -0
  61. package/dist/components/form/FormRangeField.stories.svelte.d.ts +27 -0
  62. package/dist/components/form/FormSelect.stories.svelte +50 -0
  63. package/dist/components/form/FormSelect.stories.svelte.d.ts +27 -0
  64. package/dist/components/form/FormTemplateEditor.svelte +2 -1
  65. package/dist/components/form/FormTextField.stories.svelte +30 -0
  66. package/dist/components/form/FormTextField.stories.svelte.d.ts +27 -0
  67. package/dist/components/form/FormTextarea.stories.svelte +31 -0
  68. package/dist/components/form/FormTextarea.stories.svelte.d.ts +27 -0
  69. package/dist/components/form/FormToggle.stories.svelte +30 -0
  70. package/dist/components/form/FormToggle.stories.svelte.d.ts +27 -0
  71. package/dist/components/form/FormUISchemaRenderer.svelte +1 -1
  72. package/dist/components/form/types.d.ts +15 -47
  73. package/dist/components/interrupt/ChoicePrompt.stories.svelte +43 -0
  74. package/dist/components/interrupt/ChoicePrompt.stories.svelte.d.ts +27 -0
  75. package/dist/components/interrupt/ChoicePrompt.svelte +24 -24
  76. package/dist/components/interrupt/ConfirmationPrompt.stories.svelte +49 -0
  77. package/dist/components/interrupt/ConfirmationPrompt.stories.svelte.d.ts +27 -0
  78. package/dist/components/interrupt/ConfirmationPrompt.svelte +19 -19
  79. package/dist/components/interrupt/FormPrompt.svelte +15 -15
  80. package/dist/components/interrupt/InterruptBubble.svelte +202 -236
  81. package/dist/components/interrupt/InterruptBubble.svelte.d.ts +1 -1
  82. package/dist/components/interrupt/ReviewPrompt.stories.svelte +46 -0
  83. package/dist/components/interrupt/ReviewPrompt.stories.svelte.d.ts +27 -0
  84. package/dist/components/interrupt/ReviewPrompt.svelte +842 -0
  85. package/dist/components/interrupt/ReviewPrompt.svelte.d.ts +23 -0
  86. package/dist/components/interrupt/TextInputPrompt.stories.svelte +34 -0
  87. package/dist/components/interrupt/TextInputPrompt.stories.svelte.d.ts +27 -0
  88. package/dist/components/interrupt/TextInputPrompt.svelte +21 -21
  89. package/dist/components/nodes/GatewayNode.stories.svelte +76 -0
  90. package/dist/components/nodes/GatewayNode.stories.svelte.d.ts +26 -0
  91. package/dist/components/nodes/GatewayNode.svelte +19 -17
  92. package/dist/components/nodes/IdeaNode.stories.svelte +48 -0
  93. package/dist/components/nodes/IdeaNode.stories.svelte.d.ts +26 -0
  94. package/dist/components/nodes/IdeaNode.svelte +10 -26
  95. package/dist/components/nodes/NotesNode.stories.svelte +69 -0
  96. package/dist/components/nodes/NotesNode.stories.svelte.d.ts +26 -0
  97. package/dist/components/nodes/NotesNode.svelte +8 -8
  98. package/dist/components/nodes/SimpleNode.stories.svelte +101 -0
  99. package/dist/components/nodes/SimpleNode.stories.svelte.d.ts +26 -0
  100. package/dist/components/nodes/SimpleNode.svelte +16 -24
  101. package/dist/components/nodes/SquareNode.stories.svelte +56 -0
  102. package/dist/components/nodes/SquareNode.stories.svelte.d.ts +26 -0
  103. package/dist/components/nodes/SquareNode.svelte +13 -21
  104. package/dist/components/nodes/TerminalNode.stories.svelte +25 -0
  105. package/dist/components/nodes/TerminalNode.stories.svelte.d.ts +26 -0
  106. package/dist/components/nodes/TerminalNode.svelte +6 -6
  107. package/dist/components/nodes/ToolNode.stories.svelte +71 -0
  108. package/dist/components/nodes/ToolNode.stories.svelte.d.ts +26 -0
  109. package/dist/components/nodes/ToolNode.svelte +7 -15
  110. package/dist/components/nodes/WorkflowNode.stories.svelte +50 -0
  111. package/dist/components/nodes/WorkflowNode.stories.svelte.d.ts +26 -0
  112. package/dist/components/nodes/WorkflowNode.svelte +13 -13
  113. package/dist/components/playground/ChatPanel.svelte +48 -48
  114. package/dist/components/playground/ExecutionLogs.svelte +23 -23
  115. package/dist/components/playground/InputCollector.svelte +24 -24
  116. package/dist/components/playground/MessageBubble.stories.svelte +49 -0
  117. package/dist/components/playground/MessageBubble.stories.svelte.d.ts +27 -0
  118. package/dist/components/playground/MessageBubble.svelte +49 -46
  119. package/dist/components/playground/Playground.svelte +194 -129
  120. package/dist/components/playground/PlaygroundModal.svelte +5 -5
  121. package/dist/components/playground/SessionManager.svelte +26 -26
  122. package/dist/config/constants.d.ts +22 -0
  123. package/dist/config/constants.js +22 -0
  124. package/dist/config/endpoints.d.ts +19 -0
  125. package/dist/config/runtimeConfig.js +2 -1
  126. package/dist/core/index.d.ts +5 -2
  127. package/dist/core/index.js +9 -1
  128. package/dist/editor/index.d.ts +13 -9
  129. package/dist/editor/index.js +15 -11
  130. package/dist/form/code.d.ts +2 -1
  131. package/dist/form/code.js +1 -3
  132. package/dist/form/markdown.d.ts +2 -1
  133. package/dist/form/markdown.js +1 -3
  134. package/dist/helpers/workflowEditorHelper.js +13 -9
  135. package/dist/mocks/app-forms.js +1 -0
  136. package/dist/mocks/app-navigation.js +3 -1
  137. package/dist/mocks/app-stores.d.ts +4 -4
  138. package/dist/playground/index.d.ts +4 -3
  139. package/dist/playground/index.js +12 -10
  140. package/dist/playground/mount.js +6 -13
  141. package/dist/services/agentSpecExecutionService.js +2 -1
  142. package/dist/services/api.js +10 -18
  143. package/dist/services/apiVariableService.js +2 -1
  144. package/dist/services/autoSaveService.d.ts +3 -3
  145. package/dist/services/autoSaveService.js +21 -17
  146. package/dist/services/categoriesApi.js +13 -5
  147. package/dist/services/draftStorage.js +5 -4
  148. package/dist/services/dynamicSchemaService.js +4 -4
  149. package/dist/services/globalSave.d.ts +60 -11
  150. package/dist/services/globalSave.js +160 -83
  151. package/dist/services/historyService.d.ts +2 -1
  152. package/dist/services/historyService.js +7 -3
  153. package/dist/services/interruptService.js +9 -8
  154. package/dist/services/nodeExecutionService.js +14 -6
  155. package/dist/services/playgroundService.js +2 -1
  156. package/dist/services/portConfigApi.js +11 -7
  157. package/dist/services/toastService.d.ts +1 -1
  158. package/dist/services/toastService.js +6 -5
  159. package/dist/services/variableService.js +3 -2
  160. package/dist/settings/index.d.ts +1 -1
  161. package/dist/settings/index.js +1 -1
  162. package/dist/stores/{categoriesStore.d.ts → categoriesStore.svelte.d.ts} +3 -3
  163. package/dist/stores/{categoriesStore.js → categoriesStore.svelte.js} +15 -18
  164. package/dist/stores/editorStateMachine.svelte.d.ts +42 -0
  165. package/dist/stores/editorStateMachine.svelte.js +132 -0
  166. package/dist/stores/{historyStore.d.ts → historyStore.svelte.d.ts} +18 -15
  167. package/dist/stores/{historyStore.js → historyStore.svelte.js} +40 -21
  168. package/dist/stores/{interruptStore.d.ts → interruptStore.svelte.d.ts} +16 -15
  169. package/dist/stores/{interruptStore.js → interruptStore.svelte.js} +85 -94
  170. package/dist/stores/{playgroundStore.d.ts → playgroundStore.svelte.d.ts} +41 -33
  171. package/dist/stores/{playgroundStore.js → playgroundStore.svelte.js} +164 -84
  172. package/dist/stores/{portCoordinateStore.d.ts → portCoordinateStore.svelte.d.ts} +10 -4
  173. package/dist/stores/{portCoordinateStore.js → portCoordinateStore.svelte.js} +38 -35
  174. package/dist/stores/{settingsStore.d.ts → settingsStore.svelte.d.ts} +45 -28
  175. package/dist/stores/{settingsStore.js → settingsStore.svelte.js} +169 -128
  176. package/dist/stores/{workflowStore.d.ts → workflowStore.svelte.d.ts} +101 -65
  177. package/dist/stores/{workflowStore.js → workflowStore.svelte.js} +285 -239
  178. package/dist/stories/CanvasDecorator.svelte +50 -0
  179. package/dist/stories/CanvasDecorator.svelte.d.ts +8 -0
  180. package/dist/stories/NodeDecorator.svelte +74 -0
  181. package/dist/stories/NodeDecorator.svelte.d.ts +8 -0
  182. package/dist/stories/utils.d.ts +93 -0
  183. package/dist/stories/utils.js +122 -0
  184. package/dist/styles/base.css +114 -61
  185. package/dist/styles/toast.css +2 -2
  186. package/dist/styles/tokens.css +250 -185
  187. package/dist/svelte-app.d.ts +0 -6
  188. package/dist/svelte-app.js +13 -31
  189. package/dist/types/index.d.ts +2 -0
  190. package/dist/types/interrupt.d.ts +89 -5
  191. package/dist/types/interrupt.js +13 -1
  192. package/dist/types/playground.d.ts +5 -0
  193. package/dist/types/settings.js +1 -1
  194. package/dist/utils/colors.js +4 -4
  195. package/dist/utils/connections.js +33 -8
  196. package/dist/utils/icons.js +1 -1
  197. package/dist/utils/logger.d.ts +47 -0
  198. package/dist/utils/logger.js +72 -0
  199. package/dist/utils/nodeWrapper.js +1 -1
  200. package/dist/utils/sanitize.d.ts +19 -0
  201. package/dist/utils/sanitize.js +31 -0
  202. package/dist/utils/validation.d.ts +29 -0
  203. package/dist/utils/validation.js +39 -0
  204. package/package.json +243 -232
package/dist/styles/tokens.css CHANGED
@@ -1,281 +1,339 @@
1
1
  /**
2
2
  * FlowDrop Design Tokens
3
- *
3
+ *
4
4
  * A semantic-first token system with three tiers:
5
5
  * 1. Internal palette (--_*) - Raw color values, not documented for users
6
6
  * 2. Semantic tokens (--fd-*) - The public API for theming
7
7
  * 3. Component tokens - Built using semantic tokens
8
- *
8
+ *
9
9
  * Users customize FlowDrop by overriding --fd-* tokens.
10
- *
10
+ *
11
11
  * @example Quick theming
12
12
  * :root {
13
13
  * --fd-primary: #8b5cf6;
14
14
  * --fd-primary-hover: #7c3aed;
15
15
  * --fd-radius-md: 0.5rem;
16
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
+ * =============================================================================
17
70
  */
18
71
 
19
72
  :root {
20
73
  /* =========================================================================
21
74
  INTERNAL PALETTE (Private - not documented for users)
22
75
  Prefix: --_ indicates internal/private tokens
76
+ @internal — Do NOT override these in consumer stylesheets.
23
77
  ========================================================================= */
24
78
 
25
79
  /* Grays - Tinted scale with subtle blue undertone for modern feel, 9 steps */
26
- --_gray-1: #fafafc;
27
- --_gray-2: #f5f5f8;
28
- --_gray-3: #eaeaef;
29
- --_gray-4: #dcdce4;
30
- --_gray-5: #a3a3ad;
31
- --_gray-6: #71717b;
32
- --_gray-7: #52525c;
33
- --_gray-8: #27272b;
34
- --_gray-9: #18181c;
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 */
35
89
 
36
90
  /* Blue - Primary/interactive color */
37
- --_blue-1: #eff6ff;
38
- --_blue-2: #3b82f6;
39
- --_blue-3: #1d4ed8;
91
+ --_blue-1: #eff6ff; /* @internal */
92
+ --_blue-2: #3b82f6; /* @internal */
93
+ --_blue-3: #1d4ed8; /* @internal */
40
94
 
41
95
  /* Green - Success states */
42
- --_green-1: #f0fdf4;
43
- --_green-2: #22c55e;
44
- --_green-3: #15803d;
96
+ --_green-1: #f0fdf4; /* @internal */
97
+ --_green-2: #22c55e; /* @internal */
98
+ --_green-3: #15803d; /* @internal */
45
99
 
46
100
  /* Red - Error/destructive states */
47
- --_red-1: #fef2f2;
48
- --_red-2: #ef4444;
49
- --_red-3: #b91c1c;
101
+ --_red-1: #fef2f2; /* @internal */
102
+ --_red-2: #ef4444; /* @internal */
103
+ --_red-3: #b91c1c; /* @internal */
50
104
 
51
105
  /* Amber - Warning states */
52
- --_amber-1: #fffbeb;
53
- --_amber-2: #f59e0b;
54
- --_amber-3: #b45309;
106
+ --_amber-1: #fffbeb; /* @internal */
107
+ --_amber-2: #f59e0b; /* @internal */
108
+ --_amber-3: #b45309; /* @internal */
55
109
 
56
110
  /* Violet - Selection/accent */
57
- --_violet-1: #f5f3ff;
58
- --_violet-2: #8b5cf6;
59
- --_violet-3: #6d28d9;
111
+ --_violet-1: #f5f3ff; /* @internal */
112
+ --_violet-2: #8b5cf6; /* @internal */
113
+ --_violet-3: #6d28d9; /* @internal */
60
114
 
61
115
  /* =========================================================================
62
116
  SEMANTIC TOKENS (Public API)
63
- These are the tokens users override for theming
117
+ These are the tokens users override for theming.
118
+ @public — All tokens in this section are safe to override.
64
119
  ========================================================================= */
65
120
 
66
121
  /* ----- SURFACES (Backgrounds) ----- */
67
- --fd-background: #ffffff;
68
- --fd-foreground: var(--_gray-9);
69
- --fd-muted: #f8f8fb;
70
- --fd-muted-foreground: var(--_gray-6);
71
- --fd-subtle: #f0f0f5;
72
- --fd-card: #ffffff;
73
- --fd-card-foreground: var(--_gray-9);
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 */
74
129
 
75
130
  /* ----- HEADER (Distinct header styling) ----- */
76
- --fd-header: #f5f7fa;
77
- --fd-header-foreground: var(--_gray-8);
78
- --fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%);
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 */
79
134
 
80
135
  /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
81
- --fd-surface-tint: rgba(99, 102, 241, 0.02);
136
+ --fd-surface-tint: rgba(99, 102, 241, 0.02); /* @public */
82
137
 
83
138
  /* ----- BORDERS ----- */
84
- --fd-border: var(--_gray-4);
85
- --fd-border-muted: var(--_gray-3);
86
- --fd-border-strong: var(--_gray-5);
87
- --fd-ring: var(--_blue-2);
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 */
88
143
 
89
144
  /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
90
- --fd-node-border: var(--_gray-5);
91
- --fd-node-border-hover: var(--_gray-6);
145
+ --fd-node-border: var(--_gray-5); /* @public */
146
+ --fd-node-border-hover: var(--_gray-6); /* @public */
92
147
 
93
148
  /* ----- PRIMARY (Interactive/Brand) ----- */
94
- --fd-primary: var(--_blue-2);
95
- --fd-primary-hover: var(--_blue-3);
96
- --fd-primary-foreground: #ffffff;
97
- --fd-primary-muted: var(--_blue-1);
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 */
98
153
 
99
154
  /* ----- SECONDARY ----- */
100
- --fd-secondary: var(--_gray-2);
101
- --fd-secondary-hover: var(--_gray-3);
102
- --fd-secondary-foreground: var(--_gray-9);
155
+ --fd-secondary: var(--_gray-2); /* @public */
156
+ --fd-secondary-hover: var(--_gray-3); /* @public */
157
+ --fd-secondary-foreground: var(--_gray-9); /* @public */
103
158
 
104
159
  /* ----- ACCENT ----- */
105
- --fd-accent: var(--_violet-2);
106
- --fd-accent-hover: var(--_violet-3);
107
- --fd-accent-foreground: #ffffff;
108
- --fd-accent-muted: var(--_violet-1);
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 */
109
164
 
110
165
  /* ----- STATUS: SUCCESS ----- */
111
- --fd-success: var(--_green-2);
112
- --fd-success-hover: var(--_green-3);
113
- --fd-success-foreground: #ffffff;
114
- --fd-success-muted: var(--_green-1);
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 */
115
170
 
116
171
  /* ----- STATUS: WARNING ----- */
117
- --fd-warning: var(--_amber-2);
118
- --fd-warning-hover: var(--_amber-3);
119
- --fd-warning-foreground: var(--_gray-9);
120
- --fd-warning-muted: var(--_amber-1);
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 */
121
176
 
122
177
  /* ----- STATUS: ERROR/DESTRUCTIVE ----- */
123
- --fd-error: var(--_red-2);
124
- --fd-error-hover: var(--_red-3);
125
- --fd-error-foreground: #ffffff;
126
- --fd-error-muted: var(--_red-1);
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 */
127
182
 
128
183
  /* ----- STATUS: INFO ----- */
129
- --fd-info: var(--_blue-2);
130
- --fd-info-foreground: #ffffff;
131
- --fd-info-muted: var(--_blue-1);
132
-
133
- /* ----- SPACING SCALE ----- */
134
- --fd-space-0: 0;
135
- --fd-space-1: 0.25rem;
136
- /* 4px */
137
- --fd-space-2: 0.5rem;
138
- /* 8px */
139
- --fd-space-3: 0.75rem;
140
- /* 12px */
141
- --fd-space-4: 1rem;
142
- /* 16px */
143
- --fd-space-5: 1.25rem;
144
- /* 20px */
145
- --fd-space-6: 1.5rem;
146
- /* 24px */
147
- --fd-space-8: 2rem;
148
- /* 32px */
149
- --fd-space-10: 2.5rem;
150
- /* 40px */
151
- --fd-space-12: 3rem;
152
- /* 48px */
153
- --fd-space-16: 4rem;
154
- /* 64px */
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 */
155
204
 
156
205
  /* ----- BORDER RADIUS ----- */
157
- --fd-radius-none: 0;
158
- --fd-radius-sm: 0.25rem;
159
- /* 4px */
160
- --fd-radius-md: 0.375rem;
161
- /* 6px */
162
- --fd-radius-lg: 0.5rem;
163
- /* 8px */
164
- --fd-radius-xl: 0.75rem;
165
- /* 12px */
166
- --fd-radius-2xl: 1rem;
167
- /* 16px */
168
- --fd-radius-full: 9999px;
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 */
169
213
 
170
214
  /* ----- SHADOWS (Refined layered shadows for modern depth) ----- */
171
- --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
172
- --fd-shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04);
173
- --fd-shadow-lg: 0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04);
174
- --fd-shadow-xl: 0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06);
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 */
175
219
 
176
220
  /* ----- FONT SIZES ----- */
177
- --fd-text-xs: 0.75rem;
178
- /* 12px */
179
- --fd-text-sm: 0.875rem;
180
- /* 14px */
181
- --fd-text-base: 1rem;
182
- /* 16px */
183
- --fd-text-lg: 1.125rem;
184
- /* 18px */
185
- --fd-text-xl: 1.25rem;
186
- /* 20px */
187
- --fd-text-2xl: 1.5rem;
188
- /* 24px */
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: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* @public */
238
+
239
+ /* ----- COMPONENT SIZES ----- */
240
+ --fd-size-icon-btn: 1.75rem; /* @internal 28px — may change with component redesigns */
241
+ --fd-size-btn-min: 2.5rem; /* @internal 40px — may change with component redesigns */
242
+ --fd-size-avatar: 2.25rem; /* @internal 36px — may change with component redesigns */
243
+ --fd-size-spinner: 1rem; /* @internal 16px — may change with component redesigns */
189
244
 
190
245
  /* ----- TRANSITIONS ----- */
191
- --fd-transition-fast: 150ms ease;
192
- --fd-transition-normal: 200ms ease;
193
- --fd-transition-slow: 300ms ease;
246
+ --fd-transition-fast: 150ms ease; /* @public */
247
+ --fd-transition-normal: 200ms ease; /* @public */
248
+ --fd-transition-slow: 300ms ease; /* @public */
194
249
 
195
250
  /* =========================================================================
196
251
  COMPONENT TOKENS
197
- These provide fine-grained control while defaulting to semantic tokens
252
+ These provide fine-grained control while defaulting to semantic tokens.
253
+ @public tokens in this section are safe to override.
254
+ @internal tokens may change without notice.
198
255
  ========================================================================= */
199
256
 
200
257
  /* ----- LAYOUT ----- */
201
- --fd-sidebar-width: 320px;
202
- --fd-navbar-height: 60px;
203
- --fd-toolbar-height: 40px;
258
+ --fd-sidebar-width: 320px; /* @internal — controlled programmatically */
259
+ --fd-navbar-height: 60px; /* @internal — controlled programmatically */
260
+ --fd-toolbar-height: 40px; /* @internal — controlled programmatically */
204
261
 
205
262
  /* ----- NODE COLORS (for workflow editor) ----- */
206
- --fd-node-emerald: #10b981;
207
- --fd-node-blue: #2563eb;
208
- --fd-node-amber: #f59e0b;
209
- --fd-node-orange: #f97316;
210
- --fd-node-red: #ef4444;
211
- --fd-node-pink: #ec4899;
212
- --fd-node-indigo: #6366f1;
213
- --fd-node-teal: #14b8a6;
214
- --fd-node-cyan: #06b6d4;
215
- --fd-node-lime: #84cc16;
216
- --fd-node-slate: #64748b;
217
- --fd-node-purple: #9333ea;
263
+ --fd-node-emerald: #10b981; /* @public */
264
+ --fd-node-blue: #2563eb; /* @public */
265
+ --fd-node-amber: #f59e0b; /* @public */
266
+ --fd-node-orange: #f97316; /* @public */
267
+ --fd-node-red: #ef4444; /* @public */
268
+ --fd-node-pink: #ec4899; /* @public */
269
+ --fd-node-indigo: #6366f1; /* @public */
270
+ --fd-node-teal: #14b8a6; /* @public */
271
+ --fd-node-cyan: #06b6d4; /* @public */
272
+ --fd-node-lime: #84cc16; /* @public */
273
+ --fd-node-slate: #64748b; /* @public */
274
+ --fd-node-purple: #9333ea; /* @public */
218
275
 
219
276
  /** Icon on node squircle: dark in light theme, white in dark theme */
220
- --fd-node-icon: var(--_gray-9);
277
+ --fd-node-icon: var(--_gray-9); /* @public */
221
278
  /** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */
222
- --fd-node-icon-bg-opacity: 20%;
223
- --fd-node-icon-bg-opacity-hover: 50%;
279
+ --fd-node-icon-bg-opacity: 20%; /* @public */
280
+ --fd-node-icon-bg-opacity-hover: 50%; /* @public */
224
281
 
225
282
  /* ----- EDGE TOKENS ----- */
226
- --fd-edge-trigger: var(--_gray-9);
227
- --fd-edge-trigger-hover: var(--_gray-9);
228
- --fd-edge-trigger-selected: var(--_violet-2);
229
- --fd-edge-trigger-width: 2px;
230
- --fd-edge-trigger-width-hover: 3px;
231
-
232
- --fd-edge-tool: var(--_amber-2);
233
- --fd-edge-tool-hover: var(--_amber-3);
234
- --fd-edge-tool-selected: var(--_violet-2);
235
-
236
- --fd-edge-data: var(--_gray-5);
237
- --fd-edge-data-hover: var(--_gray-6);
238
- --fd-edge-data-selected: var(--_violet-2);
239
-
240
- --fd-edge-loopback: var(--_gray-6);
241
- --fd-edge-loopback-hover: var(--_gray-7);
242
- --fd-edge-loopback-selected: var(--_violet-2);
243
- --fd-edge-loopback-width: 1.5px;
244
- --fd-edge-loopback-width-hover: 2.5px;
245
- --fd-edge-loopback-dasharray: 5 5;
246
- --fd-edge-loopback-opacity: 0.85;
283
+ --fd-edge-trigger: var(--_gray-9); /* @public */
284
+ --fd-edge-trigger-hover: var(--_gray-9); /* @public */
285
+ --fd-edge-trigger-selected: var(--_violet-2); /* @public */
286
+ --fd-edge-trigger-width: 2px; /* @public */
287
+ --fd-edge-trigger-width-hover: 3px; /* @public */
288
+
289
+ --fd-edge-tool: var(--_amber-2); /* @public */
290
+ --fd-edge-tool-hover: var(--_amber-3); /* @public */
291
+ --fd-edge-tool-selected: var(--_violet-2); /* @public */
292
+
293
+ --fd-edge-data: var(--_gray-5); /* @public */
294
+ --fd-edge-data-hover: var(--_gray-6); /* @public */
295
+ --fd-edge-data-selected: var(--_violet-2); /* @public */
296
+
297
+ --fd-edge-loopback: var(--_gray-6); /* @public */
298
+ --fd-edge-loopback-hover: var(--_gray-7); /* @public */
299
+ --fd-edge-loopback-selected: var(--_violet-2); /* @public */
300
+ --fd-edge-loopback-width: 1.5px; /* @public */
301
+ --fd-edge-loopback-width-hover: 2.5px; /* @public */
302
+ --fd-edge-loopback-dasharray: 5 5; /* @public */
303
+ --fd-edge-loopback-opacity: 0.85; /* @public */
247
304
 
248
305
  /* ----- SCROLLBAR COLORS ----- */
249
- --fd-scrollbar-thumb: var(--_gray-4);
250
- --fd-scrollbar-thumb-hover: var(--_gray-5);
251
- --fd-scrollbar-track: var(--_gray-2);
306
+ --fd-scrollbar-thumb: var(--_gray-4); /* @internal */
307
+ --fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */
308
+ --fd-scrollbar-track: var(--_gray-2); /* @internal */
252
309
 
253
310
  /* ----- BACKDROP/OVERLAY ----- */
254
- --fd-backdrop: rgba(255, 255, 255, 0.8);
255
- --fd-backdrop-blur: blur(8px);
311
+ --fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */
312
+ --fd-backdrop-blur: blur(8px); /* @internal */
256
313
 
257
314
  /* ----- HANDLE (Node connection points) ----- */
258
315
  /* White ring around handles for contrast against node backgrounds */
259
- --fd-handle-border: #ffffff;
316
+ --fd-handle-border: #ffffff; /* @public */
260
317
  /* Outer size = connection/hit area (px); visual = visible circle (px) */
261
- --fd-handle-size: 20px;
262
- --fd-handle-visual-size: 12px;
318
+ --fd-handle-size: 20px; /* @public */
319
+ --fd-handle-visual-size: 12px; /* @public */
320
+ --fd-handle-offset: calc(-1 * var(--fd-handle-size) / 2); /* @internal — half handle size for edge positioning */
263
321
 
264
322
  /* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
265
- --fd-node-grid-step: 10;
266
- --fd-node-default-width: 290px;
267
- --fd-node-header-height: 60px;
268
- --fd-node-header-title-height: 40px;
269
- --fd-node-header-desc-line: 20px;
270
- --fd-node-header-gap: 10px;
271
- --fd-node-port-row-height: 20px;
272
- --fd-node-terminal-size: 80px;
273
- --fd-node-square-size: 80px;
274
- --fd-node-simple-height: 80px;
275
- --fd-node-tool-min-height: 80px;
323
+ --fd-node-grid-step: 10; /* @internal — layout algorithm detail */
324
+ --fd-node-default-width: 290px; /* @public */
325
+ --fd-node-header-height: 60px; /* @public */
326
+ --fd-node-header-title-height: 40px; /* @internal */
327
+ --fd-node-header-desc-line: 20px; /* @internal */
328
+ --fd-node-header-gap: 10px; /* @internal */
329
+ --fd-node-port-row-height: 20px; /* @internal */
330
+ --fd-node-terminal-size: 80px; /* @public */
331
+ --fd-node-square-size: 80px; /* @public */
332
+ --fd-node-simple-height: 80px; /* @public */
333
+ --fd-node-tool-min-height: 80px; /* @public */
276
334
 
277
335
  /* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */
278
- --fd-layout-background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%);
336
+ --fd-layout-background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%); /* @public */
279
337
  }
280
338
 
281
339
  /* =========================================================================
@@ -310,6 +368,7 @@
310
368
  --fd-border: #3a3a40;
311
369
  --fd-border-muted: #2e2e33;
312
370
  --fd-border-strong: #4a4a52;
371
+ --fd-ring: #60a5fa;
313
372
 
314
373
  /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
315
374
  --fd-node-border: #4a4a52;
@@ -372,6 +431,7 @@
372
431
 
373
432
  /* ----- STATUS: INFO ----- */
374
433
  --fd-info: #60a5fa;
434
+ --fd-info-hover: #93c5fd;
375
435
  --fd-info-foreground: var(--_gray-9);
376
436
  --fd-info-muted: rgba(59, 130, 246, 0.12);
377
437
 
@@ -392,10 +452,15 @@
392
452
  /* ----- EDGE TOKENS (adjusted for dark mode visibility) ----- */
393
453
  --fd-edge-trigger: var(--_gray-3);
394
454
  --fd-edge-trigger-hover: var(--_gray-2);
455
+ --fd-edge-trigger-selected: #a78bfa;
395
456
  --fd-edge-data: var(--_gray-5);
396
457
  --fd-edge-data-hover: var(--_gray-4);
458
+ --fd-edge-data-selected: #a78bfa;
459
+ --fd-edge-tool-hover: #fbbf24;
460
+ --fd-edge-tool-selected: #a78bfa;
397
461
  --fd-edge-loopback: var(--_gray-5);
398
462
  --fd-edge-loopback-hover: var(--_gray-4);
463
+ --fd-edge-loopback-selected: #a78bfa;
399
464
 
400
465
  /* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
401
466
  --fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
package/dist/svelte-app.d.ts CHANGED
@@ -13,12 +13,6 @@ import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js'
13
13
  import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
14
14
  import './registry/builtinFormats.js';
15
15
  import type { PartialSettings } from './types/settings.js';
16
- declare global {
17
- interface Window {
18
- flowdropSave?: () => Promise<void>;
19
- flowdropExport?: () => void;
20
- }
21
- }
22
16
  /**
23
17
  * Navbar action configuration
24
18
  */
package/dist/svelte-app.js CHANGED
@@ -15,11 +15,13 @@ import { initializePortCompatibility } from './utils/connections.js';
15
15
  import { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
16
16
  import { fetchPortConfig } from './services/portConfigApi.js';
17
17
  import { fetchCategories } from './services/categoriesApi.js';
18
- import { initializeCategories } from './stores/categoriesStore.js';
19
- import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
18
+ import { initializeCategories } from './stores/categoriesStore.svelte.js';
19
+ import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.svelte.js';
20
20
  import { DraftAutoSaveManager, getDraftStorageKey } from './services/draftStorage.js';
21
21
  import { mergeFeatures } from './types/events.js';
22
- import { initializeSettings } from './stores/settingsStore.js';
22
+ import { initializeSettings } from './stores/settingsStore.svelte.js';
23
+ import { logger } from './utils/logger.js';
24
+ import { globalSaveWorkflow, globalExportWorkflow } from './services/globalSave.js';
23
25
  /**
24
26
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
25
27
  *
@@ -85,7 +87,7 @@ export async function mountFlowDropApp(container, options = {}) {
85
87
  finalPortConfig = await fetchPortConfig(config);
86
88
  }
87
89
  catch (error) {
88
- console.warn('Failed to fetch port config from API, using default:', error);
90
+ logger.warn('Failed to fetch port config from API, using default:', error);
89
91
  finalPortConfig = DEFAULT_PORT_CONFIG;
90
92
  }
91
93
  }
@@ -103,7 +105,7 @@ export async function mountFlowDropApp(container, options = {}) {
103
105
  initializeCategories(fetchedCategories);
104
106
  }
105
107
  catch (error) {
106
- console.warn('Failed to fetch categories from API, using defaults:', error);
108
+ logger.warn('Failed to fetch categories from API, using defaults:', error);
107
109
  }
108
110
  }
109
111
  // Set up event handler callbacks in the store
@@ -189,20 +191,10 @@ export async function mountFlowDropApp(container, options = {}) {
189
191
  },
190
192
  getWorkflow: () => getWorkflowFromStore(),
191
193
  save: async () => {
192
- if (typeof window !== 'undefined' && window.flowdropSave) {
193
- await window.flowdropSave();
194
- }
195
- else {
196
- console.warn('⚠️ Save functionality not available');
197
- }
194
+ await globalSaveWorkflow();
198
195
  },
199
196
  export: () => {
200
- if (typeof window !== 'undefined' && window.flowdropExport) {
201
- window.flowdropExport();
202
- }
203
- else {
204
- console.warn('⚠️ Export functionality not available');
205
- }
197
+ globalExportWorkflow();
206
198
  }
207
199
  };
208
200
  return mountedApp;
@@ -245,7 +237,7 @@ export async function mountWorkflowEditor(container, options = {}) {
245
237
  finalPortConfig = await fetchPortConfig(config);
246
238
  }
247
239
  catch (error) {
248
- console.warn('Failed to fetch port config from API, using default:', error);
240
+ logger.warn('Failed to fetch port config from API, using default:', error);
249
241
  finalPortConfig = DEFAULT_PORT_CONFIG;
250
242
  }
251
243
  }
@@ -263,7 +255,7 @@ export async function mountWorkflowEditor(container, options = {}) {
263
255
  initializeCategories(fetchedCategories);
264
256
  }
265
257
  catch (error) {
266
- console.warn('Failed to fetch categories from API, using defaults:', error);
258
+ logger.warn('Failed to fetch categories from API, using defaults:', error);
267
259
  }
268
260
  }
269
261
  // Create the Svelte component
@@ -283,20 +275,10 @@ export async function mountWorkflowEditor(container, options = {}) {
283
275
  markAsSaved: () => markAsSaved(),
284
276
  getWorkflow: () => getWorkflowFromStore(),
285
277
  save: async () => {
286
- if (typeof window !== 'undefined' && window.flowdropSave) {
287
- await window.flowdropSave();
288
- }
289
- else {
290
- console.warn('⚠️ Save functionality not available');
291
- }
278
+ await globalSaveWorkflow();
292
279
  },
293
280
  export: () => {
294
- if (typeof window !== 'undefined' && window.flowdropExport) {
295
- window.flowdropExport();
296
- }
297
- else {
298
- console.warn('⚠️ Export functionality not available');
299
- }
281
+ globalExportWorkflow();
300
282
  }
301
283
  };
302
284
  return mountedApp;