@d34dman/flowdrop 0.0.61 → 0.0.63

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 -298
  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 +7 -7
  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 +18 -33
  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
@@ -26,6 +26,7 @@
26
26
  import type { AutocompleteConfig, AuthProvider } from '../../types/index.js';
27
27
  import type { FieldOption } from './types.js';
28
28
  import { buildFetchHeaders } from '../../utils/fetchWithAuth.js';
29
+ import { logger } from '../../utils/logger.js';
29
30
 
30
31
  /**
31
32
  * Props interface for FormAutocomplete component
@@ -162,7 +163,7 @@
162
163
  */
163
164
  function mapResponse(data: unknown): FieldOption[] {
164
165
  if (!Array.isArray(data)) {
165
- console.warn('[FormAutocomplete] Response is not an array:', data);
166
+ logger.warn('[FormAutocomplete] Response is not an array:', data);
166
167
  return [];
167
168
  }
168
169
 
@@ -228,7 +229,7 @@
228
229
  // Request was cancelled, ignore
229
230
  return;
230
231
  }
231
- console.error('[FormAutocomplete] Fetch error:', err);
232
+ logger.error('[FormAutocomplete] Fetch error:', err);
232
233
  error = err instanceof Error ? err.message : 'Failed to fetch suggestions';
233
234
  suggestions = [];
234
235
  } finally {
@@ -644,7 +645,7 @@
644
645
  </div>
645
646
 
646
647
  <!-- Dropdown popover (uses Popover API to render in top layer, bypassing stacking contexts) -->
647
- <!-- svelte-ignore a11y_no_static_element_interactions -->
648
+ <!-- svelte-ignore a11y_no_static_element_interactions — role="presentation" container; onmousedown prevents focus loss from input -->
648
649
  <div
649
650
  bind:this={popoverElement}
650
651
  id={listboxId}
@@ -675,7 +676,7 @@
675
676
  </li>
676
677
  {:else}
677
678
  {#each suggestions as option, index (option.value)}
678
- <!-- svelte-ignore a11y_click_events_have_key_events -->
679
+ <!-- svelte-ignore a11y_click_events_have_key_events — WAI-ARIA combobox: keyboard nav handled on input, not individual options -->
679
680
  <li
680
681
  id={getOptionId(index)}
681
682
  class="form-autocomplete__option"
@@ -713,9 +714,9 @@
713
714
  display: flex;
714
715
  flex-wrap: wrap;
715
716
  align-items: flex-start;
716
- gap: var(--fd-space-1);
717
+ gap: var(--fd-space-3xs);
717
718
  min-height: 2.625rem;
718
- padding: var(--fd-space-1) 2.5rem var(--fd-space-1) var(--fd-space-3);
719
+ padding: var(--fd-space-3xs) 2.5rem var(--fd-space-3xs) var(--fd-space-md);
719
720
  border: 1px solid var(--fd-border);
720
721
  border-radius: var(--fd-radius-lg);
721
722
  font-size: var(--fd-text-sm);
@@ -751,7 +752,7 @@
751
752
  .form-autocomplete__tags {
752
753
  display: flex;
753
754
  flex-wrap: wrap;
754
- gap: var(--fd-space-1);
755
+ gap: var(--fd-space-3xs);
755
756
  align-items: center;
756
757
  }
757
758
 
@@ -759,8 +760,8 @@
759
760
  .form-autocomplete__tag {
760
761
  display: inline-flex;
761
762
  align-items: center;
762
- gap: var(--fd-space-1);
763
- padding: var(--fd-space-1) var(--fd-space-1) var(--fd-space-1) var(--fd-space-2);
763
+ gap: var(--fd-space-3xs);
764
+ padding: var(--fd-space-3xs) var(--fd-space-3xs) var(--fd-space-3xs) var(--fd-space-xs);
764
765
  background-color: var(--fd-primary-muted);
765
766
  border: 1px solid var(--fd-primary-muted);
766
767
  border-radius: var(--fd-radius-md);
@@ -812,7 +813,7 @@
812
813
 
813
814
  .form-autocomplete__input {
814
815
  width: 100%;
815
- padding: var(--fd-space-1) 0;
816
+ padding: var(--fd-space-3xs) 0;
816
817
  border: none;
817
818
  outline: none;
818
819
  font-size: var(--fd-text-sm);
@@ -828,11 +829,11 @@
828
829
  /* Status icons */
829
830
  .form-autocomplete__icons {
830
831
  position: absolute;
831
- right: var(--fd-space-2);
832
+ right: var(--fd-space-xs);
832
833
  top: 0.625rem;
833
834
  display: flex;
834
835
  align-items: center;
835
- gap: var(--fd-space-1);
836
+ gap: var(--fd-space-3xs);
836
837
  }
837
838
 
838
839
  .form-autocomplete__chevron,
@@ -867,7 +868,7 @@
867
868
  display: flex;
868
869
  align-items: center;
869
870
  justify-content: center;
870
- padding: var(--fd-space-1);
871
+ padding: var(--fd-space-3xs);
871
872
  border: none;
872
873
  border-radius: var(--fd-radius-sm);
873
874
  background: transparent;
@@ -904,7 +905,7 @@
904
905
  /* Dropdown listbox inside popover */
905
906
  .form-autocomplete__listbox {
906
907
  margin: 0;
907
- padding: var(--fd-space-1);
908
+ padding: var(--fd-space-3xs);
908
909
  list-style: none;
909
910
  background-color: var(--fd-background);
910
911
  border: 1px solid var(--fd-border);
@@ -918,7 +919,7 @@
918
919
  display: flex;
919
920
  align-items: center;
920
921
  justify-content: space-between;
921
- padding: var(--fd-space-2) var(--fd-space-3);
922
+ padding: var(--fd-space-xs) var(--fd-space-md);
922
923
  border-radius: var(--fd-radius-md);
923
924
  cursor: pointer;
924
925
  transition: background-color var(--fd-transition-fast);
@@ -951,15 +952,15 @@
951
952
  height: 1rem;
952
953
  color: var(--fd-primary);
953
954
  flex-shrink: 0;
954
- margin-left: var(--fd-space-2);
955
+ margin-left: var(--fd-space-xs);
955
956
  }
956
957
 
957
958
  /* Status messages */
958
959
  .form-autocomplete__status {
959
960
  display: flex;
960
961
  align-items: center;
961
- gap: var(--fd-space-2);
962
- padding: var(--fd-space-3);
962
+ gap: var(--fd-space-xs);
963
+ padding: var(--fd-space-md);
963
964
  font-size: var(--fd-text-sm);
964
965
  color: var(--fd-muted-foreground);
965
966
  }
@@ -989,7 +990,7 @@
989
990
 
990
991
  .form-autocomplete__retry {
991
992
  margin-left: auto;
992
- padding: var(--fd-space-1) var(--fd-space-2);
993
+ padding: var(--fd-space-3xs) var(--fd-space-xs);
993
994
  border: 1px solid var(--fd-error);
994
995
  border-radius: var(--fd-radius-sm);
995
996
  background-color: transparent;
@@ -0,0 +1,28 @@
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
4
+ import { fn } from "storybook/test";
5
+
6
+ const { Story } = defineMeta({
7
+ title: "Form/FormCheckboxGroup",
8
+ component: FormCheckboxGroup,
9
+ tags: ["autodocs"],
10
+ argTypes: {
11
+ disabled: { control: "boolean" },
12
+ },
13
+ args: {
14
+ id: "demo-checkbox-group",
15
+ options: ["Email", "SMS", "Push Notification", "Webhook"],
16
+ value: [],
17
+ onChange: fn(),
18
+ },
19
+ });
20
+ </script>
21
+
22
+ <Story name="No Selection" args={{ value: [] }} />
23
+
24
+ <Story name="Pre-selected" args={{ value: ["Email", "Push Notification"] }} />
25
+
26
+ <Story name="All Selected" args={{ value: ["Email", "SMS", "Push Notification", "Webhook"] }} />
27
+
28
+ <Story name="Disabled" args={{ value: ["Email"], disabled: true }} />
@@ -0,0 +1,27 @@
1
+ export default FormCheckboxGroup;
2
+ type FormCheckboxGroup = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormCheckboxGroup: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }
@@ -44,7 +44,7 @@
44
44
  import type { FieldSchema } from './types.js';
45
45
  import { getSchemaOptions } from './types.js';
46
46
  import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
47
- import { resolvedTheme } from '../../stores/settingsStore.js';
47
+ import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
48
48
 
49
49
  interface Props {
50
50
  /** Unique key/id for the field */
@@ -346,7 +346,7 @@
346
346
  placeholder={schema.placeholder ?? '{}'}
347
347
  {required}
348
348
  height={(schema.height as string | undefined) ?? '200px'}
349
- darkTheme={(schema.darkTheme as boolean | undefined) ?? $resolvedTheme === 'dark'}
349
+ darkTheme={(schema.darkTheme as boolean | undefined) ?? getResolvedTheme() === 'dark'}
350
350
  autoFormat={(schema.autoFormat as boolean | undefined) ?? true}
351
351
  ariaDescribedBy={descriptionId}
352
352
  disabled={isReadOnly}
@@ -374,7 +374,7 @@
374
374
  'Enter your template here...\nUse {{ variable }} for dynamic values.'}
375
375
  {required}
376
376
  height={(schema.height as string | undefined) ?? '250px'}
377
- darkTheme={(schema.darkTheme as boolean | undefined) ?? $resolvedTheme === 'dark'}
377
+ darkTheme={(schema.darkTheme as boolean | undefined) ?? getResolvedTheme() === 'dark'}
378
378
  variables={schema.variables}
379
379
  placeholderExample={(schema.placeholderExample as string | undefined) ??
380
380
  'Hello {{ name }}, your order #{{ order_id }} is ready!'}
@@ -43,7 +43,7 @@
43
43
  import FormCheckboxGroup from './FormCheckboxGroup.svelte';
44
44
  import FormArray from './FormArray.svelte';
45
45
  import { resolveFieldComponent } from '../../form/fieldRegistry.js';
46
- import { resolvedTheme } from '../../stores/settingsStore.js';
46
+ import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
47
47
  import type { FieldSchema } from './types.js';
48
48
  import { getSchemaOptions } from './types.js';
49
49
 
@@ -236,7 +236,7 @@
236
236
  {required}
237
237
  ariaDescribedBy={descriptionId}
238
238
  height={schema.height as string | undefined}
239
- darkTheme={schema.darkTheme ?? $resolvedTheme === 'dark'}
239
+ darkTheme={schema.darkTheme ?? getResolvedTheme() === 'dark'}
240
240
  autoFormat={schema.autoFormat as boolean | undefined}
241
241
  showToolbar={schema.showToolbar as boolean | undefined}
242
242
  showStatusBar={schema.showStatusBar as boolean | undefined}
@@ -0,0 +1,31 @@
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import FormFieldWrapper from "./FormFieldWrapper.svelte";
4
+
5
+ const { Story } = defineMeta({
6
+ title: "Form/FormFieldWrapper",
7
+ component: FormFieldWrapper,
8
+ tags: ["autodocs"],
9
+ argTypes: {
10
+ label: { control: "text" },
11
+ required: { control: "boolean" },
12
+ description: { control: "text" },
13
+ },
14
+ args: {
15
+ id: "demo-wrapper",
16
+ label: "Field Label",
17
+ },
18
+ });
19
+ </script>
20
+
21
+ <Story name="Default" args={{ label: "Username" }}>
22
+ <input type="text" id="demo-wrapper" placeholder="Enter username" style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);" />
23
+ </Story>
24
+
25
+ <Story name="With Description" args={{ label: "Email", description: "We'll never share your email with anyone.", required: true }}>
26
+ <input type="email" id="demo-wrapper" placeholder="email@example.com" style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);" />
27
+ </Story>
28
+
29
+ <Story name="Required" args={{ label: "Password", required: true }}>
30
+ <input type="password" id="demo-wrapper" placeholder="Enter password" style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);" />
31
+ </Story>
@@ -0,0 +1,27 @@
1
+ export default FormFieldWrapper;
2
+ type FormFieldWrapper = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormFieldWrapper: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import FormFieldWrapper from "./FormFieldWrapper.svelte";
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }
@@ -67,13 +67,13 @@
67
67
  ============================================ */
68
68
 
69
69
  .form-fieldset__summary {
70
- gap: var(--fd-space-2);
70
+ gap: var(--fd-space-xs);
71
71
  }
72
72
 
73
73
  .form-fieldset__label {
74
74
  display: flex;
75
75
  align-items: center;
76
- gap: var(--fd-space-2);
76
+ gap: var(--fd-space-xs);
77
77
  }
78
78
 
79
79
  .form-fieldset__title {
@@ -106,13 +106,13 @@
106
106
  }
107
107
 
108
108
  .form-fieldset__content {
109
- padding-top: var(--fd-space-2);
109
+ padding-top: var(--fd-space-xs);
110
110
  }
111
111
 
112
112
  .form-fieldset__fields {
113
113
  display: flex;
114
114
  flex-direction: column;
115
- gap: var(--fd-space-5);
115
+ gap: var(--fd-space-2xl);
116
116
  }
117
117
 
118
118
  /* ============================================
@@ -122,19 +122,19 @@
122
122
  .form-fieldset--static {
123
123
  border: 1px solid var(--fd-border-muted);
124
124
  border-radius: var(--fd-radius-lg);
125
- padding: var(--fd-space-4);
125
+ padding: var(--fd-space-xl);
126
126
  margin: 0;
127
127
  }
128
128
 
129
129
  .form-fieldset__legend {
130
- padding: 0 var(--fd-space-2);
130
+ padding: 0 var(--fd-space-xs);
131
131
  font-size: var(--fd-text-sm);
132
132
  font-weight: 600;
133
133
  color: var(--fd-foreground);
134
134
  }
135
135
 
136
136
  .form-fieldset__description {
137
- margin: 0 0 var(--fd-space-3) 0;
137
+ margin: 0 0 var(--fd-space-md) 0;
138
138
  font-size: var(--fd-text-xs);
139
139
  color: var(--fd-muted-foreground);
140
140
  line-height: 1.4;
@@ -0,0 +1,33 @@
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import FormNumberField from "./FormNumberField.svelte";
4
+ import { fn } from "storybook/test";
5
+
6
+ const { Story } = defineMeta({
7
+ title: "Form/FormNumberField",
8
+ component: FormNumberField,
9
+ tags: ["autodocs"],
10
+ argTypes: {
11
+ value: { control: "number" },
12
+ placeholder: { control: "text" },
13
+ min: { control: "number" },
14
+ max: { control: "number" },
15
+ step: { control: "number" },
16
+ required: { control: "boolean" },
17
+ disabled: { control: "boolean" },
18
+ },
19
+ args: {
20
+ id: "demo-number-field",
21
+ value: "",
22
+ onChange: fn(),
23
+ },
24
+ });
25
+ </script>
26
+
27
+ <Story name="Default" args={{ placeholder: "Enter a number..." }} />
28
+
29
+ <Story name="With Value" args={{ value: 42 }} />
30
+
31
+ <Story name="With Constraints" args={{ value: 50, min: 0, max: 100, step: 5, placeholder: "0-100, step 5" }} />
32
+
33
+ <Story name="Disabled" args={{ value: 10, disabled: true }} />
@@ -0,0 +1,27 @@
1
+ export default FormNumberField;
2
+ type FormNumberField = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormNumberField: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import FormNumberField from "./FormNumberField.svelte";
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }
@@ -0,0 +1,31 @@
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import FormRangeField from "./FormRangeField.svelte";
4
+ import { fn } from "storybook/test";
5
+
6
+ const { Story } = defineMeta({
7
+ title: "Form/FormRangeField",
8
+ component: FormRangeField,
9
+ tags: ["autodocs"],
10
+ argTypes: {
11
+ value: { control: { type: "number" } },
12
+ min: { control: "number" },
13
+ max: { control: "number" },
14
+ step: { control: "number" },
15
+ disabled: { control: "boolean" },
16
+ },
17
+ args: {
18
+ id: "demo-range-field",
19
+ value: 50,
20
+ onChange: fn(),
21
+ },
22
+ });
23
+ </script>
24
+
25
+ <Story name="Default" args={{ min: 0, max: 100, step: 1 }} />
26
+
27
+ <Story name="Temperature" args={{ value: 0.7, min: 0, max: 2, step: 0.05 }} />
28
+
29
+ <Story name="Small Range" args={{ value: 3, min: 1, max: 10, step: 1 }} />
30
+
31
+ <Story name="Disabled" args={{ value: 75, min: 0, max: 100, disabled: true }} />
@@ -0,0 +1,27 @@
1
+ export default FormRangeField;
2
+ type FormRangeField = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormRangeField: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import FormRangeField from "./FormRangeField.svelte";
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }
@@ -0,0 +1,50 @@
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import FormSelect from "./FormSelect.svelte";
4
+ import { fn } from "storybook/test";
5
+
6
+ const { Story } = defineMeta({
7
+ title: "Form/FormSelect",
8
+ component: FormSelect,
9
+ tags: ["autodocs"],
10
+ argTypes: {
11
+ value: { control: "text" },
12
+ required: { control: "boolean" },
13
+ disabled: { control: "boolean" },
14
+ },
15
+ args: {
16
+ id: "demo-select",
17
+ value: "",
18
+ onChange: fn(),
19
+ },
20
+ });
21
+ </script>
22
+
23
+ <Story
24
+ name="String Options"
25
+ args={{
26
+ options: ["Option A", "Option B", "Option C"],
27
+ value: "Option A",
28
+ }}
29
+ />
30
+
31
+ <Story
32
+ name="FieldOption Objects"
33
+ args={{
34
+ options: [
35
+ { value: "gpt-4", label: "GPT-4" },
36
+ { value: "gpt-3.5", label: "GPT-3.5 Turbo" },
37
+ { value: "claude-3", label: "Claude 3 Opus" },
38
+ ],
39
+ value: "gpt-4",
40
+ }}
41
+ />
42
+
43
+ <Story
44
+ name="Disabled"
45
+ args={{
46
+ options: ["Read", "Write", "Admin"],
47
+ value: "Read",
48
+ disabled: true,
49
+ }}
50
+ />
@@ -0,0 +1,27 @@
1
+ export default FormSelect;
2
+ type FormSelect = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormSelect: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import FormSelect from "./FormSelect.svelte";
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }
@@ -45,6 +45,7 @@
45
45
  } from '../../types/index.js';
46
46
  import { createTemplateAutocomplete } from './templateAutocomplete.js';
47
47
  import { getVariableSchema } from '../../services/variableService.js';
48
+ import { logger } from '../../utils/logger.js';
48
49
 
49
50
  interface Props {
50
51
  /** Field identifier */
@@ -158,7 +159,7 @@
158
159
  authProvider
159
160
  );
160
161
  } catch (error) {
161
- console.error('Failed to load variable schema:', error);
162
+ logger.error('Failed to load variable schema:', error);
162
163
  variableLoadError = error instanceof Error ? error.message : 'Failed to load variables';
163
164
  effectiveVariableSchema = undefined;
164
165
  } finally {
@@ -0,0 +1,30 @@
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import FormTextField from "./FormTextField.svelte";
4
+ import { fn } from "storybook/test";
5
+
6
+ const { Story } = defineMeta({
7
+ title: "Form/FormTextField",
8
+ component: FormTextField,
9
+ tags: ["autodocs"],
10
+ argTypes: {
11
+ value: { control: "text" },
12
+ placeholder: { control: "text" },
13
+ required: { control: "boolean" },
14
+ disabled: { control: "boolean" },
15
+ },
16
+ args: {
17
+ id: "demo-text-field",
18
+ value: "",
19
+ onChange: fn(),
20
+ },
21
+ });
22
+ </script>
23
+
24
+ <Story name="Default" args={{ placeholder: "Enter text..." }} />
25
+
26
+ <Story name="With Value" args={{ value: "Hello World", placeholder: "Enter text..." }} />
27
+
28
+ <Story name="Required" args={{ required: true, placeholder: "Required field" }} />
29
+
30
+ <Story name="Disabled" args={{ value: "Cannot edit this", disabled: true }} />
@@ -0,0 +1,27 @@
1
+ export default FormTextField;
2
+ type FormTextField = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const FormTextField: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import FormTextField from "./FormTextField.svelte";
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }